@charset "utf-8";
@media only screen and (min-width :768px ){
.contents .colamn{
max-width: 960px;	
}
/*記事-----------------------------------*/
.list-group{
max-width: 960px;	
flex-wrap: wrap; /* 画面幅に合わせてカラム落ちさせる */
display: flex;
justify-content: space-between;
align-items: top
}	
/* 最後のコンテンツを左寄せにする指定 */
.list-group:after {
content: "";
display: block;
width: 66.5%;  /* .boxに指定したwidthと同じ幅を指定する */
height: 0;
}
.colam-flex-item{
width: 32%;	
margin: 2rem auto  0rem auto;
border:solid 1px #ccc;
}	
.colam-flex-item{
width: 30%;	
margin: 2rem auto  0rem auto;
border:solid 1px #ccc;
}	

.colam-flex-item-b{
width: 30%;	
margin: 0rem auto  0rem auto;
}	
.colam-flex-item img{
margin: 0rem auto  -2rem auto;	
padding: 0rem;
text-align: center;	
}	
.colam-flex-item h4{
text-align: center;
white-space: nowrap;	
margin: 2.5rem auto  1rem auto;	
color:rgba(50, 165, 185,1);
font-weight: 600;	
font-size: 1.8rem;	
line-height: 2.2rem;

}
.colam-flex-item h5{
text-align: left;
white-space: nowrap;	
margin: 1rem 0rem 0.5rem 01rem;
padding: 0em 0rem 0rem  0rem;
color:#777;
font-weight: 500;	
font-size: 1.6rem;	
}			
.colam-flex-item p{
margin: 0rem auto  0rem auto;	
padding: 0em  1rem 1rem  1rem;
text-align: left;	
text-align: justify;	
font-size: 1.6rem;		
}
/**コラム--------*/
.center{
text-align: center;
margin: auto;	
}		
.colamn p{
margin: 0rem auto 1rem auto;
padding: 0rem 0.5rem 0rem 0.5rem;
text-align: left;	
text-align: justify;		
}	
.colamn h4{
color: #fffffb;		
background-color:rgba(50, 165, 185,1);
border: solid 1px rgba(50, 165, 185,1);
margin: 0rem auto 2rem auto;
padding: 0.5rem 0rem 0.5rem 0rem;
text-align: center;	
font-size: 2.2rem;	
font-weight: 500;	
}
.colamn h3{
color: rgba(50, 165, 185,1);		
margin: 0rem auto 0rem 0.5rem;
padding: 0rem;
text-align: left;	
font-size: 2rem;	
line-height: 2.5rem;	
font-weight: 600;	
}	
.colamn h5{
color: #333;	
margin: 0rem auto 0rem 0.5rem;
padding: 0rem;
text-align: left;	
font-size: 1.8rem;	
font-weight: 600;	
}		
.colamn img{
margin: 0rem auto 3rem auto;
padding: 0rem;	
}	
.colamn li{
margin: 0rem 0rem 0rem 3rem;
padding: 0rem 0.5rem 1rem 0.5rem;
text-align: left;	
text-align: justify;	
line-height: 1.5rem;
list-style: none;
color: #555;	
text-indent: -2.2rem	
}		
h5.ex{
width: 100%;	
color: rgba(50, 165, 185,1);		
border: solid 1px rgba(50, 165, 185,1);
margin: 0rem auto 2rem auto;
padding: 0.5rem 0rem 0.5rem 0rem;
text-align: center;	
font-size: 1.8rem;	
font-weight: 500;		
	}
	

/* ページネーション------------------*/
.list-group{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: #fff;
    width: 100%;
    margin: 10px auto;
    padding: 20px;
    list-style: none;
    text-align: center;
}

.pagination{
    list-style: none;
    display: flex;
    justify-content: center;
    padding: 5px;
}

.list-group-item {
    background: burlywood;
    margin: 10px;
    padding: 10px;
    width: 45%;
}

.pagination li{
    margin: 5px;
    border: 1px solid #999999;
	list-style: none;
	border-radius: 4PX;
}

.pagination  a{
    display: block;
    text-decoration: none;
    color: #333;
    padding: 10px 10px 10px 20px;
	text-align: center;

}

.pagination a :hover{
    background-color: rgba(50, 165, 185,1);
	color: #fff;
	
}

.active{
    background-color: rgba(50, 165, 185,0.5);
	color: #fff;
}
	
}


@media only screen and (max-width :768px ){
/*記事-----------------------------------*/
.pink {
margin: 3rem auto 3rem auto;	
text-align: center;	
color: #ff6464;
font-weight: 600;
}	
.colamn p{
margin: 0.5rem auto 3rem auto;
padding: 0rem 0.5rem 0rem 0.5rem;
text-align: left;	
text-align: justify;		
}	
.colamn h4{
color: #fffffb;		
background-color:rgba(50, 165, 185,1)	;	
margin: 0rem auto 0rem auto;
padding: 0.5rem 0rem 0.5rem 0rem;
text-align: center;	
font-size: 2rem;	
line-height: 2.5rem;	
font-weight: 500;	
}
.colamn h3{
color: rgba(50, 165, 185,1);	
margin: 0rem auto 0rem 0.5rem;
padding: 0rem;
text-align: left;	
font-size: 1.8rem;	
font-weight: 600;	
}	
.colamn h5{
color: #333;	
margin: 1rem auto 0rem 0.5rem;
padding: 0rem;
text-align: left;	
font-size: 1.8rem;	
font-weight: 600;	
}		
	
.colamn img{
margin: 0rem auto 3rem auto;
padding: 0rem;	
}	
.colamn li{
margin: 0rem 0rem 1rem 2rem;
padding: 0rem 0.5rem 0rem 0.5rem;
text-align: left;	
line-height: 2rem;
list-style: none;
color: #555;	
text-indent: -2.2rem;	
font-size: 1.5rem;	
}		
	
.colam-flex-item{
width: 96%;	
margin: 2rem auto  0rem auto;
border:solid 1px #ccc;
}	
.colam-flex-item-b{
width: 96%;	
margin: 0rem auto  0rem auto;
}	
.colam-flex-item img{
margin: 0rem auto  -2rem auto;	
padding: 0rem;
text-align: center;	
}	
.colam-flex-item h4{
margin: 2.5rem auto  1rem auto;	
color:rgba(50, 165, 185,1);	
font-weight: 600;	
font-size: 1.8rem;
line-height: 2.2rem;	
transform: scale(0.9, 1);
white-space: nowrap	
}	
.colam-flex-item h5{
text-align: left;
white-space: nowrap;	
margin: 1rem 0rem 0.5rem 1rem;
padding: 0em 0rem 0rem  0rem;
color:#777;
font-weight: 500;	
font-size: 1.5rem;	
}	
.colam-flex-item p{
margin: 0rem auto  0rem auto;	
padding: 0em  1rem 1rem  1rem;
text-align: left;	
text-align: justify;	
font-size: 1.6rem;	

}		

h5.ex{
width: 100%;	
color: rgba(50, 165, 185,1);		
border: solid 1px rgba(50, 165, 185,1);
margin: 0rem auto 1rem auto;
padding: 0.5rem 0rem 0.5rem 0rem;
text-align: center;	
font-size: 1.8rem;	
font-weight: 500;		
}	
	
/* ページネーション------------------*/
.list-group{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: #fff;
    width: 100%;
    margin: 10px auto;
    padding: 20px;
    list-style: none;
    text-align: center;
}

.pagination{
    list-style: none;
    display: flex;
    justify-content: center;
    padding: 5px;
}

.list-group-item {
    background: burlywood;
    margin: 10px;
    padding: 10px;
    width: 45%;
}

.pagination li{
    margin: 5px;
    border: 1px solid #999999;
	list-style: none;
	border-radius: 4PX;
}

.pagination  a{
    text-decoration: none;
    color: #333;
    padding: 10px 10px 10px 33px;
	text-align: center;
margin: 1rem auto;
}

.pagination a :hover{
    background-color: rgba(50, 165, 185,1);
	color: #fff;
	
}

.active{
    background-color: rgba(50, 165, 185,0.5);
	color: #fff;
}	
	
}