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

#topImg{
width: 100%;
position: relative;
}
#topImg p{
position: absolute;
top: 50%;
left: 50%;
}

h2{
}

#about{
color: #ddd;
background: #158fa6;
padding: 20px 0;
}
#about div{
padding: 40px 0 110px;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
background: url(../images/about.png) no-repeat;
background-position: bottom;
background-size: 200px;
}
#about h2{
font-size: 2.4em;
font-family: 'Gamja Flower', cursive;
}
#about p{
line-height: 200%;
font-size: 13px;
}

#news{
margin: 0 auto;
}
#news h2{
color: #158fa6;
padding-left: 84px;
background: url(../images/border.gif) no-repeat left center;
background-size: 80px;
margin-bottom: 30px;
}
#news li img{
object-fit: cover;
}
#news li div{
background: #fff;
}
#news p:after {
content: "."; 
display: block;
clear: both;
height: 0;
visibility: hidden;
}
#news p time{
color: #999;
}
#news p span{
font-size: 0.8em;
float: right;
color: #fff;
padding: 2px 6px 0;
background: #158fa6;
}
.hvr-link{
display: block;
margin: 0 auto;
text-align: center;
background: #158fa6;
color: #fff;
padding: 14px 0;
}



/*横幅480px以下*/
@media screen and (max-width:480px){
#topImg{
height: 300px;
}
#about p{
width: 90%;
}
#news{
width: 90%;
}
#news li a img{
height: 100px;
}
#news li a div{
height: 80px;
padding: 10px 2.5%;
}#news h3{
margin-top: 6px;
}
.hvr-link{
width: 250px;
}
}

/*横幅481px以上*/
@media screen and (min-width:481px){
#news h3{
margin-top: 10px;
line-height: 180%;
}
.hvr-link{
width: 450px;
}
}

/*横幅481px〜768px*/
@media (min-width:481px) and (max-width:768px){
#topImg{
height: 250px;
}

#about p,#news{
width: 450px;
}
#news li a img{
height: 120px;
}
#news li a div{
height: 100px;
padding: 10px 2.5%;
}
}

/*横幅768px以下*/
@media screen and (max-width:768px){
#topImg{
margin-top: 60px;
background:url(../images/topImgSp.jpg) no-repeat center bottom;
background-size: cover;
}
#topImg p{
margin-left: -125px;
margin-top: -35px;
}
#topImg p img{
width: 250px;
}
	
#about h2,#about h3{
text-align: center;
}
#about p{
margin: 30px auto 0;
}
#about p br{
display: none;
}
	
#news{
padding: 30px 0;
}
#news li{
margin-bottom: 30px;
}
#news li:after {
content: "."; 
display: block;
clear: both;
height: 0;
visibility: hidden;
}
#news li a img{
float: left;
width: calc(35% - 1px);
border-right: 1px solid #eee;
}
#news li a div{
float: right;
width: 60%;
}
#news .readmore{
display: none;
}
}

/*横幅769px以上*/
@media screen and (min-width:769px){
#topImg{
margin-top: 70px;
}
#topImg p{
margin-left: -225px;
margin-top: -70px;
}
#topImg p img{
width: 450px;
}
	
#about{
text-align: center;
}
#about p{
margin-top: 30px;
}

#news{
padding: 100px 0;
}
#news ul{
display: flex;
flex-wrap:  wrap;
justify-content: space-evenly;
}
#news ul li{
margin-right: 50px;
margin-bottom: 50px;
}
#news li img{
border-bottom: 1px solid #eee;
height: 200px;
}
#news li div{
padding: 20px 20px 15px;
}
#news h3{
height: 80px;
}
#news span.readmore{
display: block;
padding-top: 15px;
border-top: 1px solid #eee;
position: relative;
transition: .6s;
}
#news span.readmore i{
position: absolute;
right: 0;
top: 52%;
color: #999;
transition: .6s;
}
.hvr-link{
display: block;
width: 450px;
margin: 0 auto;
text-align: center;
background: #158fa6;
color: #fff;
padding: 14px 0;
}
}

/*横幅769px〜1024px*/
@media (min-width:769px) and (max-width:1024px){
#topImg{
height: 450px;
background:url(../images/topImg.jpg) no-repeat center bottom;
background-size: cover;
}

#news{
width: 700px;
}
#news ul li{
width: 325px;
}
#news ul li:nth-child(2n){
margin-right: 0;
}
}

/*横幅1024pxpx以下*/
@media screen and (max-width:1024px){
}

/*横幅1025px以上*/
@media screen and (min-width:1025px){
#topImg{
height: 500px;
background:url(../images/topImg.jpg) no-repeat center bottom;
background-size: cover;
background-attachment: fixed;
}
#news{
width: 1000px;
}
#news ul li{
width: 300px;
}
#news ul li:nth-child(3n){
margin-right: 0;
}
#news li a:hover span.readmore{
color: #158fa6;
border-top: 1px solid #158fa6;
}
#news li a:hover span.readmore i{
color: #158fa6;
}
}