/* Common CSS */
htm, body {
	background:url(../images/common/bg.jpg) 0 0 #ededed fixed;
}

/* ___________________Font */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
    color: #333333;
	font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック",Helvetica,Arial,Verdana;
}

/* ___________________Link */
a {
	color: #0000FF;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
a:hover img {
	opacity:0.8;
	filter: alpha(opacity=80);
	-ms-filter: "alpha(opacity=80)";
}


/* Desktops and laptops */
@media screen and (min-width : 701px) {
	/* ___________________header */
	#header {
		width:100%;
		height:10px;
		min-width:1090px;
		padding:4px 0 0 0;
		position:fixed;
		z-index:100;
	}
	#header_border {
		width:100%;
		height:3px;
		position:absolute;
		top:0;
		left:0;
	}
	#header_border div {
		width:33%;
		height:3px;
		float:left;
		background:url(../images/common/header_border.png) repeat-x;
	}
	#header_border #border_c { background-position:0 0; }
	#header_border #border_m { background-position:0 -3px; width:34%}
	#header_border #border_y { background-position:0 -6px; }
	#logo {
		width: 199px;
		height: 67px;
		position:absolute;
		top:40px;
		left:8%;
	}
	#logo a {
		width: 199px;
		height: 67px;
		background: url(../images/common/logo.png) no-repeat;
		margin: 0 auto;
		padding: 0;
		display: block;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
	}
	#logo a:hover {
		opacity:0.8;
		filter: alpha(opacity=80);
		-ms-filter: "alpha(opacity=80)";
	}
	
	/* ___________________global navigation */
	#gnav {
		width:364px;
		height:89px;
		margin:0 auto;
		padding:0 0 0 1px;
	}
	#gnav > li {
		width:91px;
		height:89px;
		margin: 0;
		padding: 0;
		display: block;
		float:left;
		}
	#gnav li a {
		width:90px;
		height:89px;
		background:url(../images/common/gnav.png) #333333;
		margin: 0;
		padding: 0;
		display: block;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
		-webkit-transition: all 0.4s ease;
		-moz-transition: all 0.4s ease;
		-o-transition: all 0.4s ease;
		}
	#gnav li.gnav1 a:link, #gnav li.gnav1 a:visited { background-position:0 0; }
	#gnav li.gnav2 a:link, #gnav li.gnav2 a:visited { background-position:-91px 0; }
	#gnav li.gnav3 a:link, #gnav li.gnav3 a:visited { background-position:-182px 0; }
	#gnav li.gnav4 a:link, #gnav li.gnav4 a:visited { background-position:-273px 0; }
	#gnav li.gnav1 a:hover, #gnav li.gnav1 a:active { background-position:0 -89px; background-color:#ffffff; }
	#gnav li.gnav2 a:hover, #gnav li.gnav2 a:active { background-position:-91px -89px; background-color:#ffffff; }
	#gnav li.gnav3 a:hover, #gnav li.gnav3 a:active { background-position:-182px -89px; background-color:#ffffff; }
	#gnav li.gnav4 a:hover, #gnav li.gnav4 a:active { background-position:-273px -89px; background-color:#ffffff; }
	#gnav li.gnav1.on a { background-position:0 -89px; background-color:#ffffff; }
	#gnav li.gnav2.on a { background-position:-91px -89px; background-color:#ffffff; }
	#gnav li.gnav3.on a { background-position:-182px -89px; background-color:#ffffff; }
	#gnav li.gnav4.on a { background-position:-273px -89px; background-color:#ffffff; }
	
	/* ___________________layout */
	#wrapper {
		width:100%;
		min-width:1090px;
	}
	
	/* ___________________footer */
	#footer {
		width:100%;
		padding:60px 0 0 0;
		margin:0 auto;
	}
	#footer_nav {
		padding:0 0 80px 0;
		margin:0 auto;
		text-align:center;
	}
	#footer_nav li {
		display:inline;
	}
	#footer_nav a {
		padding:0 1em;
		color:#333333;
		font-size:14px;
	}
	#copyrights {
		width:100%;
		background-color:#333333;
		padding:10px 0 10px 0;
		margin: 0 auto;
		color: #dedddd;
		font-size: 10px;
		text-align: center;
	}
}

/* Smartphones (portrait and landscape) */
@media screen and (max-width : 700px) {
	/* ___________________Smartphones header */
	#header {
		width:100%;
		padding:20px 0 0 0;
	}
	#header_border {
		width:100%;
		height:10px;
		position:absolute;
		top:0;
		left:0;
	}
	#header_border div {
		width:33%;
		height:3px;
		float:left;
		background:url(../images/common/header_border.png) repeat-x;
	}
	#header_border #border_c { background-position:0 0; }
	#header_border #border_m { background-position:0 -3px; width:34%}
	#header_border #border_y { background-position:0 -6px; }
	#logo {
		width: 199px;
		height: 67px;
		margin:0 auto 20px auto;
	}
	#logo a {
		width: 199px;
		height: 67px;
		background: url(../images/common/logo.png) no-repeat;
		margin: 0 auto;
		padding: 0;
		display: block;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
	}
	#logo a:hover {
		opacity:0.8;
		filter: alpha(opacity=80);
		-ms-filter: "alpha(opacity=80)";
	}
	
	/* ___________________Smartphones global navigation */
	#gnav {
		width:182px;
		margin:0 auto 20px auto;
		padding:0 0 0 1px;
	}
	#gnav > li {
		width:91px;
		height:89px;
		margin: 0 0 1px 0;
		padding: 0;
		display: block;
		float:left;
	}
	#gnav li a {
		width:90px;
		height:89px;
		background:url(../images/common/gnav.png) #333333;
		margin: 0;
		padding: 0;
		display: block;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
		-webkit-transition: all 0.4s ease;
		-moz-transition: all 0.4s ease;
		-o-transition: all 0.4s ease;
	}
	#gnav li.gnav1 a:link, #gnav li.gnav1 a:visited { background-position:0 0; }
	#gnav li.gnav2 a:link, #gnav li.gnav2 a:visited { background-position:-91px 0; }
	#gnav li.gnav3 a:link, #gnav li.gnav3 a:visited { background-position:-182px 0; }
	#gnav li.gnav4 a:link, #gnav li.gnav4 a:visited { background-position:-273px 0; }
	#gnav li.gnav1 a:hover, #gnav li.gnav1 a:active { background-position:0 -89px; background-color:#ffffff; }
	#gnav li.gnav2 a:hover, #gnav li.gnav2 a:active { background-position:-91px -89px; background-color:#ffffff; }
	#gnav li.gnav3 a:hover, #gnav li.gnav3 a:active { background-position:-182px -89px; background-color:#ffffff; }
	#gnav li.gnav4 a:hover, #gnav li.gnav4 a:active { background-position:-273px -89px; background-color:#ffffff; }
	#gnav li.gnav1.on a { background-position:0 -89px; background-color:#ffffff; }
	#gnav li.gnav2.on a { background-position:-91px -89px; background-color:#ffffff; }
	#gnav li.gnav3.on a { background-position:-182px -89px; background-color:#ffffff; }
	#gnav li.gnav4.on a { background-position:-273px -89px; background-color:#ffffff; }
	
	/* ___________________Smartphones Layout */
	
	/* ___________________Smartphones footer */
	/* ___________________footer */
	#footer {
		width:100%;
		padding:60px 0 0 0;
		margin:0 auto;
	}
	#footer_nav {
		width:100%;
		padding:0;
		margin:0 auto;
		text-align:center;
		background-color:#333333;
		overflow:hidden;
	}
	#footer_nav li {
		width:50%;
		display:block;
		float:left;
	}
	#footer_nav a {
		width:100%;
		padding:10px 0 10px 20px;
		box-sizing:border-box;
		text-align:left;
		color:#ffffff;
		font-size:14px;
		display:block;
	}
	#copyrights {
		width:100%;
		background-color:#333333;
		padding:10px 0 10px 0;
		margin: 0 auto;
		color: #dedddd;
		font-size: 10px;
		text-align: center;
	}
}