@charset "UTF-8";

html,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,p{
margin:0px;
padding:0px;
}
body{
text-align:center;
background-color:#FFF;
-webkit-text-size-adjust:100%;
color:#000;
margin:0px auto;
padding:0px;
font-family:TsukuAOldMinPr6-M;
font-size:11px;
line-height:1.5em;
animation:fadeIn 5s ease 0s 1 normal;
-webkit-animation:fadeIn 5s ease 0s 1 normal;
}
a{
color:#000;
text-decoration:underline;
}
a:hover{
color:#888;
text-decoration:underline;
}
a:visited{
color:#000;
text-decoration:underline;
}
a:active{
color:#888;
text-decoration:underline;
}
h1,h2,h3,h4,h5,h6{
font-weight:normal;
}
p{
font-size:11px;
line-height:1.5em;
text-align:justify;
}
ul,li {
list-style:none;
}
.clearfix{
display:block;
}
.clear{
clear:both;
}
.clear hr{
display:none;
}
p.copyright{
text-align:right;
color:#CCC;
font-size:10px;
position:fixed;
top:auto;
right:1%;
bottom:5px;
left:auto;
letter-spacing:0.05em;
}





/*==================================================================

HEADER

==================================================================*/
header{
position:fixed;
top:10px;
right:10px;
bottom:auto;
left:auto;
z-index:9999;
}
header ul{
}
header ul li{
float:left;
margin-left:5px;
width:100px;
}
.nav{
display:inline-block;
width:100px;
height:30px;
text-align:center;
text-decoration:none;
line-height:30px;
outline:none;
position:relative;
z-index:2;
background-color:#000;
border:2px solid #000;
color:#FFF;
line-height:26px;
letter-spacing:0.1em;
}
.nav::before,
.nav::after{
position:absolute;
z-index:-1;
display:block;
content:'';
top:0;
width:50%;
height:100%;
background-color:#000;
}
.nav,
.nav::before,
.nav::after{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
-webkit-transition:all .3s;
transition:all .3s;
}
.nav::before{
right:0;
}
.nav::after{
left:0;
}
.nav:hover::before,
.nav:hover::after{
width:0;
background-color:#000;
}
.nav:visited{
color:#FFF;
}
.nav:hover{
background-color:#FFF;
border-color:#000;
color:#000;
text-decoration:none;
}
@media only screen and (min-width:320px) and (max-width:500px){
header{
padding:10px;
}

#nav-drawer{
position:relative;
}
.nav-unshown{
display:none;
}
#nav-open{
display:inline-block;
width:30px;
height:22px;
vertical-align:middle;
}
#nav-open span, #nav-open span:before, #nav-open span:after{
position:absolute;
height:3px;
width:30px;
border-radius:3px;
background:#000;
display:block;
content:'';
cursor:pointer;
}
#nav-open span:before{
bottom:-8px;
}
#nav-open span:after{
bottom:-16px;
}
#nav-close{
display:none;
position:fixed;
z-index:99;
top:0;
left:0;
width:100%;
height:100%;
background:#000;
opacity:0;
transition:0.3s ease-in-out;
}
#nav-content{
overflow:auto;
position:fixed;
top:0;
left:0;
z-index:9999;
width:70%;
max-width:330px;
height:100%;
background:#000;
transition:0.3s ease-in-out;
-webkit-transform:translateX(-105%);
transform:translateX(-105%);
}
#nav-content ol{
padding:10%;
}
#nav-content ol li{
font-size:15px;
line-height:3.5em;
padding-left:1.0em;
text-align:left;
float:none;
letter-spacing:0.1em;
}
#nav-content ol li a:link{
color:#FFF;
text-decoration:none;
}
#nav-content ol li a:hover{
color:#FFF;
text-decoration:none;
}
#nav-content ol li a:visited{
color:#FFF;
text-decoration:none;
}
#nav-input:checked ~ #nav-close{
display:block;
opacity:0.5;
}
#nav-input:checked ~ #nav-content{
-webkit-transform:translateX(0%);
transform:translateX(0%);
box-shadow:6px 0 25px rgba(0,0,0,.15);
}
}
@media all and (min-width:701px){
.max{
display:none;
}
}
@media all and (max-width:700px){
.min{
display:none;
}
}








/*==================================================================

FOOTER

==================================================================*/
footer{
position:fixed;
top:auto;
right:auto;
bottom:10px;
left:10px;
z-index:9998;
}
.twitter{
width:100px;
}
.twitter img{
width:100%;
height:auto;
}
.twitter{
position:relative;
display:inline-block;
overflow:hidden;
}
.twitter:before{
content:"";
background-color:rgba(255,255,255,0.4);
height:100%;
width:100%;
display:block;
position:absolute;
top:0;
left:-160%;
transform:skewX(-45deg) translateX(0);
}
.twitter:hover:before{
transform: skewX(-45deg) translateX(320%);
transition: all 0.4s ease-in-out;
}
@media all and (min-width:1001px){
.maximum{
display:none;
}
}
@media all and (max-width:1000px){
.minimum{
display:none;
}
}
.twitter_sp{
width:40%;
}
.twitter_sp img{
width:100%;
height:auto;
}