@charset "UTF-8";

/*-------------------------------------------*/
/*	カテゴリページ用 サムネイル フリップスタイル
/*-------------------------------------------*/


 ul.pd-list li .flipped {
  position: absolute;
	top: 0;
	width:100%;
	height: 100%;
	box-sizing: border-box;
  border:1px solid #CCC;
	background:#EEEEEE;
	color:#111;
}
ul.pd-list li .flipped p.flipped-text {
	line-height: 1.5;
	font-weight: normal;
	font-size: .9rem;
	text-align: left;
	color:#111;
	padding:0.2rem  0.3rem;
}
ul.pd-list li .flipped p.readmore {
	position: absolute;
	bottom: 4px;
	right:4px;
	background:#2E75B5;
	color:#fff;
	padding:6px 5px 5px ;
	line-height: 1.0;
	font-size:.6rem;
}



	




/* くるんと裏返る */
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;
}