@charset "utf-8";

/* ========================================
* File Name: common.css
* Created Date: 2017.4.1
* Author: Janime.com
======================================== */

/* ========================================
	common
======================================== */
html, body, div, h1, h2, h3, h4, h5,
p, address, figure,
ul, ol, li, dl, dt, dd,
table, th, td,
section, nav, article, aside, header, footer {
	margin: 0;
	padding: 0;
	font-size: 100%;
}
section, nav, article, aside, figure, header, footer {
	display: block;
}
img {
	border: none;
	vertical-align: top;
}
ul li, ol li {
	list-style: none;
}

/* a:link,
a:visited {
	text-decoration: none;
}
a:hover,
a:active {
	text-decoration: underline;
}
*/

/* clearfix */
.clearfix {
	zoom: 1;
}
.clearfix:before, .clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {
	clear: both;
}

/* margin */
.mb0 {
	margin-bottom: 0 !important;
}

/* ========================================
	base
======================================== */
html {
	font-family:"Hiragino Kaku Gothic Pro",Meiryo,Osaka,"MS PGothic",sans-serif;
	color: #000;
	font-size: 100%;

/*	-webkit-text-size-adjust: none;
	letter-spacing: -0.5px;
	font-size: 62.5%;
*/
}
body {
	width: 100%;
	min-width: 320px;
	margin:0;
	background-color:#000000;
}

/* ========================================
	gHeader
======================================== */
#gHeader {
	width:850px;
	display:block;
	margin:0 auto;
/*	background: url("/images/head.jpg") ;*/
	padding:0
	background-color:#ff0000;
}

#headtop {
	height:630px;
	}

ul#hrobo li { 
	width:212px;
	height:404px;
	float:left;
	margin-left:0px;
	margin-top:0px;
	 }

ul#hrobo li a {
	display:block;
	width: 212px;
	overflow:hidden;
	padding-top:404px;
	height:0px !important;
	height /**/:404px;/* for IE5 Win*/
	}

ul#hrobo li#robo_01 a { background:url(/images/head_01.png) no-repeat; }
ul#hrobo li#robo_02 a { background:url(/images/head_02.png) no-repeat; }
ul#hrobo li#robo_03 a { background:url(/images/head_03.png) no-repeat; }
ul#hrobo li#robo_04 a { background:url(/images/head_04.png) no-repeat;  }

ul#hrobo li#robo_01 a:hover { background:url(/images/head_01a.png) no-repeat; }
ul#hrobo li#robo_02 a:hover { background:url(/images/head_02a.png) no-repeat; }
ul#hrobo li#robo_03 a:hover { background:url(/images/head_03a.png) no-repeat; }
ul#hrobo li#robo_04 a:hover { background:url(/images/head_04a.png) no-repeat; }


@media screen and (max-width: 640px) {
#headtop {
	height:auto;
	}

#hrobos {
	width:100%;
	height:180px;
	background: url("/images/sp_head.jpg") no-repeat;
	background-size:contain;
	background-position:center;
	background-position:center middle;
	}

ul#hrobo {
	display:none;
	 }
}

/*-------------------------------------------------------
���j���[
--------------------------------------------------------*/
#Navi{
	height: 40px;
/*	background: url("/osouji/images/top_menuback.jpg") ;
	background-repeat: no-repeat;*/
	}

ul#menu li { 
	width:169px;
	height:40px;
	float:left;
	margin-left:0px;
	margin-top:0px;
	 }

ul#menu li a {
	display:block;
	width: 169px;
	overflow:hidden;
	padding-top:40px;
	height:0px !important;
	height /**/:40px;/* for IE5 Win*/
	}

ul#menu li#navi_01 a { background:url(/images/menu_01.png) no-repeat; }
ul#menu li#navi_02 a { background:url(/images/menu_02.png) no-repeat; }
ul#menu li#navi_03 a { background:url(/images/menu_03.png) no-repeat; }
ul#menu li#navi_04 a { background:url(/images/menu_04.png) no-repeat;  }
ul#menu li#navi_05 a { background:url(/images/menu_05.png) no-repeat;  }

ul#menu li#navi_01 a:hover { background:url(/images/menu_01a.png) no-repeat; }
ul#menu li#navi_02 a:hover { background:url(/images/menu_02a.png) no-repeat; }
ul#menu li#navi_03 a:hover { background:url(/images/menu_03a.png) no-repeat; }
ul#menu li#navi_04 a:hover { background:url(/images/menu_04a.png) no-repeat; }
ul#menu li#navi_05 a:hover { background:url(/images/menu_05a.png) no-repeat; }


.slicknav_menu {
 display:none;
}
 
/*Media Queries*/
@media screen and (max-width: 640px) {
 .js #menu {
 display:none;
 }
 .js .slicknav_menu {
 display:block;
 }
}



/* sp ======================================== */
@media screen and (max-width:640px) {

#gHeader {
	width:100%;
	height: auto;
	}


#Navi{
	display:none;
	}
img {width:100%; height:auto;}

}

/* ========================================
	main-contents
======================================== */
#main-contents {
	width:850px;
	display:block;
	margin:0 auto;
	background-color:#000000;
	}


#center_box {
	text-align:center;
	}


.info-ttl {
	margin-left:5px;
	text-align:left;
	color:#FEEB3D;
	font-weight:bold;
	text-shadow: 1px 1px 0px #A09101,
    -1px 1px 0px #A09101,
    1px -1px 0px #A09101,
    -1px -1px 0px #A09101;
	}

/* INFO --------------------------------------*/

#info {
	text-align:left;
	width:826px;
	height:auto;
	display:block;
	margin:0 auto;
	border:dashed 1px #ffffff;
	padding:10px;
	color:#ffffff;
	}


#info a {
	color:#FFFF1A;
	text-decoration: none;
	}
#info a:link, {
	color:#FFFF1A;
	text-decoration: none;
	}
#info a:visited {
	color:#EEEE00;
	text-decoration: none;
	}
#info a:hover{
	color:#EEEE00;
	text-decoration: underline;
	}
#info a:active {
	color:#FF8040;
	text-decoration: underline;
}

/* TOPIX --------------------------------------*/

#topix {
	width:850px;
	height:530px;
	color:#ffffff;
	text-align:left;
	margin-bottom:0px;
	margin-left:5px;
	}

#topix li {
	float:left;
	width:270px;
	height:260px;
	margin-right:10px;
	margin-bottom:10px;
	font-size:80%;
	border:solid 1px #EE0000;
	background-color:#3F3F3F;
	}
	
#topix li img{
	width:100%;
	height:auto;
	}

.toptxt {
	width:95%;
	padding:5px;
	}

/*#topix li:first-child {
	float:left;
	width:280px;
	height:auto;
	margin-left:0;
	}
*/





#topix a {
	color:#FFFF1A;
	text-decoration: none;
	}
#topix a:link, {
	color:#FFFF1A;
	text-decoration: none;
	}
#topix a:visited {
	color:#EEEE00;
	text-decoration: none;
	}
#topix a:hover{
	color:#EEEE00;
	text-decoration: underline;
	}
#topix a:active {
	color:#FF8040;
	text-decoration: underline;
}



.mrobot {
	width:850px;
	height:400px;
	display:block;
	margin:0 auto;
	background-color:#000000;
	margin-top:5px;
	margin-bottom:10px;
	}

.chuui {font-size:90%; margin-top:10px;}

.sakujou {
	position:relative;
	top:-60px;
	display:block;
	width:100%;
	height:0;
	margin:0 auto;
	text-align:right;
/*	border:solid 1px #ffffff;*/
	}

.sakujou img {margin-right:30px;}


/* sp ======================================== */
@media screen and (max-width:640px) {

#main-contents {
	width:100%;
	height: auto;
	}

#info {
	width:90%;
	height:auto;
	}


.mrobot{
	width:100%;
	height:auto;
	}

.mrobot img{
	width:100%;
	height:auto;
	}

.sakujou {
	top:-30px;
	}

.sakujou img {margin-right:10px;}

.sakujou img {width:120px; height:auto; }



#topix {
	width:100%;
	height:auto;
	margin-left:0;
	margin-bottom:5px;
	}

#topix li {
	float:none;
	width:90%;
	height:auto;
	display:block;
	margin:0 auto;
	margin-bottom:10px;
	}
/*#topix li:first-child {
	float:none;
	width:90%;
	display:block;
	margin:0 auto;
	margin-bottom:5px;
	}
*/
img .topthums{
	width:100%;
	height:auto;
	}

}


/* ========================================
	gFooter
======================================== */
#gFooter {
		width:850px;
		display:block;
		margin:0 auto;
		height:120px;
		color:#ffffff;
		background-color:#000000;
	}

#gFooter .inner {
	width:890px;
	margin:0 auto;
	padding-top: 25px;
	text-align:center;
}

#gFooter a:link,
#gFooter a:visited {
	text-decoration: none;
	color:#ffffff;
}
#gFooter a:hover,
#gFooter a:active {
	text-decoration: underline;
}

#gFooter ul li {
	display:inline;
	font-size: 12px;
}
#gFooter ul li a {
	padding:0 8px;
	border-right:solid 1px #8A6F6D;
	color:silver;
}
#gFooter ul li:first-child a {
	padding:0 8px 0 0;
}
#gFooter ul li:last-child a {
	border-right:0;
	padding:0 0 0 8px;
}
#gFooter .copy {
	margin-top:10px;
}


/* sp ======================================== */
@media screen and (max-width:640px) {

#gFooter {
	width:100%;
	height: auto;
	}

#gFooter {
	width: auto;
}
#gFooter .inner {
	width: auto;
	padding:15px 35px 0;
}
#gFooter ul {
	width: auto;
}
#gFooter ul li a {
	padding:0 4px;
}
#gFooter ul li:first-child a {
	padding:0 4px 0 0;
}
#gFooter ul li:last-child a {
	border-right:0;
	padding:0 0 0 4px;
}


}