@charset "utf-8";

/* ベース　～767px
-------------------------------------------------------------------------------------------*/	
.pc {display: none;}
.sp {display: block;}

#contents-products-01{
	margin: 100px auto 0 ; 
}
#contents-products-01:after{
	content:"";
	display: block;
	clear:both;
}
#swf-container{
	margin: 30px auto;

	
}
#products-contents{
	padding:40px 0;
	/*background: repeating-linear-gradient(45deg, #777, #777 10px, #999 0, #999 20px);*/
	
}
.products-swf{
	max-width:470px;
	margin: 100px auto 100px ; 
}


/* ヘッダー
-----------------------------------------------------------*/	

.top-pic {
	text-align: center;
}
.top-pic img {
	max-width: 100%;
	height: auto;
}
/* コンテンツ
-----------------------------------------------------------*/	
.img-side {
	margin-bottom: 40px;
}
.img-side img {
	width: 100%;
	height: auto;
	
}
.txt-side{
		padding: 0 20px;
}
.txt-side p {
	margin-bottom: 20px;
}
.nozen-name {
	text-align: right;
}
.products-cp{
	color:#444;
}
/*画像のマウスオーバー設定*/ 

img {
    height: auto;
    -webkit-transition:all 0.25s ease-in-out;
    transition:all 0.25s ease-in-out;
    width: 100%;
    vertical-align:bottom;
}
 
figure {
    margin: 0;
    overflow: hidden;
    position: relative;
    text-align: center;
}
 
figcaption {
    background-color: rgba(0,0,0,0.4);
    color: #FFF;
    opacity: 0;
    font-size: 20px;
    font-size: 0.8rem;
    position: absolute;
    text-align: center;
    -webkit-transition:all 0.25s ease-in-out;
        transition:all 0.25s ease-in-out;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    padding-top:22%;
}
 
 a:hover>figure img {
        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);
}
 
 a:hover>figure figcaption {
    opacity: 1;
}

figure img {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
figure:hover img {
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
}

/* 768px～960px
-------------------------------------------------------------------------------------------*/	
@media only screen and (min-width: 768px) {
	
.pc {display: block;}
.sp {display: none;}

/* ヘッダー
-----------------------------------------------------------*/	

.top-pic img {
	min-width: 600px;
	height: auto;
}
/* コンテンツ
-----------------------------------------------------------*/	
.page-cp{
margin: 50px 0 ;	
}
#about-contents {
	width: 750px;
	margin: 0 auto 100px;
}
.ttl {
	padding-bottom: 15px;
	font-size: 21px;
}
.img-side {
	float: left;
	width: 400px;
	margin-left:0px;
}
.txt-side {
	float: right;
	width: 310px;
	margin-right:0px;
	padding: 0px 0px 0 0 ;
	
}
.txt-side p {
	margin-bottom: 30px;
		padding: 0 ;
}
	.nozen-name {
	display:block;
	text-align: right;
	margin-right: 10px ;
}
	figcaption {
    padding-top:15%;
}
}

/* 961px～ 
-------------------------------------------------------------------------------------------*/	
@media only screen and (min-width: 961px) {
	
.pc {display: block;}
.sp {display: none;}

/* ヘッダー
-----------------------------------------------------------*/		
.top-pic img {
	min-width: 600px;
	height: auto;
}
/* コンテンツ
-----------------------------------------------------------*/	
.page-cp{
	margin: 80px 0 ;	
}
#about-contents {
	width: 1000px;
	margin: 0 auto 100px;
	padding: 0 0;
}
.ttl {
	margin-bottom: 0px;
	padding-bottom: 15px;
	font-size: 21px;
}
.img-side {
	float: left;
	width: 500px;
	margin:0 0 0 15px;
}
.txt-side {
	float: right;
	width: 400px;
	margin: 0 10px 0 0;

}
.txt-side p {
	margin-bottom: 30px;
		padding: 0 0px;
}
}