@charset "UTF-8";
*{box-sizing:border-box;}

/* 横幅1200px以上(4列) */
@media screen and (min-width: 1200px) {
	/* ３段組みの設定を記述 */ 
	.contents{width:100%; height: auto;}
	.article-wrapper{width:95%; height: auto; margin-left: auto; margin-right: auto; padding-left: auto; padding-right: auto;}
    .article{float: left; background-color:#DEDEDE; width:21%; height:250px; margin: 3px 2%;}
	img{margin-top: 20px; margin-left: auto; margin-right: auto; object-fit: cover;}
	.image{margin-left:5%; margin-right:5%;}
	.title-btn{height: 35%; width:100%; padding:8px 24px; margin-bottom: 0px; margin-left: auto; margin-right: auto; color:black; display:inline-block; opacity:0.8; vertical-align:top;}
	.title-btn:hover{opacity:1; background-color: black; color:white; border-radius:4px;}
	center{width:90%; margin-left: auto; margin-right: auto;} }

/* 横幅1199px以下〜1000px以上(3列) */
@media screen and (max-width: 1199px) and (min-width: 1000px) {
	/* ３段組みの設定を記述 */ 
	.contents{width:100%; height: auto;}
	.article-wrapper{width:95%; height: auto; margin-left: auto; margin-right: auto; padding-left: auto; padding-right: auto;}
    .article{float: left; background-color:#DEDEDE; width:21%; height:300px; margin: 3px 2%;}
	img{margin-top: 20px; margin-left: auto; margin-right: auto; object-fit: cover;}
	.image{margin-left:5%; margin-right:5%;}
	.title-btn{height: 35%; width:100%; padding:8px 24px; margin-bottom: 0px; margin-left: auto; margin-right: auto; color:black; display:inline-block; opacity:0.8; vertical-align:top;}
	.title-btn:hover{opacity:1; background-color: black; color:white; border-radius:4px;}
	center{width:90%; margin-left: auto; margin-right: auto;} }

/* 横幅999px以下〜800px以上(2列) */
@media screen and (max-width: 999px) and (min-width: 800px) {
	/* ３段組みの設定を記述 */ 
	.contents{width:100%; height: auto;}
	.article-wrapper{width:95%; height: auto; margin-left: auto; margin-right: auto; padding-left: auto; padding-right: auto;}
    .article{float: left; background-color:#DEDEDE; width:29.3%; height:300px; margin: 3px 2%;}
	img{margin-top: 20px; margin-left: auto; margin-right: auto; object-fit: cover;}
	.image{margin-left:5%; margin-right:5%;}
	.title-btn{height: 35%; width:100%; padding:8px 24px; margin-bottom: 0px; margin-left: auto; margin-right: auto; color:black; display:inline-block; opacity:0.8; vertical-align:top;}
	.title-btn:hover{opacity:1; background-color: black; color:white; border-radius:4px;}
	center{width:90%; margin-left: auto; margin-right: auto;} }

/* 横幅799px以下〜650px以上 */
@media screen and (max-width: 799px) and (min-width: 650px){
	/* ３段組みの設定を記述 */ 
	.contents{width:100%; height: auto;}
	.article-wrapper{width:95%; height: auto; margin-left: auto; margin-right: auto; padding-left: auto; padding-right: auto;}
    .article{float: left; background-color:#DEDEDE; width:46%; height:250px; margin: 3px 2%;}
	img{margin-top: 20px; margin-left: auto; margin-right: auto; object-fit: cover;}
	.image{margin-left:5%; margin-right:5%;}
	.title-btn{height: 27%; width:100%; padding:8px 24px; margin-top: 10px; margin-bottom: 0px; margin-left: auto; margin-right: auto; color:black; display:inline-block; opacity:0.8; vertical-align:top;}
	.title-btn:hover{opacity:1; background-color: black; color:white; border-radius:4px;}
	center{width:100%; margin-left: auto; margin-right: auto;} }

/* 横幅649px以下 */
@media screen and (max-width: 649px) {
	/* ３段組みの設定を記述 */ 
	.contents{width:100%; height: auto;}
	.article-wrapper{width:95%; height: auto; margin-left: auto; margin-right: auto; padding-left: auto; padding-right: auto;}
    .article{float: left; background-color:#DEDEDE; width:96%; height:250px; margin: 3px 2%;}
	img{margin-top: 20px; margin-left: auto; margin-right: auto; object-fit: cover;}
	.image{margin-left:5%; margin-right:5%;}
	.title-btn{height: 27%; width:100%; padding:8px 24px; margin-top: 10px; margin-bottom: 0px; margin-left: auto; margin-right: auto; color:black; display:inline-block; opacity:0.8; vertical-align:top;}
	.title-btn:hover{opacity:1; background-color: black; color:white; border-radius:4px;}
	center{width:100%; margin-left: auto; margin-right: auto;} }


.contents-wrapper{width:100%; height: 500px;}