/* .section-content */
.section-content { margin: 0; padding: 6.5rem 0;}
.section-content h3 ,
.section-content h3 span { font-family: 'apercuregular', sans-serif; text-transform: none; font-weight: 400;}
.section-content ul { margin-bottom: 0;}

@media(max-width: 767px){
    .section-content { padding: 3rem 0;}
}




/* .box */
.box { background: #fff; box-shadow: 3px 3px 6px rgba(0, 0, 0, .05); margin-bottom: 2%; padding: 2rem;}




/* .section-content */
.section-content .flex { flex-wrap: wrap; align-self: stretch; text-align: center; margin: -1rem;}
.section-content .flex li { width: calc(33.3% - (1rem * 2)); align-self: stretch; text-align: center; margin: 1rem;}
.section-content .flex li p:last-child { margin-bottom: 0;}
.section-content .flex li a.btn01 { margin-top: 3rem;}
.section-content .flex li a.btn01.flex { width: 100%; margin: auto auto 0;}
.section-content .flex li p ,
.section-content .flex li h3 ,
.section-content .flex li li { text-align: left;}
.section-content .flex li h3 ,
.section-content .flex li li { margin-bottom: 1.5rem;}
.section-content .flex li .image { height: 75px; margin: 0 auto 2rem;}
.section-content .flex li .image img { width: 100%; height: 100%; object-fit: contain;}

.section-content.association-content .flex { justify-content: center;}

.section-content.eco-content .flex > li { width: calc(50% - (1rem * 2));}
.section-content.eco-content .flex > li li { width: 100%;}
.section-content.eco-content .flex > li .image { height: 120px;}

@media(max-width: 1023px){
    .section-content .flex > li { width: 100% !important;}
}
@media(max-width: 767px){
    .section-content .flex li { width: 100% !important; margin: 1rem 0;}
    .section-content .flex { flex-wrap: wrap;}
}




/* .quality-content */
.quality-content a { margin: 0;}
.quality-content .content { margin-top: 3rem;}
.quality-content .content > .flex { margin-bottom: 1rem;}
.quality-content .content > .flex .box { display: flex; flex-direction: column; justify-content: flex-start; align-items: center;}
.quality-content .content > .flex .box a { margin-top: auto;}
.quality-content .content a.box.flex { align-items: stretch; flex-wrap: nowrap; position: relative; overflow: hidden; width: 100%; text-align: left; margin: 0 0 2rem; padding: 0;}
.quality-content .content a.box.flex:last-child { margin-bottom: 0;}
.quality-content .content a.box.flex:after { content: ""; position: absolute; top: 0; right: 0; z-index: 1; width: 0; height: 100%; background: #efcd34; transition: width .5s ease;}
.quality-content .content a.box.flex > * { position: relative; z-index: 5;}
.quality-content .content a.box.flex h3 {width: calc(100% - (20px + 2rem)); padding: 1em; transition: color .5s ease;}
.quality-content .content a.box.flex span { justify-content: center; align-items: center; width: calc(20px + 2rem); line-height: 0; color: #fff; background: #efcd34; transition: padding .3s ease; margin: 0;}

@media(hover:hover){
    .quality-content .content a.box.flex:hover:after { width: 100%;}
    .quality-content .content a.box.flex:hover h3 { color: #fff;}
    .quality-content .content a.box.flex:hover span { padding: 1.25rem 1rem .75rem;}
}