@charset "UTF-8";

/*
Theme Name:kayokoblog_theme
Theme url:http://kayokolaboratory.com/blog/
Description:This is my theme.
*/

/*clear*/
div.clear{
  clear:both;
}

/*base*/
body{
  font-family: "Sawarabi Gothic", serif;
  background:#fff;
  background-image:radial-gradient(#ddd 1px, transparent 0), radial-gradient(#ddd 1px, transparent 0);
  background-position:0 0,5px 0;
  background-size:10px 5px;
  margin:0;
}

a{
  text-decoration:none;
}

a img{
  border:none;
}

/*container*/
div#container{
  width:851px;
  margin:auto;
  background:#fff;
  border-left:#ddd solid 1px;
  border-right:#ddd solid 1px;
}

@media screen and (max-width: 900px){
  div#container{
    width:541px;
  }
}

@media screen and (max-width: 600px){
  div#container{
    width:calc(100% - 20px);
    min-width:360px;
  }
}

/*header*/
div#header{
  background:#cde;
  margin-bottom:20px;
}

div#header h1{
  font-size:1.8em;
  font-weight:normal;
  margin:0;
  margin-left:10px;
}

div#header h1 a{
  color:#333;
}

div#header p#desc{
  font-size:1em;
  color:#888;
  margin:0 10px 5px;
}

div#subinfo{
  text-align:right;
  margin:-32px 0 5px;
}

/*navigation*/
div#nav{
  background:#eee;
  margin-bottom:8px;
  border-top:#ddd solid 1px;
  border-bottom:#ddd solid 1px;
}

div#nav ul{
  margin:0;
  padding:0;
}

div#nav li{
  display:inline-block;
  list-style-type:none;
}

div#nav li a{
  width:100px;
  background:#eee;
  text-align:center;
  color:#000;
  padding:0 15px 1px;
}

div#nav li a:hover{
  background:#ddd;
}

/*sidebar*/
div#sidebar{
  width:300px;
  float:right;
  margin-right:10px;
  margin-top:20px;
}

@media screen and (max-width: 900px){
  div#sidebar{
    width:calc(100% - 20px);
    float:none;
    margin-left:10px;
  }
}

div#sidebar ul{
  padding:0;
  margin:0;
}

div#sidebar li{
  list-style-type:none;
  margin-bottom:20px;
}

div#sidebar li a{
  color:#999;
}

div#sidebar li a:hover{
  color:#333;
}

div#sidebar li h2{
  font-size:1em;
  background:#cde;
  border-left:#8ac solid 8px;
  margin:0;
  padding:2px 8px;
  font-weight:normal;
}

div#sidebar li ul{
  margin-top:5px;
}

div#sidebar li ul li{
  margin-bottom:5px;
  margin-left:10px;
}


/*footer*/
div#footer{
  background:#ddd;
  padding:6px 0;
  clear:both;
}

div#footer p{
  font-size:0.8em;
  font-style:normal;
  text-align:center;
  margin:0;
}

/*content*/
div#content{
  width:520px;
  float:left;
  margin:0 10px;
}

@media screen and (max-width: 900px){
  div#content{
    float:none;
  }
}

@media screen and (max-width: 600px){
  div#content{
    width:calc(100% - 20px);
    float:none;
    margin-left:10px;
  }
}

p.title{
  background:#cde;
  font-size:1.5em;
  padding:3px 10px;
  border:solid 1px #8ac;
  border-left:solid 20px #8ac;
  border-radius:5px;
  margin:0 0 15px;
}

/*pagenation*/
div.pagenation{
  padding-bottom:10px;
}

span.oldpage,span.newpage,a.page-numbers{
  background:#fff;
  border:solid 1px #999;
  border-radius:5px;
  padding:3px 6px;
}

span.page-numbers.current{
  background:#ddd;
  border:solid 1px #999;
  border-radius:5px;
  padding:3px 6px;
}

span.oldpage:hover,span.newpage:hover,a.page-numbers:hover{
  background:#eee;
}

span.newpage{
  float:left;
}

span.oldpage{
  float:right;
  margin-right:15px;
}

@media screen and (max-width: 900px){
  span.oldpage{
    margin-right:0;
  }
}

span.oldpage a,span.newpage a,a.page-numbers{
  color:#000;
}


/*content_single*/
p.pagenation_single{
  margin:0 0 10px;
}

/*post*/
div.post{
  float:left;
  width:100%;
}

div.post h2{
  font-size:1.35em;
  background:#cde;
  border-left:#8ac solid 10px;
  margin:20px 0 0;
}

div.post h2 a{
  color:#000;
  font-weight:normal;
  padding-left:5px;
}

div.post h2 a:hover{
  color:#888;
}

div.post p{
  margin:0;
}

div.post p.postinfo{
  color:#999;
  font-size:0.8em;
  margin-left:5px;
}

div.post p.postcat{
  text-align:right;
  font-size:0.8em;
  margin-right:5px;
}

div.post p.postcat a{
  color:#999;
}

div.post p.postcat a:hover{
  color:#666;
}

div.post div.postcont{
  position:relative;
  bottom:0;
  width:100%;
}

div.post div.postcont h3{
  border-left:#8ac solid 10px;
  border-bottom:#8ac solid 1px;
  padding-left:5px;
  margin:30px 0;
}

div.post div.postcont h4{
  border-left:#8ac solid 10px;
  padding-left:5px;
  margin:30px 0;
}

div.post div.postcont p{
  line-height:2;
  margin:1em 0;
  padding-bottom:2em;
}

div.post div.postcont img{
  max-width:100%;
  height:auto;
}

div.post div.postcont figcaption{
  text-align:center;
  color:#333;
  font-size:0.8em;
}

div.post div.postcont a{
  color:#666;
  text-decoration:underline;
}

div.post div.postcont a:hover{
  color:#999;
}

div.post div.postcont iframe{
  width:500px;
  max-width:100%;
}

div.post div.postcont ul{
  padding-left:24px;
}

div.post div.postcont li{
  line-height:2;
}

/*TweetButton*/
a.tweet img{
  margin-bottom:20px;
}

a.tweet:hover>img{
  filter:brightness(80%);
}

/*Ad*/
div.ad p{
  text-align:center;
  font-size:0.9em;
  color:#999;
  margin:0;
}

.before_post{
  max-width:520px;
  height:60px;
}

@media(max-width: 600px){
  .before_post{
    max-width:100%;
    height:60px;
  }
}