@charset "UTF-8";
/* CSS Document */

/* https://www.nxworld.net/css-image-hover-effects.html */

.hover-effect {
	transition-duration:0.25s;
}

.hover-effect:hover {
	transition-duration:0.25s;
	filter: drop-shadow(3px 3px 3px rgba(51,51,51,0.35));
}













a.img-design02 {
	position:relative;
	display: inline-block;
	border:4px solid rgba(0,158,220,1.00);
}
a.img-design02::before /* div.image*/ {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: '';
	background-color: #000;
	opacity: 60%; /* 60% 透明にする */
	transition-duration:0.25s;
}

	a.img-design02:hover/* div.image*/ {
			color:rgba(0,0,0,1.00);
			text-shadow: 0px 0px 4px rgba(0,0,0,1.00);
	}

	a.img-design02:hover::before /* div.image*/ {
		background-color: transparent;
		opacity: 100%;
		transition-duration:0.25s;
			/* 
			color:rgba(0,0,0,1.00);
			text-shadow: 2px 2px 0 rgba(0,0,0,1.00);
			*/
	}
	
a.img-design02 figcaption {
	margin: 0;
	width: 100%;
	text-align: center;
	position: absolute;
	top: 50%; /* 文字の場所 */
	left: 50%; /* 文字の場所 */
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	font-size: 120%; /* 文字のサイズ */
	line-height:110%;
	background: url() center no-repeat; /* 画像URL */
	background-size: cover;
	-webkit-background-clip: text;
	color: #ffffff ; /*transparent*/
	transition-duration:0.25s;
	background-color:transparent;
}

body.skk-recruit-top a.img-design02{	font-size: 120%; /* 文字のサイズ */}

a.img-design02 figcaption span {
	display:block;
	font-size: 65%; /* 文字のサイズ */
}





















.rebbon-effect {
    position: relative;
    overflow: hidden;
    padding: 2px;
}

.rebbon-effect:before{
    position: absolute;
    content: "";
    width: 100px;
    height: auto;
    top: 5px;
    left: -35px;
    box-shadow: 0 2px 4px rgba(192,18,19, 0.4);
    transform: rotate(-30deg);
    z-index: 1;
}

.rebbon-effect:after{
    position: absolute;
    content: "";
    width: 100px;
    height: auto;
    bottom: 5px;
    right: -35px;
    box-shadow: 0 2px 4px rgba(192,18,19, 0.4);
    transform: rotate(-30deg);
    z-index: 2;
}








/* Flashing */
figure.flashing:hover img {
  opacity: 1;
  -webkit-animation: flash 1.5s;
  animation: flash 1.5s;
}
@-webkit-keyframes flash {
  0% {
    opacity: .4;
  }
  100% {
    opacity: 1;
  }
}
@keyframes flash {
  0% {
    opacity: .4;
  }
  100% {
    opacity: 1;
  }
}

/* Shine */
figure.shine {
  position: relative;
}
figure.shine::before {
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 2;
  display: block;
  content: '';
  width: 50%;
  height: 100%;
  background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
  -webkit-transform: skewX(-25deg);
  transform: skewX(-25deg);
}
figure.shine:hover::before {
  -webkit-animation: shine .75s;
  animation: shine .75s;
}
@-webkit-keyframes shine {
  100% {
    left: 125%;
  }
}
@keyframes shine {
  100% {
    left: 125%;
  }
}