@charset "UTF-8";
/* @import url("https://shopping.geocities.jp/kougurakuichi/product_page/css/○○○.css"); */
/* 関連商品ホバーエフェクト */
/*-------------------------------------*/

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

.div{
	position: relative;
	width: 100%;
	padding-top: 20.1%;
	margin-bottom: 3em;
  }
  .div-inner{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
  }

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

.DivLink{
    position:relative;
    width: 100%;
    height: 100%;
}

.DivLink .Link{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

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

.cover2{
	background-image: url(../img/pp_button_related_nomal.svg);
	background-size: cover;
	background-repeat: no-repeat;
	background-size: 100% auto;
	cursor: grab;
	width: 100%;
	max-width: 946px;
	max-height: 190px;
	aspect-ratio: 946 / 190;
	border: 0;
	border-radius: 8px;
	box-shadow: 0 6px 0 hsl(200deg 37% 50%), 0 12px 0 rgba(0,0,0,.2);
	transition: color .3s, background .3s, box-shadow .3s, transform 0.3s;
}
.cover2:hover{
	background-image: url(../img/pp_button_related_hover.svg);
	background-size:cover;
	background-repeat: no-repeat;
	background-size: 100% auto;
	cursor: grab;
	width: 100%;
	max-width: 946px;
	max-height: 190px;
	aspect-ratio: 946 / 190;
	box-shadow: 0 3px 0 hsl(200deg 47% 60%), 0 6px 0 rgba(0,0,0,.2);
	transform: translateY(3px);
	transition-duration: .3s;
}

.cover2:active{
	background-image: url(../img/pp_button_related_hover.svg);
	background-size:cover;
	background-repeat: no-repeat;
	background-size: 100% auto;
	cursor: grabbing;
	width: 100%;
	max-width: 946px;
	max-height: 190px;
	aspect-ratio: 946 / 190;
	box-shadow: 0 0 0 hsl(200deg 37% 50%), 0 0 0 rgba(0,0,0,.2);
	transform: translateY(6px);
	transition-duration: .1s;
}

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