@charset "UTF-8";

/*
Theme Name:kayokomanga_theme
Theme url:http://kayokolaboratory.com/manga/
Description:This is my theme.
*/

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

/*base*/
body{
  font-family: "Sawarabi Gothic",sans-serif;
  background:#fcfcfc;
}

a{
  text-decoration:none;
}

a img{
  border:none;
}

/*container*/
div#container{
  width:1021px;
  margin:auto;
}

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

@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{
  margin-bottom:20px;
}

div#header h1{
  font-size:2.5em;
  margin:0;
}

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

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

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

/*navigation*/
div#nav{
  font-size:1.1em;
  height:41px;
  border-top:solid 1px #bbb;
  border-left:solid 1px #bbb;
  margin-bottom:8px;
}

@media screen and (max-width: 900px){
  div#nav{
    height:82px;
  }
}

@media screen and (max-width: 600px){
  div#nav{
    height:246px;
    width:100%;
  }
}

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

div#nav li{
  list-style-type:none;
  float:left;
}

div#nav li a{
  display:block;
  width:169px;
  line-height:40px;
  border-right:solid 1px #bbb;
  border-bottom:solid 1px #bbb;
  color:#000000;
  background:#fff;
  text-align:center;
}

@media screen and (max-width: 1080px){
  div#nav li a{
    width:139px;
  }
}

@media screen and (max-width: 900px){
  div#nav li a{
    width:179px;
  }
}

@media screen and (max-width: 600px){
  div#nav li{
    width:100%;
  }
  div#nav li a{
    width:calc(100% - 1px);
  }
}

div#nav li a:hover{
  background:#eee;
  font-size:1.05em;
}

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

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

div#sidebar ul{
  margin:0;
  padding: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:1.2em;
  background:#eeeeee;
  margin:0;
  padding:2px 8px;
  font-weight:normal;
}

div#sidebar li h2:before{
  content:'|| ';
  font-weight:bold;
  color:#ccc;
}

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

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


/*footer*/
div#footer{
  border-top:solid 1px #999;
  padding:6px 0;
  clear:both;
}

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

/*content*/
div#content{
  width:720px;
  float:left;
}

@media screen and (max-width: 1080px){
  div#content{
    width:540px;
  }
}

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

@media screen and (max-width: 600px){
  div#content{
    width:100%;
  }
}

p.title{
  background:#ddd;
  font-size:1.5em;
  padding:10px;
  border-radius:10px;
  margin:0 15px 15px 0;
}

p.title:before{
  content:'|| ';
  font-weight:bold;
  color:#bbb;
}

/*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:165px;
  height:360px;
  margin-right:15px;
  margin-bottom:15px;
  display:grid;
  grid-template-columns:5px calc(100% - 9px) 4px;
  grid-template-rows: 5px calc(100% - 9px) 4px;
}

div.post div.tile{
  grid-column:1/3;
  grid-row:1/3;
  border:solid 1px #bbb;
  overflow:hidden;
  background:#fff;
  position:relative;
}

div.post div.tile_tr{
  
}

div.post div.tile_r{
  background:#bbb;
}

div.post div.tile_bl{
  
}

div.post div.tile_b{
  grid-column:2/4;
  background:#bbb;
}

div.post h2{
  display:block;
  height:2em;
  font-size:1em;
  color:#ccc;
  margin:5px;
  
}

div.post h2:before{
  content:"|| "
}

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

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

div.post p{
  margin:0;
}

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

div.post p.postcat{
  text-align:right;
  font-size:0.7em;
  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%;
  height:calc(100% - 87px);
  text-align:center;
}

div.post div.postcont p{
  height:100%;
}

div.post div.postcont img{
  max-width:160px;
  max-height:225px;
  width:auto;
  height:auto;
}

div.post div.postcont a.more-link{
  display:block;
  position:absolute;
  bottom:0px;
  left:28px;
  width:100px;
  background:#ddd;
  margin:10px 0;
  padding:5px 0;
  border-radius:3px;
  color:#000;
}

div.post div.postcont a.more-link:hover{
  background:#bbb;
}

/*post_single*/
div.post_single{
  margin-right:15px;
  margin-bottom:15px;
  display:grid;
  grid-template-columns:5px calc(100% - 9px) 4px;
  grid-template-rows: 5px calc(100% - 9px) 4px;
}

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

div.post_single div.tile{
  grid-column:1/3;
  grid-row:1/3;
  border:solid 1px #bbb;
  background:#fff;
  position:relative;
}

div.post_single div.tile_tr{
  
}

div.post_single div.tile_r{
  background:#bbb;
}

div.post_single div.tile_bl{
  
}

div.post_single div.tile_b{
  grid-column:2/4;
  background:#bbb;
}

div.post_single h2{
  display:block;
  height:1.5em;
  font-size:1.5em;
  color:#000;
  font-weight:normal;
  margin:5px;
  
}

div.post_single h2:before{
  content:"|| ";
  color:#ccc;
  font-weight:bold;
}

div.post_single p{
  margin:0;
}

div.post_single p.postinfo{
  color:#999;
  font-size:0.9em;
  margin-top:12px;
  margin-left:5px;
}

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

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

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

div.post_single div.postcont{
  bottom:0;
  width:100%;
  max-width:300px;
  text-align:center;
  margin:0 auto 16px;
}

div.post_single div.postcont a{
  color:#999;
  text-decoration:underline;
}

div.post_single div.postcont a:hover{
  color:#666;
}

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

/*post_trip*/
div.post_trip{
  width:calc(100% - 15px);
  height:120px;
  margin-right:15px;
  margin-bottom:15px;
  display:grid;
  grid-template-columns:5px calc(100% - 9px) 4px;
  grid-template-rows: 5px calc(100% - 9px) 4px;
}

div.post_trip div.tile{
  grid-column:1/3;
  grid-row:1/3;
  border:solid 1px #bbb;
  overflow:hidden;
  background:#fff;
  position:relative;
}

div.post_trip div.tile_tr{
  
}

div.post_trip div.tile_r{
  background:#bbb;
}

div.post_trip div.tile_bl{
  
}

div.post_trip div.tile_b{
  grid-column:2/4;
  background:#bbb;
}

div.post_trip h2{
  float:left;
  width:160px;
  height:114px;
  font-size:1.2em;
  color:#ccc;
  margin:5px;
}

div.post_trip h2:before{
  content:"|| "
}

div.post_trip h2 a{
  color:#000;
  font-weight:normal;
}

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

div.post_trip div.trip_date{
  height:0;
  color:#999;
  font-size:0.75em;
  position:relative;
  top:30px;
  left:-160px;
}

div.post_trip p{
  padding:0;
  margin:0;
}

div.post_trip img{
  float:right;
  width:auto;
  max-width:200px;
  height:114px;
}

a.tweet{
  border-radius:5px;
}

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;
}

/*Tsukeyakiba*/
figure{
  margin:0;
}