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


#archive_container{
	font-family: 'Noto Sans JP', sans-serif;
	padding:70px 0;
	background-color: #f9f9f9;
	color: #333333;
	font-size: 12px;

}



#archive_container ul li{
		list-style:none;
}


#archive_container a{
	text-decoration: none;
	coursor:pointer;
}

#archive_container a:hover img{
		opacity:0.8;
}

#archive_container .arcivre_wrap{	
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#archive_container .topics_list{
	display: flex;	
	width: 95%;
	max-width: 1300px;
	margin: 0 auto;
	flex-wrap: nowrap;
}
#archive_container .topics_list li{
	width: 70%;
	padding:0 2.5%;
}
#archive_container .topics_list li strong{
	font-size: 14px!important;
	margin-top:1.2em;
	line-height: 1.5em;
	display: block;
  text-overflow: ellipsis;
  overflow: hidden;
	text-align: left;
}
#archive_container .topics_list li p{
	font-size: 12px!important;
	line-height: 1.5em;
	margin-top: 0.3em;
  text-overflow: ellipsis;
  overflow: hidden;
}

#archive_container .topics_list li div{
	width: 90%;
	margin: 0 auto;
	text-align: justify;
	letter-spacing: 0.05em;
}

#archive_container .topics_list li img{
	width: 220px;
}
#archive_container .topics_list li a{
	color: #222222;
	transition: 0.3s;

}
#archive_container .topics_list li a p{
	color: #444444;
}

#archive_container .topics_list li a:hover strong,
#archive_container .topics_list li a:hover p{
	opacity: 0.8;
}


#archive_container .title{
	font-size: 20px;
	text-align: center;
	font-weight: bold;
	margin-bottom: 2em;
	letter-spacing: 0.05em;
	color: #222222;
}

#archive_container .link{
	text-align: center;
    margin-top: 60px;
}
#archive_container .link a{
	color:#333333;
	border-top: 1px solid #333333;
	border-bottom: 1px solid #333333;
	padding: 1em 1.5em;
	transition: all .3s;
}
#archive_container .link a:hover{
	background-color:#333333;
	border-top: 1px solid #333333;
	border-bottom: 1px solid #333333;
	color: #ffffff;
	border-radius: 5px;
}


/* ------------------- */







@media screen and (min-width: 641px) {
	
/*html{
	font-size: 81.25%;
}
*/
#archive_container{
	padding:130px 0;
	font-size: 15px;
}
#archive_container .topics_list li strong{
	font-size: 14px;
}
#archive_container .topics_list li p{
	font-size: 13px;
}	
	
#archive_container .topics_list li{
	width: 40%;
	padding:0 2.5%;
}

#archive_container .title{
	font-size: 26px;
}

#archive_container .link{
	text-align: center;
    margin-top: 78px;
}

#archive_container .topics_list li img{
		width: 300px;
	}
}


@media screen and (min-width: 961px) {
	
/*
html{
	font-size: 87.5%;
}
*/
	
#archive_container{
	padding:140px 0;
	font-size: 17px;

}

#archive_container .arcivre_wrap{	
  white-space: normal;
}

#archive_container .topics_list li strong{
	font-size: 15px;
}
#archive_container .topics_list li p{
	font-size: 14px;
}
	

#archive_container .topics_list li{
	/*width: 20%;*/
	width: 33.3%;
	padding:0 1%;
	/*margin-bottom: 4rem;*/
}

#archive_container .title{
	font-size: 28px;
}

#archive_container .link{
	text-align: center;
    margin-top: 84px;
}
#archive_container .topics_list li img{
		width: 100%;
	}
	
}