/* Scss Document */
/* ------------------------------------------------------------------
/////////////////////////////////////////////////////////////////////
base
/////////////////////////////////////////////////////////////////////
------------------------------------------------------------------ */
#contents { margin: 100px 0 0; padding: 0; }

#works section { margin: 100px 80px 0; padding: 0; }
#works section h3 { margin: 0 20px 50px; padding: 20px 0 20px 20px; border-left: 10px solid #4f7dcf; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; }
#works section h3 span { width: 100%; display: block; }
#works section h3 span:last-of-type { margin: 20px 0 0; }
#works section dl { margin: 0 20px; padding: 40px; }
#works section dl dt { margin: 0; padding: 0 0 0 15px; position: relative; }
#works section dl dt::before { content: ''; width: 10px; height: 10px; position: absolute; top: 50%; left: 0; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); background-color: #004ca1; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }
#works section dl dd { margin: 0; padding: 0; position: relative; }
#works section dl dd ul { margin: 0; padding: 0; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; list-style: none; }
#works section dl dd ul li { margin: 20px 30px 0 0; }
#works section dl dd ul li a { padding: 7px 10px; color: #FFF; display: block; transition: 0.1s linear; }
#works section dl dd ul li a:hover { color: #004ca1; text-decoration: none; background-color: #FFF; }
#works section ul.list { margin: 0; padding: 0; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; list-style: none; }
#works section ul.list li { width: 300px; height: auto; margin: 80px 20px 0; padding: 0; }
#works section ul.list li div { width: 100%; height: 300px; overflow: hidden; margin: 0; padding: 0; border: 1px solid #231815; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; }
#works section ul.list li div img.photo { width: 100%; height: 100%; object-fit: cover; transition: 0.1s linear; }
#works section ul.list li div a:hover img.photo { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); }
#works section ul.list li div span { width: 30px; height: 30px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; align-items: center; justify-content: center; position: absolute; bottom: 0; right: 0; background-color: rgba(255, 255, 255, 0.5); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#works section ul.list li div a:hover span img.zoom { animation: pop 1.5s ease 0s 1 normal; }
#works section ul.list li div p { padding: 7px 10px; position: absolute; top: 0; left: 0; }
#works section ul.list li p.title { margin: 25px 0; }
#works section ul.list li ul { margin: 0; padding: 0; list-style: none; }
#works section ul.list li ul li { width: 100%; height: auto; margin: 0 0 10px; padding: 0 0 10px; border-bottom: 1px solid #231815; }
#works section ul.list li ul li:last-child { margin: 0; }
#works section ul.list li ul li span { width: 90px; display: inline-block; }
#works section p.btn { width: 460px; height: 70px; margin: 80px auto 0; padding: 0; }
#works section p.btn a { padding: 27px 0 0; background-color: #4f7dcf; transition: 0.1s linear; }
#works section p.btn a:hover { -webkit-box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px; -moz-box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px; box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px; }

.type01 { background-color: #5c551e; }

.type02 { background-color: #dccb53; }

.type03 { background-color: #163e43; }

.type04 { background-color: #9c5279; }

@media (max-width: 1180px) { #works section { margin: 100px 20px 0; } }
@media (max-width: 740px) { #works section ul.list li { width: calc((100% - 80px)/2); } }
@media (max-width: 640px) { #works section { margin: 100px 10px 0; }
  #works section h3 { margin: 0 10px 50px; }
  #works section dl { margin: 0 10px; padding: 30px 20px; }
  #works section ul.list li { width: calc((100% - 40px)/2); margin: 80px 10px 0; } }
@media (max-width: 600px) { #works section ul.list li div { height: 200px; } }
@media (max-width: 500px) { #works section p.btn { width: calc(100% - 20px); margin: 80px 10px 0; } }