@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400&display=swap');

#category { padding: 60px 10px 30px; font-family: 'Noto Sans JP', sans-serif; }
#category a {color: #000; text-decoration: underline;}
#category a:hover {color: #e12020;}

#category img { width: 100%; height: auto;}

#pankuzu { font-size: 14px;}

@media screen and (max-width:899px){
#category { padding: 30px 10px 30px;}
}

@media screen and (max-width:699px){
#category { padding: 40px 10px 30px;}
}


/**============================================================================================**/
#category ul.m-tb30 { font-size: 0;}

#category ul.m-tb30 li {
    display: inline-block; 
    box-sizing: border-box; width: 25%; margin: 0 0 40px; padding: 0 20px;
     vertical-align: top;}

@media screen and (max-width:799px){
#category ul.m-tb30 li { width: 33.33%; padding: 0 10px;}
}

@media screen and (max-width:499px){
#category ul.m-tb30 li { width: 50%;}
}



#category ul.m-tb30 a.dis-ilblk {
    width: 100%; height: 0; padding: 63.63% 0 0; 
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;}
    
#category ul.m-tb30 p {color: #666; font-size: 12px;}    
    
#category ul.m-tb30 a.fw_b {
    display: -webkit-box; overflow: hidden;
    width: 100%; height: 65px;
	font-size: 14px; line-height: 1.5em;    
    -o-text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    text-overflow: ellipsis;
    word-wrap: break-word;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;}    
    
    
/**============================================================================================**/
/* ページャー */
#pagination { margin: 0 0 30px; padding: 0; font-size: 14px; font-weight: 600; line-height: 1em;}

#pagination a {
    position: relative;
    box-sizing: border-box; width: 140px; height: 40px;
    border: solid 1px #000; border-radius: 10px;
    text-decoration: none;}

#pagination a.prev { margin: 0 5px 0 0; padding: 11px 0 0 19px;}
#pagination a.next { margin: 0 0 0 5px; padding: 11px 19px 0 0;}

#pagination a:hover {border-color: #e12020;}

#pagination a::before {
    content: '';
    position: absolute; top: 13px;  
    width: 0;  height: 0;
    border-style: solid;
    -webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;}

#pagination a.prev::before { left: 9px; border-width: 6px 9px 6px 0; border-color: transparent #000 transparent transparent;}
#pagination a.next::before { right: 9px; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent #000;}

#pagination a.prev:hover::before { border-color: transparent #e12020 transparent transparent;}
#pagination a.next:hover::before { border-color: transparent transparent transparent #e12020;}

/**============================================================================================**/