@charset "utf-8";
/* CSS Document */
.img_wrap{
  margin: 5% auto 0;
  transition-duration: 0.5s;
}
.img_wrap img{
  width: 100%;
  cursor: pointer;
}
.img_wrap:hover{
  box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
  transform: translateY(-5%);
  transition-duration: 0.5s;
  /*border-radius: 7%;*/
}


/*-------------------------------------------------------------------*/

.sample2 {
	overflow:		hidden;
	position:		relative;
}
.sample2 .caption {
	font-size:		0.9rem;
  padding: 0 3%;
  line-height: 1.7;
	color:			#fff;
}
.sample2 .mask {
	width:			100%;
	height:			100%;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(0,0,0,0.4);
	-webkit-transition:	all 0.8s ease;
	transition:		all 0.8s ease;
    overflow-y: auto;
}
.sample2:hover .mask {
	opacity:		1;	/* マスクを表示する */
	padding-top:		3%;	/* ホバーで下にずらす */
}

.btn--hover{
  display: block;
  }
.btn--hover:hover {
	background: #f00;
}

/*-------------------------------------------------------------------*/

/* PC用 */
@media screen and (min-width: 600px) {
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #D6EEFB;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb {
  background: #00A0E9;
  border-radius: 5px;
}
html {
  scrollbar-width: thin;
  scrollbar-color: #00A0E9 #D6EEFB;
  border-radius: 5px;
}
.img_wrap{
  margin: 5% auto 0;
  transition-duration: 0.5s;
}
.img_wrap img{
  width: 100%;
  cursor: pointer;
}
.img_wrap:hover{
  box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
  transform: translateY(-5%);
  transition-duration: 0.5s;
  /*border-radius: 7%;*/
}

/*-------------------------------------------------------------------*/

.sample2 {
	overflow:		hidden;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2);
	position:		relative;
    border-radius: 5px; 
}
.sample2 .caption {
	font-size:		0.9rem;
  padding: 0 3%;
  line-height: 1.7;
  color:			#fff;
}
.sample2 .mask {
	width:			100%;
	height:			100%;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(0,0,0,0.4);
	-webkit-transition:	all 0.8s ease;
	transition:		all 0.8s ease;
    overflow-y: auto;
}
.sample2:hover .mask {
	opacity:		1;	/* マスクを表示する */
	padding-top:	%;	/* ホバーで下にずらす */
}

.btn--hover{
  display: block;
  }
.btn--hover:hover {
	background: #f00;
}

/*-------------------------------------------------------------------*/

}


/*-------------------------------------------------------------------*/