@charset "UTF-8";

/*-------------------------------------------*/
/*	トップページ　製品リスト
/*-------------------------------------------*/
.product-list-F {
	/*	max-width: 980px;*/
	clear: both;
	margin: 20px 0 0 0px;
}
.product-list-F ul {
	list-style-type: none;
  display:flex;
  flex-direction: row;
  flex-wrap:wrap;
  justify-content: space-around;
}
.product-list-F ul li {
  position: relative;
	/*display: block;
	float: left;*/
	text-align: left;
	/*margin: 0 10px 20px 10px;*//*width:33.3%;*/
  width:222px;
  margin:0 6px 20px;
}
.product-list-F ul li img {
  width:204px;
 }
/* RWD flex table時 ダミーを入れて左揃え */
.product-list-F li.pdl_dummy {
  width:220px;
}
.product-list-F ul li .flip {
  padding:0 8px 8px;
	box-sizing: border-box;
  border:1px solid #e5e5e5;
}
.product-list-F ul li .flipped {
  background:#fff;
  padding:0 8px 8px;
  position: absolute;
	top: 0;
	box-sizing: border-box;
  border:1px solid #e5e5e5;
}
.product-list-F ul li a:hover {
	text-decoration: none!important;
}
.product-list-F ul li p.title {
  /*color: #0070C0;*/
  color:#58585B;
  background:#fff;
	height: 22px;
	margin: 0;
	/*padding: 10px 20px;*/
  padding: 10px 12px;/* flipのpadding分引く事*/
	text-align: left;
  position: relative;
}
.product-list-F ul li p.title::before {
  content: "";
  display: block;
  width: 2px;
  height: 24px;
  /*background-color: #0070C0;*/
  background: #a6a6a6;
  position: absolute;
  /*left: 10px;*/
  left: 2px;/* flipのpadding分引く事*/
  top: 50%;
  margin-top: -12px;
}
.product-list-F ul li p.red {
	background: #C00000!important;
	color: #fff!important;
}

.product-list-F ul li p.line2 {
  font-size: .9rem;
  /*letter-spacing: -2px;*/
  line-height: 1.2;
  padding:10px 0 10px 20px!important;
}
.product-list-F ul li .flipped p.title i {
  position: absolute;
  top:4px;
  right:5px;
  font-size:2rem;
	vertical-align: middle;
}
body.products_appli .product-list-F ul li p.line2,
body.products .product-list-F ul li p.line2 {
  font-size: 0.78rem;
  letter-spacing: -2px;
  padding:14px 0 14px 0!important;
}
body.products_appli .product-list-F ul li .flipped p.title i,
body.products .product-list-F ul li .flipped p.title i {
  position: absolute;
  top:9px;
  right:5px;
  font-size:2rem;
	vertical-align: middle;
}
.product-list-F ul li .flipped p.intro {
  height:124px;/*w:220 h:154*/
  max-height:210px;
	margin: 0;
  padding:10px 10px;
  font-size:.92rem;
  line-height: 170%;
  background:#757170;
  color:#fff;
}


/* くるんと裏返る */
li.type2 {
	perspective: 700px;
}
li.type2 .flip,
li.type2 .flipped{
  cursor: pointer;
  transition: opacity .5s,transform .5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-backface-visibility: hidden;
	 -moz-backface-visibility: hidden;
	  backface-visibility: hidden;
}
li.type2:hover .flip{
  -webkit-transform: rotateX( 180deg );
   -moz-transform: rotateX( 180deg );
    -ms-transform: rotateX( 180deg );
     transform: rotateX( 180deg );
   -webkit-transform-origin: 50% 50%;
  opacity:0;
}
li.type2:not(:hover) .flipped{
  -webkit-transform: rotateX( -180deg );
   -moz-transform: rotateX( -180deg );
    -ms-transform: rotateX( -180deg );
     transform: rotateX(-180deg);
  -webkit-transform-origin: 50% 50%;
  opacity:0;
}

/* くるんと裏返る */
li.type4 {
	perspective: 700px;
}
li.type4 .flip,
li.type4 .flipped {
	transition: opacity .5s, transform .5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-backface-visibility: hidden;
	 -moz-backface-visibility: hidden;
	  backface-visibility: hidden;
}
li.type4:hover .flip {
  -webkit-transform: rotateY( 180deg );
   -moz-transform: rotateY( 180deg );
    -ms-transform: rotateY( 180deg );
     transform: rotateY(180deg);
  -webkit-transform-origin: 50% 50%;
  opacity:0;
}
li.type4:not(:hover) .flipped {
  -webkit-transform: rotateY( -180deg );
   -moz-transform: rotateY( -180deg );
    -ms-transform: rotateY( -180deg );
     transform: rotateY(-180deg);
  -webkit-transform-origin: 50% 50%;
  opacity:0;
}

.product-list-F ul li.dummy {
  width: 222px;
  /*background:#eee;*/
}


/* --  下記未使用  type1, type3 -------------------------- */
/* 下からニュッ */
li.type1 {
	overflow: hidden;
}
li.type1 .flipped {
	opacity: 0;
	transform: translateY(100%);
	transition: opacity .6s, transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
li.type1:hover .flipped {
  background: rgba(91,91,91,1);
	opacity: 1;
	transform: none;
}
/* 左右から背景が出てくる・・・現在はフェードみたいに見える */
li.type3 {
	overflow: hidden;
}
li.type3 .flipped {
	background: transparent;
}
li.type3 .flipped {
	position: relative;
	z-index: 1;
	transition: opacity .3s .3s;
}
li.type3:not(:hover) .flipped {
	opacity: 0;
	transition-delay: 0s;
}
li.type3 div.flipped::before,
li.type3 div.flipped::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	width: 50%;
	height: 100%;
  transition: opacity .3s, transform .3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
li.type3 div.flipped::before {
	left: 0;
}
li.type3 div.flipped::after {
	right: 0;
}
li.type3:not(:hover) div.flipped::before,
li.type3:not(:hover) div.flipped::after {
	opacity: 0;
	transition-duration: .6s;
}
li.type3:not(:hover) div.flipped::before {
	transform: translateX(-175px) skew(-30deg);
}
li.type3:not(:hover) div.flipped::after {
	transform: translateX(275px) skew(-30deg);
}
/* ------------------------------------- */