@charset "utf-8";

.title {
  height: 310px;
  background-image: url(../images/sky/sky.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #707070;
  text-shadow: 1px 1px 30px #e2dddd
}

.title h1 {
  font-family: "Train One", system-ui;
  font-size: 32px;
}

.title p {
  font-size: 20px;
  margin-top: 15px;
}

.discography {
  font-size: 60px ;
  margin-bottom: 30px;
  padding-top: 60px;
  text-align: center;
  font-weight: bold;
}

.item-list {
  width: 930px;
  max-width: 90%;
  margin-top: 75px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit,240px);
  column-gap: 95px;
  row-gap: 70px;
  justify-content: center;
}

.item-list img {
  width: 250px;
  height: 250px;
}

.item-list dl {
  margin-top: 20px;

}

.item-list dt {
  font-size: 15px;
  font-family: "Yomogi", cursive;
  font-weight: normal;
  margin-bottom: 5px;
}

.item-list dd {
  font-size: 15px;
  font-family: "Yomogi", cursive;
  letter-spacing: 3px;
  margin-bottom: 15px;
}

.music-title {
  font-size: 18px;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: bold;
  letter-spacing: 3px;
  margin-bottom: 20px;
}

li .subsuku-icon {
display: flex;
/* align-items: center; */
}

.subsuku-icon img {
width: 45px;
height: 45px;
margin-right: 15px;
margin-top: 10px;
}

.footer {
  margin-top: 100px;
}

/* hover */

.sample1 {
	width:			250px;
	height:			250px;
	overflow:		hidden;
	position:		relative;	/* 相対位置指定 */
}
.sample1 .caption {
	font-size:		130%;
	text-align: 		center;
	padding-top:		15px;
  text-align: center;
	color:			#fff;
  font-family: "Zen Maru Gothic", sans-serif;
  white-space: nowrap;
}
.sample1 .mask {
	width:			100%;
	height:			20%;
	position:		absolute;	/* 絶対位置指定 */
	top:			-125px;
	left:			0;
	background-color:	rgba(0,0,0,0.4);	/* マスクは半透明 */
	-webkit-transition:	all 0.4s ease;
	transition:		all 0.4s ease;
}

.sample1 img {
  -webkit-transition:	all 0.4s ease;
	transition:		all 0.4s ease;
  -webkit-transition:	scale(1.2);
	transition: scale(1.2);
}

.sample1:hover .img {
  margin-top: 50px;
  -webkit-transition:	scale(1);
	transition:		scale(1);

}

.sample1:hover .mask {
top: 0px;
}