@charset "utf-8";

/* ----------------------------------------
	Base Style Seet

	//base
	0. default(reset)
	1. header
	2. footer
	3. link
	4. h
---------------------------------------- */

/* ----------------------------------------
	0. default(reset)
---------------------------------------- */

html, body {
  height: 100%;
}

body{
	background-color:#f3f3f3;
	background:url(../img/common/bg01.png) no-repeat;
	background-position:0 200px;
	background-size:100%;
	background-attachment:fixed;
	width: 100%;
	overflow: hidden;
	/*font*/
	font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', Helvetica, Arial, Verdana, sans-serif;
	-webkit-font-smoothing: antialiased;
	color:#282828;
	font-size:14px;
	line-height:1.5;
}

@media (max-width: 480px) {
body {
	background-position:0 100px;
	font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', Helvetica, Arial, Verdana, sans-serif !important;
}
}

/*@media (max-width: 480px) {
body{
	font-size:17px;
	color:#43271c;
	line-height:1.8;
	background-color:#fff;
	font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', Helvetica, Arial, Verdana, sans-serif;
	-webkit-font-smoothing: antialiased;
	position: relative;
	width: 100%;
	overflow: hidden;
}
}*/

header,footer,nav,section,article,figure,aside {
	display:block;
}

@font-face {		 
	/*nevis*/
  font-family: 'nevis';
  src: url('../fonts/nevis.eot'); /* IE9 Compat Modes */
  src: url('../fonts/nevis.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/nevis.woff') format('woff'), /* Modern Browsers */
       url('../fonts/nevis.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/nevis.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@media (max-width: 768px) {
	img{
		max-width: 100%;
		height: auto;
	}
}

/*+*/
@media (max-width: 992px) {
	.w80 { width:95%; margin:0 auto;}

	header .logo img {
		height:30px;
		/* width:165px; */
		margin:8px 0 0 0 !important;
	}

}

@media (max-width: 480px) {
	.w80 { width:100%;}
	}

input[type="text"], textarea {
	outline: none;
}	

/* ----------------------------------------
	1. header
---------------------------------------- */

header {
	background-color:#008de2;
	position:fixed;
	display:block;
	top:0;
	left:0;
	z-index:9999;
	width:100%;
}

@media (max-width: 480px) {
header {
	padding:10px;
	height:59px;
}
}

	header .toggle {
		float:left;
		margin:20px;
		cursor:pointer;
		/*font*/
		font-size:150%;
		color:#fff;
	}
	
	@media (max-width: 480px) {
	header .toggle {
		margin:4px 5px 0 0;
	}
	}

	header .logo {
		float:left;
		margin:12px 0 0 0;
	}
	@media (max-width: 480px) {
		header .logo {
			float:left;
			margin:0px 0 0 0;
		}
	}
	
		header .logo img {
			height:30px;
			/* width:165px; */
			margin:8px 0 0 -50px;
		}
		
		@media (max-width: 480px) {
			header .logo img {
				height:22px;
				/* width:82px; */
				margin:8px 0 0 6px;
			}
		}
		
		header .logo h1 {
			float:left;
			margin-top:3px;
			/*font*/
			font-family: 'nevis';
			color:#fff;
		}
		
		@media (max-width: 480px) {
			header .logo h1 {
				margin:0px 0 0 8px;
				font-size:16px;
			}
		}
			
			@media (max-width: 768px) {
				header .logo h1 i {
				display:none;
			}
			}
		
			header .logo h1 span {
				display:block;
				margin-top:-6px;
				/*font*/
				font-size:60%;
			}
			
			@media (max-width: 480px) {
			header .logo h1 span {
				display: none;
			}
			}
	
	header .user {
		background-color:'*';
		float:right;
		padding:1px;
		margin:0;
		margin-top:9px;
		border:#fff solid 1px;
		border-radius: 25px; 
		-webkit-border-radius: 25px; 
		-moz-border-radius: 25px;
	}
	
	@media (max-width: 480px) {
	header .user {
		margin-top:0;
	}
	}
	
	header .user:hover {
		background-color: #fff;
	}
		
		header .user .thmb {
			float: left;
			height:50px;
			width:50px;
			background-size: cover;
			background-position:center center;
			/*css3*/
			border-radius: 50%; 
			-webkit-border-radius: 50%; 
			-moz-border-radius: 50%;
		}
		
		@media (max-width: 480px) {
		header .user .thmb {
			height:35px;
			width:35px;
		}
		}
		
		header .user .name {
			float:left;
			padding:13px 30px 0 20px;
			/*font*/
			font-size:120%;
			font-family: 'nevis';
			color:#ccc;
		}
		
		@media (max-width: 480px) {
		header .user .name {
			padding:6px 30px 0 20px;
		}
		}

	header .h_menu {
		clear:both;
		width:100%;
		background-color:#007ecc;
	}
	
	@media (max-width: 480px) {
	header .h_menu {
		display:none;
	}
	}

		header .h_menu ul {
			width:80%;
			margin:0 auto;
			padding:0;
			background-image: -webkit-linear-gradient(bottom, #008de2, #007ecc);
			background-image: -moz-linear-gradient(bottom, #008de2, #007ecc);
			background-image: -o-linear-gradient(bottom, #008de2, #007ecc);
			background-image: -ms-linear-gradient(bottom, #008de2, #007ecc);
			background-image: linear-gradient(to top, #008de2, #007ecc);
		}
	
			header .h_menu ul li {
				float:left;
				width:25%;
				padding:15px;
				background:#007ecc no-repeat right;
				/*font*/
				text-align:center;
				font-family: 'nevis';
				color: #fff;
				font-size:120%;
			}
			
			header .h_menu ul li:hover, header .h_menu ul li.current {
				background-image: -webkit-linear-gradient(top, #008de2, #007ecc);
				background-image: -moz-linear-gradient(top, #008de2, #007ecc);
				background-image: -o-linear-gradient(top, #008de2, #007ecc);
				background-image: -ms-linear-gradient(top, #008de2, #007ecc);
				background-image: linear-gradient(to bottom, #008de2, #007ecc);
			}

/* ----------------------------------------
	2. footer
---------------------------------------- */

footer {
	padding:50px 0 50px 0;
}

@media (max-width: 480px) {
footer {
	padding:30px 0;
}
}

	footer .sns {
		width:240px;
		margin:0 auto;
	}
	
	footer .sns .sns_share01 ul li {
		background-color:#a7a9ac;
	}
	
	footer .copy {
		display:block;
		margin-top:20px;
		/*font*/
		color:#a7a9ac;
		text-align:center;
	}
	
	footer .copy img {
		margin-bottom:10px;
		width: 40px;
		/*font*/
		text-align:center;
	}

/* ----------------------------------------
	3. link
---------------------------------------- */

a{
	text-decoration: none;
	font-weight: bold;
	color: #008de2;
}

a:hover{
	text-decoration: none;
}

a.btn:hover,
button.btn:hover{
	filter: alpha(opacity=80);
	-moz-opacity:0.80;
	opacity:0.80;
}

/* ----------------------------------------
	5. h
---------------------------------------- */

h1,h2,h3 {
	/*font*/
	font-weight:lighter;
}