html{overflow-x: hidden;}
footer{padding-top:30px;}

/* PC環境
--------------------------------------------------*/
@media only screen and (min-width: 780px) {
.galllery{
  	width: auto !important;
  	height: auto !important;
  	display: inline-block;
  	vertical-align: top;
  	text-align: center;
  	overflow: auto;
  	border: 2px #000000 solid;
  	padding: 10;
  	background: #ffffff;
    margin-bottom: 2.5%;
  }
	.galllery img{
  	width:720px;
  	border: 1px solid #000000;
		margin:5px;
	}
}
@media only screen and (min-width: 1300px) {
#genre {
		margin-left: 30%;
		margin-right: 30%;
		margin-bottom: 2%;
		padding: 1px 5px;
		border-left: 5px solid #000;
		border-top:1px solid #CCC;
		border-right: 5px solid #000;
		border-bottom:1px solid #CCC;
	  background: #f4f4f4;
	}
}

/* スマホ・タブレット環境
--------------------------------------------------*/
@media screen and (max-width: 779px) {
.galllery{
  	width: auto !important;
  	height: auto !important;
  	display: inline-block;
  	vertical-align: top;
  	text-align: center;
  	overflow: auto;
  	border: 2px #000000 solid;
  	padding: 10;
  	background: #ffffff;
    margin-bottom: 2.5%;
  }
	.galllery img{
  	width: 250px;
  	border: 1px solid #000000;
		margin: 5px;
	}
}
@media screen and (max-width: 1299px) {
#genre {
		margin-bottom: 5%;
		padding: 1px 5px;
		border-left: 5px solid #000;
		border-top:1px solid #CCC;
		border-right: 5px solid #000;
		border-bottom:1px solid #CCC;
	  background: #f4f4f4;
	}
}

/*共通
--------------------------------------------------*/
#genre ul { padding:0px;}
#genre li {	display: inline; }
#genre li::before{content: "/";}
#genre li a {
	text-decoration: none;
	padding: 10px 15px;
	color: black;
	font-size: 15px;
	letter-spacing: 0.1em;
	-webkit-transition: all 0.2s
  }
#genre li a:hover {	color:green; }


article { vertical-align: top; }

article p {
  text-align: left;
	display: inline-block;
	margin: 5px;
	padding: 5px;
}

.text{ text-align: center;}