@charset "UTF-8";


/* general */

body{
	background: #000;
	font-size: 100%;
	letter-spacing: 0.1em;
	font-family: Verdana, "ŸàƒSƒVƒbƒN", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	color: #f5f5f5;
	line-height: 1.8em;
}
a{
	color: #78C2C4;
	text-decoration: none;
  transition: 0.3s ease-in-out 0s;
  -webkit-transition: 0.3s ease-in-out 0s;
  -moz-transition: 0.3s ease-in-out 0s;
  -o-transition: 0.3s ease-in-out 0s;
}
a:hover{
	color: #ccc;
}
br.clearfix{
  clear: both;
  line-height: 0;
}
a img{
  transition: 0.3s ease-in-out 0s;
  -webkit-transition: 0.3s ease-in-out 0s;
  -moz-transition: 0.3s ease-in-out 0s;
  -o-transition: 0.3s ease-in-out 0s;
}
a img:hover{
	filter:alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}

/* layout */

#container{
	background: url("../images/bg.png") repeat;
}
	header{
		width: 800px;
		margin: 0 auto;
		padding-top: 40px;
		position: relative;
	}
		h1#logo img{
			width: 300px;
			height: 50px;
			float: left;
			margin-right: 40px;
		}
		ul#global{
			height: 62px;
			list-style: none;
			font-weight: normal;
			letter-spacing: 0.3em;
		}
			ul#global li a{
				color: #f5f5f5;
				text-decoration: none;
				line-height: 62px;
				float: left;
				margin-left: 40px;
			}
			ul#global li a:hover{
				color: #ccc;
			}


		ul#globall{
			height: 62px;
			list-style: none;
			font-weight: normal;
			letter-spacing: 0.3em;
		}
			ul#globall li a{
				color: #f5f5f5;
				text-decoration: none;
				line-height: 62px;
				float: center;
				margin-left: 40px;
			}
			ul#globall li a:hover{
				color: #ccc;
			}


		ul#social-icons{
			list-style: none;
			margin: 0 auto;
			float: right;
		}
			ul#social-icons li{
				float: left;
				width: 40px;
				height: 40px;
				margin-left: 10px;
			}
				ul#social-icons li img{
					width: 40px;
					height: 40px;
				}
				ul#social-icons li a:hover img{
  transition: 0s ease-in-out 0s;
  -webkit-transition: 0s ease-in-out 0s;
  -moz-transition: 0s ease-in-out 0s;
  -o-transition: 0s ease-in-out 0s;
				}

	section#contents{
		width: 800px;
		margin: 0 auto;
	}
		.box{
			width: 800px;
			margin-bottom: 20px;
		}
			.headline{
				width: 180px;
				float: left;
			}
			.eye_catch{
				width: 600px;
				float: right;
			}
				.eye_catch img, .eye_catch iframe{
					width: 600px;
				}
		h2{
			font-size: 120%;
			font-weight: normal;
			letter-spacing: 0.3em;
			padding: 20px 0;
			color: #333;
		}
		h3{
			font-size: 90%;
			margin-top: 40px;
			font-weight: normal;
		}
		p{
			font-size: 80%;
			margin-top: 20px;
			word-break:break-all;
		}
		p.caption{
			font-size: 70%;
			margin-top: 7px;
			text-align: right;
		}
		hr{
	    border: 0;
	    border-bottom: 1px dashed #333;
	    margin: 2em 0 0 0;
		}

footer{
	width: 800px;
	margin: 0 auto;
	padding: 0 0 40px 0;
}
	p.copy{
		font-size: 70%;
		text-align: center;
	}


/* smartphone */
@media screen and (max-width:480px){

body{
	background: #222;
}

#container{
	background: url("../images/bg.png") repeat fixed;
}
	header{
		width: 90%;
		margin: 0 auto;
		padding: 20px 0 0 0;
	}
		h1#logo img{
			width: 100%;
			float: none;
		}
		ul#global{
			width: 100%;
			text-align: center;
			margin-top: 20px;
		}
			ul#global li a{
				margin-left: 0;
				float: none;
				line-height: 2em;
			}
		ul#social-icons{
			list-style: none;
			width: 100%;
			margin: 20px auto 0 auto;
			float: none;
		}
			ul#social-icons li{
				float: left;
				width: 18%;
				height: auto;
				margin-left: 0;
				margin: 0 3.5%;
			}
				ul#social-icons li img{
					width: 100%;
					height: auto;
				}

	section#contents{
		width: 90%;
		margin: 0 auto;
	}
		h2{
			font-size: 200%;
			text-align: center;
		}
		.box{
			width: 100%;
			margin-bottom: 0;
		}
			.headline{
				display: none;
			}
			.eye_catch{
				width: 100%;
				float: none;
			}
				.eye_catch img, .eye_catch iframe{
					width: 100%;
				}
			section#contents img, section#contents iframe{
				width: 100%;
			}

footer{
	width: 100%;
}

}