/* LESS Document */

/*-----------------------------------------------------------
default
------------------------------------------------------------*/
*{
	border: 0;
	margin: 0;
	padding: 0;
	outline: 0;
	line-height: 1.5;
	font-weight: normal;
	vertical-align: baseline;
}
html,body{
	zoom: 1;
    width: 100%;
    height: 100%;
	font-size: 62.5%;
}
body{
	color: #333;
	background: #f5f5f5;
	font-family: YuGothic,'Yu Gothic',"メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
}
::selection			{background: #333; color: #ffffff;}
::-moz-selection	{background: #333; color: #ffffff;}
ol, ul				{list-style: none;}
table				{border-collapse: collapse; font-weight: normal;}
a img:hover			{opacity: 0.8;}
a					{color: #3AABD2;}


/*-----------------------------------------------------------
col
------------------------------------------------------------*/
@media screen and (min-width: 1281px){
	#wrap{
		width: 1200px;
		margin: 0 auto;
		background: #fff;
		font-size: 1.6rem;
		position: relative;
		overflow: hidden;
	}
}
@media screen and (max-width: 1280px){
	#wrap{
		width: 95%;
		margin-left: 5%;
		background: #fff;
		font-size: 1.6rem;
		position: relative;
		overflow: hidden;
	}
}
@media screen and (min-width: 641px){
	.inner-1040,
	.inner-800,
	.inner-740,
	.inner-700{
		clear: both;
		margin: 0 auto;
		overflow: hidden;
	}
	.inner-1040{
		width: 1040px;
	}
	.inner-800{
		width: 800px;
	}
	.inner-740{
		width: 740px;
	}
	.inner-700{
		width: 700px;
	}
	
	main{
		float: left;
		width: 740px;
		height: auto;
		overflow: hidden;
	}
	article{
		clear: both;
		width: 100%;
		overflow: hidden;
		margin-bottom: 80px;

		section{
			clear: both;
			margin-bottom: 80px;
			overflow: hidden;
		}
	}
	aside{
		float: right;
		width: 220px;
		overflow: hidden;
		
		.aside-box{
			clear: both;
			overflow: hidden;
			margin-bottom: 80px;
			
			.aside-title{
				margin-bottom: 10px;
				font-size: 2.0rem;
				line-height: 1;
		
				img{
					width: 20px;
					height: 20px;
					margin-right: 5px;
				}
			}
			
			form{
				
				input[type="text"]{
					float: left;
					width: 170px;
					padding: 10px;
					font-size: 1.2rem;
					border-radius: 5px 0 0 5px;
					border-top: 1px #ddd solid;
					border-left: 1px #ddd solid;
					border-bottom: 1px #ddd solid;
					box-sizing: border-box;
				}
				
				input[type="submit"]{
					float: left;
					width: 50px;
					color: #fff;
					padding: 10px 0;
					font-size: 1.2rem;
					border-radius: 0 5px 5px 0;
					border: 1px #333 solid;
					box-sizing: border-box;
					background: #333;
					text-align: center;
				}
			}
		}
	}
}
@media screen and (max-width: 640px){
	#wrap{
		max-width: 95%;
		background: #fff;
		font-size: 1.5rem;
		margin-left: 5%;
		overflow: hidden;
	}
	.inner-1040,
	.inner-800,
	.inner-740,
	.inner-700{
		max-width: 640px;
		overflow: hidden;
	}
	main{
		max-width: 640px;
		overflow: hidden;
	}
	article{
		clear: both;
		width: 100%;
		overflow: hidden;
		margin-bottom: 80px;

		section{
			clear: both;
			margin-bottom: 30px;
			overflow: hidden;
		}
	}
	aside{
		max-width: 640px;
		overflow: hidden;
		margin: 0 10px;
		
		.aside-box{
			clear: both;
			overflow: hidden;
			margin-bottom: 30px;
			
			.aside-title{
				font-size: 1.8rem;
				margin-bottom: 5px;
				
				img{
					width: 18px;
					height: 18px;
					margin-right: 10px;
				}
			}
			
			form{
				
				input[type="text"]{
					float: left;
					width: 75%;
					height: 40px;
					padding: 10px;
					font-size: 1.4rem;
					border-radius: 5px 0 0 5px;
					border-top: 1px #ddd solid;
					border-left: 1px #ddd solid;
					border-bottom: 1px #ddd solid;
					box-sizing: border-box;
					-webkit-appearance: none;
					-moz-appearance: none;
					-ms-appearance: none;
					-o-appearance: none;
					appearance: none;
				}
				
				input[type="submit"]{
					float: left;
					width: 25%;
					height: 40px;
					color: #fff;
					padding: 10px 0;
					font-size: 1.4rem;
					border-radius: 0 5px 5px 0;
					border: 1px #333 solid;
					box-sizing: border-box;
					background: #333;
					text-align: center;
					-webkit-appearance: none;
					-moz-appearance: none;
					-ms-appearance: none;
					-o-appearance: none;
					appearance: none;
				}
			}
			
			.tw-tl,
			.fb-tl{
				width: 300px;
				margin: 0 auto;
			}
		}
	}
}


/*-----------------------------------------------------------
global
------------------------------------------------------------*/
@media screen and (min-width: 641px){
	/* global */
	.pc{display: block;}
	.sp{display: none;}
	
	/* title */
	.content-title{
		line-height: 1;
		font-size: 3.2rem;
		font-weight: bold;
		margin-bottom: 20px;
		
		img{
			width: 32px;
			height: 32px;
			margin-right: 10px;
		}
		
		span{
			font-size: 2.0rem;
			margin-left: 20px;
			font-weight: normal;
		}
	}
	
	/* col */
	.single-col{
		
		img{
			float: left;
			width: 300px;
			height: 200px;
			overflow: hidden;
		}
		
		.text-box{
			float: right;
			width: 420px;
			height: auto;
			
			.title{
				
				a{
					color: #333;
					font-size: 2.0rem;
					font-weight: bold;
					text-decoration: none;
					
					&:hover{
						color: #3AABD2;
					}
				}
			}
			p{
				margin-bottom: 30px;
			}
		}
	}
	.twin-col{
		
		li{
			clear: none;
			float: left;
			width: 350px;
			margin-right: 40px;
			margin-bottom: 40px;

			&:nth-child(2n){
				margin-right: 0;
			}

			img{
				width: 350px;
				height: auto;
				overflow: hidden;
				margin-bottom: 10px;
				display: block;
			}

			.cat{
				font-size: 2.0rem;
				font-weight: bold;
			}
			a{
				text-decoration: none;
			}
			p{
				margin-bottom: 10px;
			}
		}
	}
	
	/* info */
	.cat{
		font-size: 1.2rem;
		
		a{
			text-decoration: none;
			
			&:hover{
				text-decoration: underline;
			}
		}
	}
	.date{
		color: #bbb;
		font-size: 1.2rem;
		display: inline-block;
		margin-bottom: 10px;
	}
	.tag{
		display: block;
		margin-bottom: 20px;
		
		span{
			font-size: 1.2rem;
			margin-right: 10px;
			display: inline-block;
			
			&:first-child{
				
				&:before{
					float: left;
					content: "";
					width: 16px;
					height: 16px;
					margin-right: 10px;
					background: url(../images/icon/tag.svg);
				}
			}
		}
	}
	
	/* bt */
	.read{
		
		a{
			display: block;
			color: #333;
			font-size: 1.2rem;
			text-decoration: none;
			text-align: right;
			
			&:hover{
				text-decoration: underline;
			}
		}
	}
	
	/* wp-pagenavi */
	.wp-pagenavi{
		clear: both;
		margin-bottom: 50px;
		text-align: center;
		
		a,span{
			padding: 5px 10px;
			margin: 0 1px;
			border-radius: 2px;
			border: 1px #ddd solid;
			background: #ffffff;
			text-decoration: none;
			
			&:hover{
				background: #eeeeee;
			}
		}
		
		.current{
			color: #ffffff;
			background: #eeeeee;
		}
	}
	
	/* table */
	table{
		width: 100%;
		
		tr{
			width: 100%;
			
			th{
				width: 200px;
				padding: 10px;
				text-align: left;
				font-weight: normal;
				vertical-align: middle;
				box-sizing: border-box;
				border: 1px #ddd solid;
				background: #f9f9f9;
			}
			td{
				padding: 10px;
				vertical-align: middle;
				box-sizing: border-box;
				border: 1px #ddd solid;
				
			}
		}
	}
}
@media screen and (max-width: 640px){
	/* global */
	p{text-align: left;}
	.pc{display: none;}
	.sp{display: block;}
	
	/* title */
	.content-title{
		clear: both;
		font-size: 2.4rem;
		font-weight: bold;
		margin-bottom: 20px;
		margin-left: 10px;
		
		img{
			width: 24px;
			height: 24px;
			margin-right: 5px;
			position: relative;
			top: -6px;
		}
		
		span{
			font-size: 1.2rem;
			margin-left: 10px;
			font-weight: normal;
		}
	}
	
	/* col */
	.single-col,
	.twin-col li{
		margin-bottom: 0;
		box-sizing: border-box;
		border-top: 1px #ddd solid;
		
		&:last-child{
			border-bottom: 1px #ddd solid;
		}
		
		a{
			color: #333;
			font-size: 1.4rem;
			line-height: 1.0;
			text-decoration: none;
			display: block;
			padding: 10px 0;
			overflow: hidden;

			&:hover{
				color: #3AABD2;
			}

			img{
				float: left;
				width: 30%;
				height: auto;
				margin: 0 2%;
			}

			.text-box{
				float: left;
				width: 64%;
				margin-right: 2px;
				
				.title{
					font-weight: bold;
				}
				
				p{
					font-size: 1.4rem;
					margin-bottom: 5px;
					line-height: 1.3;
				}
			}
		}
	}
	
	/* info */
	.twin-col{
		
		.cat{
			font-size: 1.4rem;
			font-weight: bold;
		}
	}
	.cat{
		font-size: 1.2rem;
		
		a{
			text-decoration: none;
		}
	}
	.date{
		color: #bbb;
		font-size: 1.4rem;
		display: inline-block;
	}
	.tag{
		display: block;
		margin-bottom: 20px;
		
		span{
			font-size: 1.2rem;
			margin-right: 10px;
			vertical-align: middle;
			display: inline-block;
			
			&:first-child{
				
				&:before{
					float: left;
					content: "";
					width: 16px;
					height: 16px;
					margin-right: 10px;
					background: url(../images/icon/tag.svg);
				}
			}
		}
	}
	
	/* bt */
	.read{
		text-align: right;
		margin-right: 10px;
		
		a{
			color: #333;
			font-size: 1.4rem;
			text-decoration: none;
			display: inline-block;
		}
	}
	
	/* wp-pagenavi */
	.wp-pagenavi{
		clear: both;
		margin-top: 20px;
		margin-bottom: 10px;
		text-align: center;
		
		a,span{
			padding: 5px 10px;
			margin: 0 1px;
			border-radius: 2px;
			border: 1px #ddd solid;
			background: #ffffff;
			text-decoration: none;
			
			&:hover{
				background: #eeeeee;
			}
		}
		
		.current{
			color: #ffffff;
			background: #eeeeee;
		}
	}
	
	/* table */
	table{
		width: 100%;
		
		tr{
			width: 100%;
			
			th{
				width: 100%;
				padding: 10px;
				font-size: 1.4rem;
				font-weight: normal;
				vertical-align: middle;
				box-sizing: border-box;
				border: 1px #ddd solid;
				background: #f9f9f9;
			}
			td{
				width: 100%;
				padding: 10px;
				font-size: 1.4rem;
				vertical-align: middle;
				box-sizing: border-box;
				border: 1px #ddd solid;
				
			}
		}
	}
}


/*-----------------------------------------------------------
header
------------------------------------------------------------*/
@media screen and (min-width: 1281px){
	#header-sp,
	#drawer{
		display: none;
	}
	
	header{
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		
		#header-wrap{
			width: 1200px;
			margin: 0 auto;
			overflow: hidden;
			padding: 10px 0;

			#logo{
				float: left;

				img{
					width: 80px;
					height: 80px;
				}
				span{
					font-size: 1.4rem;
					font-weight: bold;
					position: relative;
					margin-left: 10px;
					top: -22px;
				}
			}

			#global-nav{
				float: right;
				margin-top: 35px;

				ul{
					float: left;

					li{
						float: left;
						font-size: 1.2rem;
						margin-left: 40px;

						a{
							color: #333;
							font-weight: bold;
							text-align: center;
							text-decoration: none;

							&:hover{
								color: #3AABD2;
							}
						}
					}
				}
			}
		}
	}
	
	#top-anc{
		margin-top: 120px;
	}
	
	#bcn{
		color: #999;
		font-size: 1.2rem;
		margin-bottom: 50px;
		
		a{
			text-decoration: none;
		}
	}
}
@media screen and (max-width: 1280px){
	#header-sp,
	#drawer{
		display: none;
	}
	
	header{
		width: 95%;
		margin-left: 5%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		
		#header-wrap{
			width: 100%;
			overflow: hidden;
			padding: 10px 0;

			#logo{
				float: left;

				img{
					width: 80px;
					height: 80px;
				}
				span{
					font-size: 1.4rem;
					font-weight: bold;
					position: relative;
					margin-left: 10px;
					top: -22px;
				}
			}

			#global-nav{
				float: right;
				margin-top: 35px;

				ul{
					float: left;

					li{
						float: left;
						font-size: 1.4rem;
						margin-left: 40px;

						a{
							color: #333;
							font-weight: bold;
							text-align: center;
							text-decoration: none;

							&:hover{
								color: #3AABD2;
							}
						}
					}
				}
			}
		}
	}
	
	#top-anc{
		margin-top: 120px;
	}
	
	#bcn{
		color: #999;
		font-size: 1.2rem;
		margin-bottom: 50px;
		
		a{
			text-decoration: none;
		}
	}
}
@media screen and (max-width: 640px){
	header{
		display: none;
	}
	
	#header-sp{
		width: 95%;
		height: 70px;
		margin-left: 5%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		display: block;
		background: rgba(255,255,255,0.95);
		
		#logo{
			float: left;
			margin-top: 10px;
			margin-left: 10px;

			img{
				width: 50px;
				height: 50px;
			}
			span{
				font-size: 1.2rem;
				font-weight: bold;
				margin-left: 5px;
				position: relative;
				top: -15px;
			}
		}

		.drawer-button{
			float: right;
			color: #3AABD2;
			width: 70px;
			height: 70px;
			display: block;
			text-align: center;

			#hamburger {
				position: relative;
				top: 18px;
				left: 22px;

				li{
					width: 30px;
					height: 1px;
					display: block;
					border-top: 1px #3AABD2 solid;
					margin-bottom: 5px;

					&:last-child{
						font-size: 1.2rem;
						border-top: 0;
						margin-bottom: 0;
						margin-left: -2px;
					}
				}
			}
		}
	}
	
	/* drawer */
	#wrapper {
		position: relative;
		
		&.open {
			-webkit-transform: translate3d(-250px, 0, 0);
			transform: translate3d(-250px, 0, 0);
			overflow: hidden;
		}
	}
	
	#drawer {
		font-size: 1.4rem;
		position: fixed;
		top: 0;
		right: -250px;
		width: 250px;
		height: 100%;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		background-color: #222;
		z-index: 9999;
		display: block;
		-webkit-transition: all 0.2s;
		-moz-transition: all 0.2s;
		-ms-transition: all 0.2s;
		-o-transition: all 0.2s;
		transition: all 0.2s;
		
		&.open {
			-webkit-transform: translate3d(-250px, 0, 0);
			transform: translate3d(-250px, 0, 0);
			-webkit-transition: all 0.2s;
			-moz-transition: all 0.2s;
			-ms-transition: all 0.2s;
			-o-transition: all 0.2s;
			transition: all 0.2s;
		}
		
		#button{
			float: right;
			padding: 10px;
			
			#close {
				color: #fff;
				height: 40px;
				border: 1px #fff solid;
				background: #000;
				padding: 5px;
				
				li{
					width: 40px;
					height: 1px;
					display: block;
					border-top: 1px #fff solid;
					
					&:first-child{
						margin-top: 4px;
						-webkit-transform: translateY(10px) rotate(45deg);
						-moz-transform: translateY(10px) rotate(45deg);
						-ms-transform: translateY(10px) rotate(45deg);
						-o-transform: translateY(10px) rotate(45deg);
						transform: translateY(10px) rotate(45deg);
					}
					&:nth-child(2n){
						-webkit-transform: translateY(10px) rotate(-45deg);
						-moz-transform: translateY(10px) rotate(-45deg);
						-ms-transform: translateY(10px) rotate(-45deg);
						-o-transform: translateY(10px) rotate(-45deg);
						transform: translateY(10px) rotate(-45deg);
					}
					&:last-child{
						border: 0;
						margin-top: 22px;
						font-size: 1.2rem;
					}
				}
			}
		}
		
		ul{
			clear: both;
			
			li{
				box-sizing: border-box;
				border-top: 1px #555 solid;
				
				&:last-child{
					border-bottom: 1px #555 solid;
				}
				
				a{
					display: block;
					color: #fff;
					padding: 15px;
					text-decoration: none;
				}
			}
			
			.second-menu{
				font-size: 1.2rem;
				background: #333333;
				box-sizing: border-box;
				border-top: 1px #555 solid;
				
				li{
					clear: both;
					
					&:first-child{
						border-top: 0;
					}
					
					&:last-child{
						border-bottom: 0;
					}
					
					a{
						display: block;
						color: #fff;
						padding: 10px 20px;
						text-decoration: none;
						
						&:after{
							color: #999999;
							float: right;
							content: ">";
						}
					}
				}
			}
		}
	}
	
	#top-anc{
		margin-top: 70px;
	}
	
	#bcn{
		color: #bbb;
		font-size: 1.0rem;
		margin: 0 10px;
		padding-top: 10px;
		padding-bottom: 20px;
		
		a{
			color: #80C8E7;
			text-decoration: none;
		}
	}
}


/*-----------------------------------------------------------
single-content
------------------------------------------------------------*/
.contents{
	
	p{
		line-height: 2.0em;
		margin-bottom: 3.0rem;
	}
	strong{
		line-height: 2.0em;
		margin-bottom: 3.0rem;
		font-weight: bold;
	}
	.top-image img{
		width: 100%;
		height: auto;
	}
}
@media screen and (min-width: 641px){
	.contents{
		
		h1{
			font-size: 3.2rem;
			font-weight: bold;
			margin: 20px 0;
		}
		h2{
			font-size: 2.4rem;
			font-weight: bold;
			margin-top: 60px;
			margin-bottom: 60px;
			background: #f9f9f9;
			border-left: 3px #15b7ff solid;
			padding: 20px 50px;
		}
		h3{
			font-size: 2.0rem;
			font-weight: bold;
			margin: 60px 50px 30px 50px;
			border-bottom: 2px #15b7ff solid;
		}
		h4{
			font-size: 1.8rem;
			margin: 30px 50px;
			border-bottom: 1px #15b7ff solid;
		}
		p{
			padding: 0 50px;
		}
		.image_wrap{
			width: 100%;
			margin: 0 50px;
			overflow: hidden;
			background: #f5f5f5;
			
			img{
				max-width: 700px;
				height: auto;
				display: block;
			}
		}
		ul{
			list-style: disc;
			padding-left: 20px;
			margin: 30px 50px;
		}
		.wp-caption{
			padding: 0 50px;
			width: 700px;
			
			img{
				max-width: 700px;
				height: auto;
				display: block;
			}
			.wp-caption-text{
				color: #a7a7a7;
				font-size: 1.2rem;
				margin-top: 10px;
				margin-bottom: 30px;
				display: inline-block;
			}
		}
	}
	.backnumber{
		
		ul{
			list-style: disc;
			margin-left: 20px;
			
			li{
				font-size: 1.4rem;
				margin-bottom: 10px;
				
				a{
					text-decoration: none;
					
					&:hover{
						text-decoration: underline;
					}
				}
			}
		}
	}
	.writer-info{
		
		img{
			float: left;
		}
		.text-box{
			float: right;
			width: 640px;
			height: 80px;
			padding: 20px;
			font-size: 1.4rem;
			background: #f9f9f9;
		}
		.writer-name{
			font-weight: bold;
			margin-bottom: 15px;
		}
	}
}
@media screen and (max-width: 640px){
	.contents{
		
		h1{
			font-size: 2.4rem;
			font-weight: bold;
			margin: 10px;
		}
		h2{
			font-size: 2.0rem;
			font-weight: bold;
			margin-top: 60px;
			margin-bottom: 60px;
			background: #f9f9f9;
			border-left: 3px #15b7ff solid;
			padding: 20px 10px;
		}
		h3{
			font-size: 1.8rem;
			font-weight: bold;
			margin: 60px 10px 30px 10px;
			border-bottom: 2px #15b7ff solid;
		}
		h4{
			font-size: 1.6rem;
			margin: 60px 10px 30px 10px;
			border-bottom: 1px #15b7ff solid;
		}
		.cat{
			margin-left: 10px;
		}
		p{
			padding: 0 20px;
			
			img{
				width: 100%;
				height: auto;
			}
		}
		ul{
			list-style: disc;
			padding-left: 20px;
			margin-left: 20px;
			margin-bottom: 30px;
		}
		.wp-caption{
			padding: 0 20px;
			
			img{
				width: 100%;
				height: auto;
				display: block;
			}
			
			.wp-caption-text{
				color: #a7a7a7;
				font-size: 1.2rem;
				margin-top: 5px;
				margin-bottom: 30px;
				display: inline-block;
			}
		}
		iframe{
			width: 100%;
		}
	}
	.backnumber{
		margin: 0 10px;
		
		ul{
			list-style: disc;
			margin-left: 20px;
			
			li{
				font-size: 1.4rem;
				margin-bottom: 20px;
				
				a{
					text-decoration: none;
					
					&:hover{
						text-decoration: underline;
					}
				}
			}
		}
	}
	.writer-info{
		margin: 0 10px;
		
		img{
			float: left;
			width: 18%;
			height: auto;
			margin-right: 2%;
		}
		.text-box{
			font-size: 1.4rem;
			float: right;
			width: 80%;
			height: auto;
		}
		.writer-name{
			font-weight: bold;
			margin-bottom: 5px;
		}
	}
}


/*-----------------------------------------------------------
sns
------------------------------------------------------------*/
@media screen and (min-width: 1281px){
	.header-sns{
		width: 60px;
		position: fixed;
		top: 190px;
		left: 0;
		overflow: hidden;
		background: rgba(255,255,255,0.9);
		
		li{
			display: inline-block;
			border-top: 1px #ddd solid;
			
			&:last-child{
				border-bottom: 1px #ddd solid;
			}
			
			a{
				display: block;
				padding: 15px;

				img{
					width: 30px;
					height: 30px;
				}
			}
		}
	}
	.sns{
		overflow: hidden;
		margin: 0 !important;
		padding:  0 !important;
		list-style: none !important;
		
		li{
			float: left;
			color: #fff;
			border-radius: 3px;
			text-align: center;
			margin-right: 10px;
			
			&:last-child{
				margin-right: 0;
			}
			
			a{
				color: #fff;
				display: block;
				width: 140px;
				padding: 10px 0;
				font-size: 1.4rem;
				text-decoration: none;
			
				&:hover{
					padding: 11px 0 9px 0;
				}
			}
		}
		#twitter-bt{
			background: #00acee;
		}
		#facebook-bt{
			background: #3b5998;
		}
		#hatebu-bt{
			background: #5d8ac1;
		}
		#pocket-bt{
			background: #ee4056;
		}
		#line-bt{
			background: #25af00;
		}
	}
	.footer-sns{
		display: none;
	}
}
@media screen and (max-width: 1280px){
	.header-sns{
		width: 60px;
		position: fixed;
		top: 190px;
		left: 5%;
		overflow: hidden;
		background: rgba(255,255,255,0.9);
		
		li{
			display: inline-block;
			border-top: 1px #ddd solid;
			
			&:last-child{
				border-bottom: 1px #ddd solid;
			}
			
			a{
				display: block;
				padding: 15px;

				img{
					width: 30px;
					height: 30px;
				}
			}
		}
	}
	.sns{
		overflow: hidden;
		margin: 0 !important;
		padding:  0 !important;
		list-style: none !important;
		
		li{
			float: left;
			color: #fff;
			border-radius: 3px;
			text-align: center;
			margin-right: 10px;
			
			&:last-child{
				margin-right: 0;
			}
			
			a{
				color: #fff;
				display: block;
				width: 140px;
				padding: 10px 0;
				font-size: 1.4rem;
				text-decoration: none;
			
				&:hover{
					padding: 11px 0 9px 0;
				}
			}
		}
		#twitter-bt{
			background: #00acee;
		}
		#facebook-bt{
			background: #3b5998;
		}
		#hatebu-bt{
			background: #5d8ac1;
		}
		#pocket-bt{
			background: #ee4056;
		}
		#line-bt{
			background: #25af00;
		}
	}
	.footer-sns{
		display: none;
	}
}
@media screen and (max-width: 640px){
	.header-sns,.sns{
		display: none;
	}
	.footer-sns{
		width: 100%;
		position: fixed;
		bottom: 0;
		display: block;
		
		li{
			float: left;
			width: 18%;
			padding: 12px 1%;
			text-align: center;
			background: #f5f5f5;
			
			&:nth-child(2n){
				background: #fff;
			}
			
			img{
				width: 25px;
				height: 25px;
			}
		}
	}
}


/*-----------------------------------------------------------
form
------------------------------------------------------------*/
@media screen and (min-width: 641px){
	
	#contact{
		table{
			width: 100%;

			tr{
				width: 100%;

				th{
					width: 200px;
					padding: 20px;
					text-align: left;
					font-weight: normal;
					vertical-align: middle;
					box-sizing: border-box;
					border: 1px #ddd solid;
					background: #f9f9f9;
					
					img{
						position: relative;
						top: -5px;
						margin-left: 5px;
					}
				}
				td{
					padding: 20px;
					vertical-align: middle;
					box-sizing: border-box;
					border: 1px #ddd solid;

				}
			}
		}
		
		input[type="text"],
		input[type="email"],
		input[type="password"],
		input[type="number"],
		input[type="tel"],
		select,
		textarea{
			padding: 10px 5px;
			border: 2px #ddd solid;
			box-sizing: border-box;
			border-radius: 4px;
			-webkit-appearance: none;
			-moz-appearance: none;
			-ms-appearance: none;
			-o-appearance: none;
			appearance: none;
		}
		
		input[type="submit"]{
			width: 320px;
			color: #fff;
			padding: 10px;
			font-size: 2.4rem;
			border-radius: 4px;
			background: #FF6E00;
			-webkit-appearance: none;
			-moz-appearance: none;
			-ms-appearance: none;
			-o-appearance: none;
			appearance: none;
			
			&:hover{
				background: #FF2700;
			}
		}
		
		.formError {
			font-size: 1.2rem;
			color: #f00;
		}
		
		#privacy{
			padding: 20px;
			border: 1px #ddd solid;
			box-sizing: border-box;
			background: #ffffff;
			margin: 30px 0;
			
			.roll{
				width: 640px;
				font-size: 1.4rem;
				height: 240px;
				margin: 20px;
				overflow: scroll;
				border: 1px #ddd solid;
				box-sizing: border-box;
			}
		}
	}
}
@media screen and (max-width: 640px){
	#contact{
		
		img{
			position: relative;
			top: -3px;
			margin-left: 5px;
		}
		table{
			
			th{
				width: 100%;
				padding: 10px;
				display: block;
				font-weight: normal;
				vertical-align: middle;
				box-sizing: border-box;
				border: 1px #ddd solid;
				background: #f5f5f5;
			}
			
			td{
				width: 100%;
				padding: 10px;
				display: block;
				vertical-align: middle;
				box-sizing: border-box;
				border: 0;
				
				input[type="text"],
				input[type="email"],
				input[type="password"],
				textarea{
					width: 100%;
					padding: 10px 5px;
					border: 2px #ddd solid;
					box-sizing: border-box;
					border-radius: 4px;
					-webkit-appearance: none;
					-moz-appearance: none;
					-ms-appearance: none;
					-o-appearance: none;
					appearance: none;
				}
			}
		}
		
		input[type="submit"]{
			width: 95%;
			color: #fff;
			padding: 5px;
			font-size: 2.4rem;
			border-radius: 4px;
			background: #FF6E00;
			-webkit-appearance: none;
			-moz-appearance: none;
			-ms-appearance: none;
			-o-appearance: none;
			appearance: none;
		}
		
		.formError {
			font-size: 1.2rem;
			color: #f00;
		}
		
		#privacy{
			padding: 20px;
			margin: 10px;
			border: 1px #ddd solid;
			box-sizing: border-box;
			background: #ffffff;
			
			.roll{
				font-size: 1.4rem;
				height: 180px;
				padding: 10px;
				margin-top: 10px;
				overflow: scroll;
				border: 1px #ddd solid;
				box-sizing: border-box;
			}
		}
	}
}
/*----------------------------------------------------------*/



/*-----------------------------------------------------------
footer
------------------------------------------------------------*/
@media screen and (min-width: 641px){
	footer{
		width: 100%;
	
		address{
			color: #999999;
			font-size: 1.2rem;
			font-style: normal;
			margin-bottom: 20px;
		}
	}
	
	#page-top{
		z-index: 9999;
		position: fixed;
		bottom: 30px;
		right: 30px;
		
		img{
			width: 40px;
			height: 40px;
		}
	}
}
@media screen and (max-width: 640px){
	footer{
		width: 100%;
		margin: 0 10px;
	
		address{
			color: #999999;
			font-size: 1.0rem;
			font-style: normal;
			margin-bottom: 20px;
		}
	}
	
	#page-top{
		z-index: 9999;
		position: fixed;
		bottom: 60px;
		right: 10px;
		
		img{
			width: 30px;
			height: 30px;
		}
	}
}
/*----------------------------------------------------------*/