@charset "utf-8";


.arwlink {
 position: relative;
 padding-left: 20px;
 }
.arwlink:before {
 display: block;
 width: 6px;
 height: 6px;
 border-right: solid 2px #59574c;
 border-bottom: solid 2px #59574c;
 content: "";
 position: absolute;
 top:8px;
 left:0;
 transform: rotate(-45deg);
}




.dlc {
 max-width: 1140px;
 display: flex;
 justify-content: flex-start;	
 flex-wrap: wrap;
}

.dlc a:link { text-decoration: none; }


.dlc__photo {
 position: relative;
 padding-bottom: 100%;
 /*border: solid 1px #ECECEC;*/
}
.dlc__photo img {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 height: auto;
 width: auto;
 max-height: 100%;
 max-width: 100%;
 margin: auto;
}

.dlc a:hover img { opacity: .75; }

.dlc h2 {
 position: relative;
 display: block;
 margin-top: 1em;
 font-weight: bold;
 line-height: 1.4;
 color: #59574c;
 }


.dlc p { margin-top: 1em; padding-left: 20px; }


@media screen and (min-width: 769px){
.dlc {
 margin: 40px auto;
 display: flex;
 justify-content: space-between;
}
 .dlc > li { width: 18%; }
 .dlc > li:nth-child(5n) { margin-right: 0;}
 .dlc h2 { font-size: 1.125rem; }	
 .dlc p { font-size: .875rem; }	
}
@media screen and (max-width: 768px){
 .dlc > li { width: 48%; margin-top: 1.5em; margin-right: 4%; }
 .dlc > li:nth-child(2n) { margin-right: 0;}
 .dlc h2 { font-size: 5vw; }	
 .dlc p { font-size: 3vw; }
}


.driveros { 
 display: flex;
 justify-content: flex-end;
 border-top: dotted 1px #59574c;
 margin-top: 2em; 
 padding-top: 1em;
}


.topics { margin-top: 40px; }


.topics h2 {
 color: #716F63;
 padding-left: .7em;
 border-left: 4px solid #716F63;
}

@media screen and (min-width: 769px){
 .topics h2 { font-size: 1.5rem; }
.topics dl {
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
 margin-top: 1.5em;
}
 .topics dt { width: 12em; }
 .topics dd { width: calc(100% - 12em);  }
 .topics dt ,.topics dd { padding: 1em 0; border-bottom: solid 1px #ECECEC; }
 .topics p { position: relative;  padding-left: 1.5em; }

.topics p:before {
 content:"●";
 position: absolute;
 top:0;
 left:0;
 color: #59574c;
}	
	
}
@media screen and (max-width: 768px){
 .topics h2 { font-size: 5vw; }	
 .topics dl { margin-top: 1em; }
 .topics dt , .topics dd { width: 100%; }
 .topics dt { margin-top: 2em; position: relative; padding-left: 1.5em; }
 .topics dt:before {
 content:"●";
 position: absolute;
 top:0;
 left:0;
 color: #59574c;
}	
 .topics dd { padding: .5em 0 1em; border-bottom: solid 1px #ECECEC; }		
}