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

@font-face {
font-family: "Ubuntu Condensed";
font-style: normal;
font-weight: 400;
src: local("Ubuntu Condensed"),
     local("UbuntuCondensed-Regular"),
     url(UbuntuCondensed-Regular.woff) format("woff");
}
header .logo,
footer .copyright {
margin: 0;
color: #593869;
font-family: "Ubuntu Condensed";
font-weight: normal;
text-align: center;
letter-spacing: .1em;
}
/* :::::: contents :::::: */
#wrapper {
overflow: hidden;
min-width: 320px;
height: auto;
padding: 0;
}
.contents {
-webkit-transition: -webkit-transform .6s;
transition: transform .6s;
}
#navTgl:checked ~ .contents {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
/* :::::: toggle button :::::: */
#navTgl {
display: none;
overflow: hidden;
}
label {
cursor: pointer;
position: fixed;
top: 0;
left: 0;
}
.open {
z-index: 2;
width: 60px;
height: 60px;
color: #03a5e4;
background-color: white;
font-size: 2em;
line-height: 50px;
text-align: center;
-webkit-transition: background-color .6s, -webkit-transform .6s;
transition: background-color .6s, transform .6s;
}
label.open:after {
    content: 'menu';
    display:  block;
    font-size:  12px;
    color: #03a5e4;
    position:  relative;
    top: -55%;
}
#navTgl:checked + .open {background-color: white;-webkit-transform: translateX(250px);transform: translateX(250px);}
.close {
pointer-events: none;
z-index: 1;
width: 100%;
height: 100%;
transition: background-color .6s;
}
#navTgl:checked ~ .close {
pointer-events: auto;
background-color: rgba(0,0,0,.3);
}
/* :::::: drawer menu :::::: */
.menu {
z-index: 1;
position: fixed;
overflow: auto;
top: 0;
left: 0;
width: 250px;
height: 100%;
padding: 10px;
background-color: rgba(0,0,0,.6);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: -webkit-transform .6s;
transition: transform .6s;
}
#navTgl:checked ~ .menu {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.menu h2,
.menu li a {
color: white;
}
.menu h2 {
text-align: center;
}
.menu ul,
header nav ul {
padding: 0;
}
.menu li {
border-bottom: 1px solid rgba(255,255,255,.6);
font-size: .8em;
line-height: 1.4;
}
.menu li:first-child {
border-top: 1px solid rgba(255,255,255,.6);
}
.menu li a,
header nav li a {
display: block;
padding: 1em 2em;
text-decoration: none;
transition: background-color .6s;
}
.menu li a:hover {
background-color: black;
}
/* :::::: header, footer :::::: */
header,
footer,
.menu {
box-sizing: border-box;
}
header,
footer {
height: 100px;
}
header .logo,
footer .copyright {
line-height: 100px;
}
header {
position: relative;
margin-bottom: 30px;
}
footer {
background-color: rgba(255,255,255,.6);
}
footer small {
font-size: 1em;
}
/* :::::: article :::::: */
article {
width: 100%;
max-width: 647px;
margin: 0 auto 100px;
padding: 0 10px;
box-sizing: border-box;
}
article h1 {
width: 7em;
height: 7em;
margin: 0 auto;
font-size: 1em;
line-height: 7em;
font-weight: normal;
text-align: center;
background-color: rgba(0,0,0,.05);
border-radius: 50%;
}
section {
margin: 50px 0;
}
section h2,
figure img,
figcaption {
margin-bottom: 1em;
}
section h2 {
margin: 0 0 20px;
text-align: center;
}
figure {
position: relative;
padding-bottom: 50px;
}
#wrapper figure img {
max-width: calc(100% - 10px);
}
figure img {
height: auto;
padding: 5px;
background-color: rgba(255,255,255,.6);
}
figcaption {
font-size: .8em;
line-height: 1.6;
}
figcaption a {
display: block;
position: absolute;
right: 0;
bottom: 0;
padding: 1em 2em;
color: white;
background: white;
text-align: center;
text-decoration: none;
transition: background-color .3s;
}
figcaption a:hover {
background: indianRed;
}

.menu li a span{
    color:#d4d2d2;
}
.menu li a{
    font-size:1.1em;
}