@charset "utf-8";
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);



/*PC*/
@media print,
screen and (min-width: 768px) {


	.music {
		margin-top: 0px;
	}

	/*footer*/
	.pagetop {
		background: #fff;
		padding: 60px 0 0;
		line-height: 0;
		margin: -1px auto;
		text-align: center;
	}

	.pagetop a:hover {
		opacity: 1.0;
	}

	.pagetop a:hover img {
		filter: brightness(110%);
	}

	/*archive*/
	ul.archive1002 {
		width: 960px;
		margin: 0 auto;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}

	ul.archive1002 li {
		width: 310px;
		margin-top: 20px;
		text-align: center;
		font-size: 14px;
		text-decoration: none;
		line-height: 1.6;
	}

	ul.archive1002 li img {
		width: 312px;
	}

	ul.archive1002 li a {
		color: #000;
		font-weight: 700;
		text-decoration: none;
	}

	ul.archive1002 li a:hover {
		opacity: 0.8;
	}

}

/* RESPONSIVE TABLET---------------------------------------------------- */

@media screen and (min-width: 768px) and (max-width: 939px) {

	.music {
		margin-top: 0px;
	}

	ul.archive1002 {
		width: 90%;
		margin: 0 auto;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}

	ul.archive1002 li {
		width: 30%;
		margin-top: 20px;
		text-align: center;
		font-size: 14px;
		text-decoration: none;
		line-height: 1.6;
	}

	ul.archive1002 li img {
		width: 100%;
	}


}

/*SP*/
@media screen and (max-width: 767px) {


	.music {
		margin-top: 0px;
	}

	.pagetop {
		padding: 40px 0 0;
		line-height: 0;
		text-align: center;
		background: #fff;
	}

	.pagetop img {
		width: 30%;
	}


	/*archive*/
	ul.archive1002 {
		width: 90%;
		margin: 0 auto;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}

	ul.archive1002 li {
		width: 48%;
		margin-top: 10px;
		display: table-cell;
		text-align: center;
		font-size: 14px;
		text-decoration: none;
		line-height: 1.6;
	}

	ul.archive1002 li a {
		color: #000;
		font-weight: 700;
		text-decoration: none;
	}

	ul.archive1002 li a:hover {
		opacity: 0.8;
	}

}