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

.cont_title {display:flex;align-items:center;font-family:"ABC Ginto Nord", sans-serif;font-size:36px;font-weight:bold;line-height:1.3em;margin-bottom:30px;}
.cont_title .sub {font-family:"Merriweather", serif;font-size:12px;font-weight:300;margin-left:20px;}

.list {display:flex;justify-content:left;flex-wrap:wrap;}
.list li {width:calc(33.33% - 6.7px);margin:0 0 10px 10px;}
.list li:nth-of-type(3n+1) {margin-left:0;}
.list li a,
.list li img {display:block;width:100%;}
.list li .thumb {aspect-ratio:3 / 2;overflow:hidden;margin-bottom:10px;}
.list li img {width:100%;height:100%;object-fit:cover;}
.txt .list_title {font-family:"ABC Ginto Nord", sans-serif;font-weight:lighter;line-height:1.5em;margin-bottom:0.3em;}
.txt .descript {font-family:"Merriweather", serif;font-size:12px;font-weight:300;}
.list li a {transition:0.3s;}
.list li a:hover {opacity:0.8;}

.btn {display:block;width:140px;font-family:"ABC Ginto Nord", sans-serif;font-weight:lighter;text-align:center;border:solid 1px #333;transition:0.3s;padding:0.5em 1em;margin:60px auto 0;}
.btn:hover {background:#333;color:#fff;}

@media screen and (max-width:768px){
	.cont_title {display:block;font-size:28px;}
	.cont_title .sub {display:block;font-size:10px;line-height:1.8em;margin-left:0;}
	
	.list li {width:100%;margin:10px 0 10px;}
	.list li:first-of-type {margin-top:0;}
	.list li .thumb {aspect-ratio:16 / 9;}
	
	.btn {width:160px;padding:1em 1em;}
}


/*共有パーツ*/
#categories {padding:120px 0 0;}
#categories ul li a {position:relative;}
#categories ul li a .thumb {margin-bottom:0;}
#categories ul li a .shadow {width:100%;height:100%;background:rgba(0,0,0,0);position:absolute;left:0;top:0;transition: 0.3s;}
#categories ul li a:hover {opacity:1;}
#categories ul li a:hover .shadow {background:rgba(0,0,0,0.4);}
#categories ul li a .shadow h3 {width:100%;font-family:"ABC Ginto Nord", sans-serif;font-size:16px;font-weight:normal;text-align:center;color:#fff;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}

@media screen and (max-width:768px){
	#categories {padding: 60px 0 0;}
	#categories .list li {width:calc(50% - 5px);margin:0 0 10px 0;}
	#categories .list li:nth-of-type(2n) {margin-left:10px;}
	#categories ul li a .shadow h3 {font-size:14px;}
}