/* スマホの場合 */
		@media screen and (max-width: 1024px) {
		    main h1 {
		        font-size: 35px;
		    }


		    main h2 {
		        font-size: 30px;
		    }

		    .reproduction {
		        width: 100%;
		        font-size: 0.8rem;
		        border: 1px solid #676767;
		        padding: 10px;
		        margin-bottom: 20px;
		    }

		    .reproduction img {
		        width: 100%;
		        height: auto;
		    }

		    main {
		        padding: 5%;
		    }
		}

		/* PCの場合 */
		@media screen and (min-width: 1025px) {
		    main h1 {
		        font-size: 40px;
		    }


		    main h2 {
		        font-size: 30px;
		    }

		    main {
		        margin-left: 10%;
		        margin-right: 10%;
		    }

		    .reproductions {
		        display: flex;
		        flex-wrap: wrap;
		        justify-content: space-between;
		    }

		    .reproduction {
		        width: 45%;
		        border: 1px solid #676767;
		        padding: 30px;
		        margin-bottom: 40px;

		    }


		    .reproduction h2 {
		        color: #676767;
		    }

		    .reproduction img {
		        width: 100%;
		        height: auto;
		    }
		}



		.reproduction a {
		    display: inline-block;
		    margin-top: 10px;
		    text-align: center;
		    padding: 20px 0;
		    color: #fff;
		    background-color: #676767;
		    border: 7px solid #313131;
		    width: 100%;
		}

		.reproduction>p {
		    height: 7em;
		}

		.reproduction a:hover {
		    color: #676767;
		    background: #ffffff;
		    border: 7px solid #313131;
		}