@charset "utf-8";


#mainvisual{width:980px; height: 400px; margin:0 auto;position: relative;
margin-bottom: 25px;
}

.bx-prev,.bx-next{display: block; width: 32px; height: 32px; position: absolute; left:16px; top:50%;z-index: 100;margin-top: -16px;background: url(mainvisual/goleft.png);overflow: hidden; text-indent: 100px;white-space:nowrap;}

.bx-next{right:16px;left:auto;background:url(mainvisual/goright.png);}




#main{
width: 900px;
margin: 0 auto;
}
.colbox:after{
content: '　';
display: block;
height: 0;
overflow: hidden;
clear:  both;
}

#index-catchcopy{
text-align: center;
margin-bottom: 20px;
}
#index-catchcopy p{
color: #333;
font-size: 0.875em;
line-height: 1.4;
}

#index-products{
margin-bottom: 30px;
/*
border: 1px solid #aaa;
border-width: 1px 0;
background: #fff;
width: 940px;
*/
padding: 15px 0 30px 40px;
margin-left: -40px;
/*box-shadow: 0 0 10px 0 #aaa inset;*/
background: url(index/index-products-banner-bottom.png) bottom right no-repeat;
}
#index-products p{
float: left;
margin-left: 30px;
/*box-shadow: 0 0 10px 0 #ccc;*/
}
#index-products p:first-child{
margin-left:0;
}


#index-topicsarea{
margin-bottom: 15px;
}


#index-information{
width: 480px;
float: left;
}


#index-information2{
width: 450px;
float: left;
outline: 1px solid #ccc;
padding: 15px 15px 12px;
}
#index-information2 #index-information2-heading{
margin-bottom: 15px;
}
#index-information2 ul li a{
color: #333;
text-decoration: none;
display: block;
border-top: 1px solid #ccc;
padding: 18px 5px 14px;
line-height: 1.4;
}
#index-information2 ul li a:after{
content: '　';
display: block;
height: 0;
overflow:hidden;
clear: both;
}

#index-information2 ul li .date{
font-size: 0.6875em;
background: url(index/index-information-arrow.png) no-repeat right center;
display: block;
width: 100px;
float: left;
}
#index-information2 ul li .title{
font-size: 0.75em;
display: block;
width: 325px;
float: right;
}




#index-banner{
width: 380px;
float: right;
}
#index-banner p{
margin-bottom: 20px;
}

#index-bottombanner{
}
#index-bottombanner p{
float: left;
margin-left: 15px;
}
#index-bottombanner p:first-child{
margin-left:0;
}




/*===============================================*/


@media screen and (max-width: 770px){


#main{
width: auto;
padding: 0;
float: none;
}

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

#index-catchcopy{
margin-left: 20px;
margin-right: 20px;
}

#index-information2{
float: none;
width: auto;
margin: 0 auto;
margin-bottom: 30px;
padding-bottom: 5px;
outline: none;
}
#index-information2-heading{
/*text-align: center;*/
}
#index-information2 ul li a{
padding: 12px 0 12px;
}
#index-information2 ul li .date{
float: none;
margin-bottom: 5px;
width: auto;
}
#index-information2 ul li .title{
float: none;
width: auto;
}


#index-banner{
float: none;
width: auto;
margin: 0 auto;
text-align: center;
}


#index-bottombanner{
text-align: center;
}
#index-bottombanner p{
float: none;
margin: 0 0 10px 0;
}








}


@media screen and (min-width: 480px) and (max-width: 770px){



#index-products{
outline: 1px solid #ccc;
/*width: 320px;
max-width: 95%;*/
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 15px 0 5px;
}
#index-products p{
/*float: none;*/
margin:0;
margin-bottom: 10px;
width: 33.3%;
text-align: center;
}
#index-products p img{
max-width: 95%;
}




}





@media screen and (min-width: 1px) and (max-width: 479px){



#index-products{
outline: 1px solid #ccc;
width: 320px;
max-width: 95%;
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 15px 0 5px;
}
#index-products p{
float: none;
margin:0;
margin-bottom: 10px;
}




}