/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

*{
	font-family:Meiryo, "メイリオ", "ＭＳ Ｐゴシック", Verdana, Arial, Helvetica, Osaka, "ヒラギノ角ゴ Pro W3", sans-serif;
}

img {
    vertical-align: middle;
	border: 0;
}

button {
    outline: none;
}

body {
	text-align: center;
	position: relative;
	padding: 0px;
	margin: 0px;
	font-size:14px;
	color: #231815;
	min-width:980px;
	min-height:760px;
	background-color:#ffffff;
	-webkit-text-size-adjust: 100%;
	background-image: url(../images/back_1.jpg);
	background-position:top center;
	background-attachment: fixed;
}

a:link    {COLOR: #cbcbcb;  TEXT-DECORATION: none;}
a:visited {COLOR: #cbcbcb;  TEXT-DECORATION: none;}
a:hover   {COLOR: #FFF; TEXT-DECORATION: none;}
a:active  {COLOR: #FFF; TEXT-DECORATION: none;}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

div {
	font-size:16px;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

#test{
	z-index:10000;
	width:100%;
	position: fixed;
}

h1 {
    display: none;
}

h2 {
    display: none;
}


/* ==========================================================================
   ローディング
   ========================================================================== */


/*******************************
header
*******************************/

.header_hr{
border: 5px #000 solid;
background: #000;
margin: 0;
padding: 0

}


#header{
	overflow:hidden;
	width:100%;
	background:url(../images/nav_back.gif) no-repeat right bottom;
}

#header .header_inner{
	margin:0px auto;
	width:1000px;
	text-align:left;
	padding: 0px 0px; 
}


#header .header_inner .header_title{
	float: left;
	margin:25px 0px 0px 0px;
	padding: 0;
	
}

#header .header_inner .space{
	float: left;
	display:block;
	cursor:pointer;
	margin:0px 0px 0px 0px;
	padding: 0;
	width: 100px;
	height: 86px;
	background: #FFF;
}


#header .header_inner .header_nav{
	background:#757575 repeat;
	margin: 47px 0px 0px 0px;
	padding: 0px 0px 0px 10px;
	height:39px;
	float: left;
}


#header .header_inner .nav_home{
background: url(../images/nav_home.png) no-repeat; 
width: 80px;
height: 25px;
	margin: 6px 25px 0px 5px;
	padding: 0;
	padding:0px;
	display:block;
	float: left;
}

#header .header_inner .nav_home:hover{
background: url(../images/nav_home_on.png) no-repeat; 
width: 80px;
height: 25px;
	margin: 6px 25px 0px 5px;
	padding: 0;
	padding:0px;
	display:block;
	float: left;
}




#header .header_inner .nav_product{
background: url(../images/nav_product.png) no-repeat; 
width: 90px;
height: 25px;
	margin: 6px 25px 0px 0px;
	padding: 0;
	padding:0px;
	display:block;
	float: left;
}

#header .header_inner .nav_product:hover{
background: url(../images/nav_product_on.png) no-repeat; 
width: 90px;
height: 25px;
	margin: 6px 25px 0px 0px;
	padding: 0;
	padding:0px;
	display:block;
	float: left;
}


#header .header_inner .nav_news{
background: url(../images/nav_news.png) no-repeat; 
width: 73px;
height: 26px;
	margin: 6px 25px 0px 0px;
	padding: 0;
	padding:0px;
	display:block;
	float: left;
}

#header .header_inner .nav_news:hover{
background: url(../images/nav_news_on.png) no-repeat; 
width: 73px;
height: 26px;
	margin: 6px 25px 0px 0px;
	padding: 0;
	padding:0px;
	display:block;
	float: left;
}


#header .header_inner .nav_contact{
background: url(../images/nav_contact.png) no-repeat; 
width: 122px;
height: 26px;
	margin: 6px 0px 0px 0px;
	padding: 0;
	padding:0px;
	display:block;
	float: left;
}

#header .header_inner .nav_contact:hover{
background: url(../images/nav_contact_on.png) no-repeat; 
width: 122px;
height: 26px;
	margin: 6px 0px 0px 0px;
	padding: 0;
	padding:0px;
	display:block;
	float: left;
}


test{
	background: #CE2326;
	position: fixed;
}


/*******************************
news
*******************************/
#news{
	background: url(../images/news_bar.gif ) no-repeat left top;
	height: 28px;
	margin: 10px 0px 10px 0px;
	padding: 0;
}

#news .inner{
	width:1000px;
	margin: 0px auto;
	height: 28px;
}

#news .inner .news_button{
	float: left;
	height: 28px;
}


#news .inner .txt_area{
	float: left;
	text-align: left;
	width:750px;
	height: 28px;
	background:#000;
	color: #cbcbcb;
	font-size: 14px;
	line-height: 2.2em;
	padding: 0px 0px 0px 10px;
	position: relative;
	overflow: hidden;
}

#news .inner .txt_area p{
	position: absolute;
	margin: 0px 0px 0px 750px;
	padding: 0;
	width:750px;
}
/*
#news .txt_area p:nth-child(1){
	
	margin: 0px 0px 0px 0px;
}
*/

#news .inner .sns{
	padding: 0px;
	margin: 0px 0px 0px 0px;
	float: right;
}

/*******************************
pankuzu
*******************************/
#pankuzu{
list-style: none;
color: #cbcbcb;
margin: 0px auto 10px auto;
padding: 13px 0px 0px 0px;
width: 1000px;
}


#pankuzu li{
float: left;
font-size: 14px;
}


#pankuzu li:nth-child(even){
margin: 0px 20px;
}




/*******************************
#title
*******************************/

#title{
width: 100%;
background: hsla(0,0%,0%,0.45);
height: 60px;
color: yellow;
text-align: center;
line-height:1.5em ;
padding: 10px 0px 10px 0px ;
font-size: 24px;
margin: 0px 0px 20px 0px;
}





/*******************************
bottom_banner
*******************************/

#bottom_banner{
width: 1000px;
margin: 0px auto;
padding: 0;
}


#bottom_banner hr{
display: block;
height: 2px;
border: 0;
border-top: 3px solid #757575;
margin: 0px  0px  20px  0px;
padding: 0;
}


#bottom_banner a{
display:inline-block;
margin: 0px 10px 0px 0px;
}


#bottom_banner a:hover{
opacity: 0.5;
}

/*******************************
#footer
*******************************/
#footer{
	overflow:hidden;
	width:100%;
	background:#000 top center;
}

#footer .inner{
	width:1000px;
	font-size: 12px;
	margin: 0px auto;
	padding: 0px 0px 0px 0px;
}

#footer .inner .left{
	color: #999999;
	list-style: none;
	float: left;
	padding: 0;
	line-height: 2em;
	margin: 30px 0px 30px 0px;
	
}

#footer .inner .right{
	color: #999999;
	list-style: none;
	float: left;
	margin: 30px 0px 30px 50px;
	line-height: 2em;
	padding: 0;
}


#footer .inner .left li:nth-child(1) , #footer .inner .right li:nth-child(1){
	color: #ff8500;
	list-style: none;
}

#footer .inner .copy{
	float: right;
	color: #FFF;
	text-align: right;
	margin: 30px 0px 0px 0px;
}

#footer .inner small{
	display: block;
	margin: 15px 0px 0px 0px;
}

#footer hr{
margin: 0;
padding: 0;
}

#footer span{
margin: 0px auto;
text-align: center;
display: block;
padding: 10px 0px;
margin: 0;
color: #FFF;
font-size: 12px;

}



#products{
	list-style: none;
	margin: 0px 0px 0px 0px;
	padding: 0px;
}

#products li{
	display: inline-block;
	padding: 0px　0px　0px　0px;
	margin: 0px 2px 0px 0px;
	width:231px;
	height:320px;
	overflow:hidden;
	position:relative;
}



#products li .caption {
font-size:12px;
text-align: center;
padding:100px 0px 0px 0px ;
color:#fff;
margin: 0;
opacity: 1;
line-height: 1.5em;
}


#products li .caption hr{
width: 0px;
margin: 5px auto 5px auto;
}

#products li .caption .price{
font-weight: bold;
font-size: 14px;

}


#products li .mask {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
opacity:0;	/* マスクを表示しない */
background-color:rgba(0,0,0,0.4);	/* マスクは半透明 */
-webkit-transition:all 0.2s ease;
transition:all 0.2s ease;
margin:0;
padding:0;
}


#products li:hover .mask {
opacity:1;	/* マスクを表示する */
transform: scale(1.15,1.15);
        -webkit-transform:scale(1.15,1.15);
        -moz-transform:scale(1.15,1.15);
        -ms-transform:scale(1.15,1.15);
        -o-transform:scale(1.15,1.15);
}


#products li:hover .image{
transform: scale(1.10,1.10);
        -webkit-transform:scale(1.10,1.10);
        -moz-transform:scale(1.10,1.10);
        -ms-transform:scale(1.10,1.10);
        -o-transform:scale(1.10,1.10);
-webkit-transition:all 0.2s ease;
transition:all 0.2s ease;
}

#products .new{
background:url(../images/new.png) no-repeat;
width: 54px;
height: 53px;
position: absolute;
margin: 0px 0px 0px 180px;
}