@charset "utf-8";
/* CSS Document */

/******************************/
/******************** スマホ小 **/
/******************************/
@media screen and (max-width:500px){

.contents{
	text-align:center;
	width: 290px;
	margin: 0 auto;
}

h2{
	margin:10px;
	font-size:1.2rem
	}
	
.contents-title{
	font-size:.8rem;
	margin-bottom:50px;
}

.hes-gallery {
	width:290px;
    display: grid;
    grid-template-columns: 1fr 1fr ;
    gap: 10px;
	margin:0 auto;
	margin-bottom: 50px;
}

.hes-gallery img{
	width:140px;
	height:140px;
	object-fit: cover;
}
	
.hes-gallery img:hover{
    opacity: 0.5;
}

.sub-title{
	font-size:.8rem;
	margin-bottom:20px;
}
}



/******************************/
/******************** スマホ大 **/
/******************************/
@media screen and (min-width:501px) and (max-width:768px){

.contents{
	text-align:center;
	width: 470px;
	margin: 0 auto;
}

h2{
	margin:10px;
	font-size:1.2rem
	}
	
.contents-title{
	font-size:.8rem;
	margin-bottom:50px;
}

.hes-gallery {
	width:470px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr ;
    gap: 10px;
	margin:0 auto;
	margin-bottom: 50px;
}

.hes-gallery img{
	width:150px;
	height:150px;
	object-fit: cover;
}
	
.hes-gallery img:hover{
    opacity: 0.5;
}
	
.sub-title{
	font-size:.8rem;
	margin-bottom:20px;
}
}

/******************************/
/******************** タブレット **/
/******************************/
@media only screen and (min-width:769px) and (max-width:1024px){

.contents{
	text-align:center;
	width: 670px;
	margin: 0 auto;
}

h2{
	margin:10px;
	font-size:1.2rem
	}
	
.contents-title{
	font-size:.8rem;
	margin-bottom:50px;
}

.hes-gallery {
	width:670px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr ;
    gap: 10px;
	margin:0 auto;
	margin-bottom: 50px;
}

.hes-gallery img{
	width:160px;
	height:160px;
	object-fit: cover;
}
	
.hes-gallery img:hover{
    opacity: 0.5;
}
	
.sub-title{
	font-size:.8rem;
	margin-bottom:20px;
}
}



/******************************/
/************************ PC **/
/******************************/
@media screen and (min-width:1025px){
  
.contents{
	text-align:center;
	margin: 0 auto;
	width:940px;
}

h2{
	margin:10px;
	font-size:1.2rem
	}
	
.contents-title{
	font-size:.8rem;
	margin-bottom:50px;
}

.hes-gallery {
	width:940px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr  1fr 1fr;
    gap: 10px;
	margin:0 auto;
	margin-bottom: 50px;
}

.hes-gallery img{
	width:180px;
	height:180px;
	object-fit: cover;
}

.hes-gallery img:hover{
    opacity: 0.5;
}
	
.sub-title{
	font-size:.8rem;
	margin-bottom:20px;
}
}