@charset "utf-8";


/*製品案内*/
.product {
	margin: 40px 0 30px 20px;
	padding: 0;
}
.product h2 {
	margin: 0 0 15px 0;
	font-size: 1.2rem;
}
.product p{
	margin: 0 0 15px 25px;
	padding: 0px;
}

.produc-contents{
	text-align: center;	/*センター寄せ用*/
}

.contents{
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	text-align: center;	/*センター寄せ用*/
	display: inline;
}

.contents li{
	margin: 0 10px;
	/*display: inline;*/	/*横並び*/
	display: inline-block;

}
.tooltip{
    position: relative;
    cursor: pointer;
    display:  inline-block;
}

.tooltip img{
	width: 100px;
	height 100px:

	border-radius: 20%;
	transition: all ease 1s;
}

.contents li a:hover img{
	filter:contrast(280%) ;	/*コントラスト*/	/*grayscale(90%)*/
}

.description {
    display: none;
    position: absolute;
    padding: 10px;
    font-size: 12px;
    line-height: 1.6em;
    color: #FFF;
    border-radius: 5px;
    background: #006400  ;
    width: 200px;
}

.description:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    border: 15px solid transparent;
    border-top: 15px solid #006400  ;
    margin-left: -15px;
}
.tooltip:hover .description{
    display: inline-block;
    top: -75px;
    left: -50px;
}

/*インフレーム作成*********************************/
.inlineframe{
	/*background-color: #FFF;*/
	background:rgba(255,255,255,0.6);
	height: 300px;

	overflow: auto;
	overflow-y: scroll;
	overflow-x: hidden;
	padding: 15px 10px 20px 20px;

	list-style: none;
}

.inlineframe li a{
	text-decoration: none;
	color: #336666;
	
	display: inline-block;
	transition: all .3s ease 0s;
}

.inlineframe li a:hover{
	color: #FF9900;
	cursor: pointer;
	transform: scale(1.1);
}

.inlin{
	padding: 3px 0px 3px 0px;
	font-weight: 800;
}

.inlinli{
	padding: 0px 0px 0px 20px;
}

div.inlinli:before {content:"≪ ";}

/**********************************/