.header { height: 50%; margin-bottom: 80px;  background: #000; }
.title { position: fixed; bottom: 15px; right: 30px; width: 30%; }

section { max-width: 1280px; margin: auto; padding: 40px; }

label { display: block; padding: 20px 0 20px 30px; border-left: solid 2px #000; }
label div { font-size: 130%; }
label:hover { border-left: solid 2px #09f; color: #09f; }

.bio { max-width: 900px; margin: auto; }

.pics { max-width: 1280px; margin: auto; text-align: center; }
.pics li { margin: 20px 40px; }
.pics img { width: 240px; height: 240px; object-fit: contain; }
.pics img:hover { transform: scale(2); border: solid 5px #fff; box-shadow: 2px 5px 5px 2px rgba(0, 0, 0, 0.35); background: #fff; }
.pics a { color: #333; }
.pics a:hover { color: #09f; }
.pics p { text-align: center; }
.pics p,
figcaption { margin-top: 15px; font-size: small; line-height: 180%; }

.face { margin-top: 40px; text-align: center; }
.face img { height: 200px; border-radius: 5px; }
.face p { margin-top: 15px; font-size: small; }
hr { height: 0; }

.birth { margin: 30px 0; text-align: center; }
.birth span { font-size: small; font-weight: normal; }
.birth img { height: 15px; margin-left: 10px; vertical-align: middle; }

.sns { width: 100%; margin-top: 20px; text-align: center; }

@media screen and (min-width: 640px) {
.title { width: 400px; }
}
@media screen and (max-width: 640px) {
.title { width: 60%; }
section { padding: 20px; }
.pics li { margin: 10px; }
.pics img { width: 130px; height: 130px; }
.pics p { display: none; }
}