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

/* -------------------------
@contents
--------------------------*/

#flexbox {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    padding: 0 20px;
}

#flexbox li {
    background-image: none;
    margin: 0;
    padding: 0;
    width: calc(100% / 3 - 17px)
}

#flexbox li a {
    text-decoration: none;
}

#flexbox li img {
    width: 100%;
    transition: 0.3s;
    border: 1px solid #d5d5d5;
}

#flexbox li a:hover img,
#flexbox li a:hover h3,
#flexbox li a:hover p {
    opacity: 0.6;
}

#flexbox li h3 {
    border: none;
    font-size: 1.15em;
    margin: 14px 0 7px;
    padding: 0;
}

#flexbox li p {
    margin: 0;
    padding: 0;
    font-size: 1em;
    text-align: justify;
}

#flexbox li .more {
    position: relative;
    margin: 10px 0;
    padding: 0 0 0 1em;
    color: #cb620d;
    font-size: 1em;
}

#flexbox li .more::before {
    position: absolute;
    top: 42%;
    left: 0px;
    transform: translateY(-50%);
    width: 0px;
    height: 0px;
    border: 0.5em solid transparent;
    border-left: 0.6em solid #ca6718;
    border-radius: 1px;
    content: "";
}

#flexbox li a:hover .more {
    text-decoration: underline;
}

@media (max-width: 767px){
	#flexbox li {
		width: calc(100% / 2 - 13px);
	}
    #flexbox li h3 {
        font-size: 1em;
    }
    #flexbox li p {
        font-size: 0.85em;;
    }
    #flexbox li .more {
        font-size: 0.9em;
    }
}

@media (max-width: 300px){
	#flexbox li {
		width: 100%;
	}
}


/* -------------------------
@print
--------------------------*/

@media print {
    #flexbox li {
        width: calc(100% / 3 - 17px)
    }
}