@charset "utf-8";

.pic {
	width:100%;
    max-height: 200px;
    position: relative;
    overflow: hidden;
    display: inline-block;
	@include backface-visibility(hidden);	
}

.pic-3d {
	@include perspective(500);
	@include transform-style(preserve-3d);
}

.pic-caption {
	//cursor: default;
	position: absolute;
	width: 100%;
	height: 100%;
	@include opacity(0);
	
	/* マウスオーバー時に出てくる背景の装飾 */
	background: rgba(0,0,0,.7);
	padding: 30px;
	/* マウスオーバー時に出てくるテキストの装飾 */
	p{
		color:#fff;
		text-shadow:1px 1px 1px rgba(0,0,0,.2);
		text-align: left;
	}
}

.pic-image {
	@include scale(1.1);
}

.pic:hover .pic-image {
	@include scale(1.1);
}


a,
a:hover,
.pic .pic-image,
.pic-caption,
.pic:hover .pic-caption,
.pic:hover img {
	@include transition(all 0.5s ease);
}

.pic:hover .bottom-to-top,
.pic:hover .top-to-bottom,
.pic:hover .left-to-right,
.pic:hover .right-to-left,
.pic:hover .rotate-in,
.pic:hover .rotate-out,
.pic:hover .open-up,
.pic:hover .open-down,
.pic:hover .open-left,
.pic:hover .open-right,
.pic:hover .come-left,
.pic:hover .come-right {
    @include opacity(1);
	-webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -moz-touch-callout: none;
    -o-touch-callout: none;
    -ms-touch-callout: none;
    touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -moz-tap-highlight-color: transparent;
    -o-tap-highlight-color: transparent;
    -ms-tap-highlight-color: transparent;
    tap-highlight-color: transparent
}

.bottom-to-top {
    top: 50%;
    left: 0
}

.pic:hover .bottom-to-top {
    top: 0;
    left: 0
}

.top-to-bottom {
    bottom: 50%;
    left: 0
}

.pic:hover .top-to-bottom {
    left: 0;
    bottom: 0
}

.left-to-right {
    top: 0;
    right: 50%
}

.pic:hover .left-to-right {
    right: 0;
    top: 0
}

.right-to-left {
    top: 0;
    left: 50%
}

.pic:hover .right-to-left {
    left: 0;
    top: 0
}

.rotate-in {
	@include rotate(90deg);
	@include scale(.1);
    top: 0;
    left: 0
}

.pic:hover .rotate-in {
	@include scale(1);
}

.rotate-out {
	@include rotate(90deg);
	@include scale(3);
	top: 0;
	left: 0
}

.pic:hover .rotate-out {
	@include rotate(360deg);
	@include scale(1);
}

.open-down {
	@include rotateX(-180deg);
	top: 0;
	left: 0
}

.pic:hover .open-down {
	@include rotateX(0);
}

.open-up {
	@include rotateX(180deg);
	top: 0;
	left: 0
}

.pic:hover .open-up {
	@include rotateX(0);
}

.open-left {
	@include rotateY(180deg);
	left: 0;
	top: 0
}

.pic:hover .open-left {
	@include rotateY(0deg);
}

.open-right {
	@include rotateY(-180deg);
	left: 0;
	top: 0
}

.pic:hover .open-right {
	@include rotateY(0deg);
}

.come-left {
	@include rotateY(90deg);
	@include rotateX(90deg);
	left: 0;
	top: 0
}

.pic:hover .come-left {
	@include rotateY(0deg);
	@include rotateX(0deg);
}

.come-right {
	@include rotateY(-90deg);
	@include rotateX(-90deg);
	left: 0;
	top: 0
}

.pic:hover .come-right {
	@include rotateY(0);
	@include rotateX(0);
}