@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Monda:400,700);

/************************ 
Theme name: VT1
Author: Apolo
Author URI: http://apolo1192.net/
Version: 2.0.0
 ************************/

/************************
目次:
1. 全般
2. ヘッダー
   --1. ヘッダーコンテナ
   --2. ブログタイトル
   --3. メニューバー
3. コンテンツ全般
4. 左カラム
   --1. おすすめ記事
   --2. パンくずリスト
   --投稿、投稿情報: 別CSS
5. 右カラム
6. ソーシャルボタン
7. アドセンス
8. フッター
 ************************/


/**************************** ▼▼ 1. 全般 ▼▼ ***/
* {
 margin: 0;
 padding: 0;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
body {
 background: #ccc url(noise.png);
 font-size: 11pt;
 font-family:'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo UI', Meiryo, 'メイリオ', Verdana, Helvetica, Arial, 'MS UI Gothic', sans-serif;
 word-wrap: break-word;
 overflow-wrap: break-word;
 }
a {
 color:#383c3c;
 text-decoration:none;
 }
a:hover {
 color:#4d5aaf;
 text-decoration:underline;
 }
img {
 border: 0;
 }
img.border {
 border: 4px solid #ddd;
 }

/*** Variable image, video ***/
@media screen and (max-width: 1019px) {
  .post_body img {
    max-width: 100% !important;
    height: auto !important;
  }
  .video {
    position: relative;
    margin-bottom: 30px;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
  }
  .video iframe, .video object, .video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

.red {color: red;}
.green {color: green;}
.blue {color: blue;}
.postscript_ {color:green; font-weight:bold;}
hr { margin: 10px; }

/*** WIDTH ***/
@media screen and (max-width: 339px) { #container, #header-content, #footer-content { width: 96% } }
@media screen and (min-width: 340px) and (max-width: 399px) { #container, #header-content, #footer-content { width: 94% } }
@media screen and (min-width: 400px) and (max-width: 449px) { #container, #header-content, #footer-content { width: 88% } }
@media screen and (min-width: 450px) and (max-width: 549px) { #container, #header-content, #footer-content { width: 85% } }
@media screen and (min-width: 550px) and (max-width: 844px) { #container, #header-content, #footer-content { width: 82% } }
@media screen and (min-width: 845px) and (max-width: 1019px) { #container, #header-content, #footer-content { width: 98% } }
@media screen and (min-width: 1020px) { #container, #header-content, #footer-content { width: 1000px } }

/**************************** ▲▲ 1. 全般 ▲▲ **/



/**************************** ▼▼ 2. ヘッダー ▼▼ ***/

/****************** ▼ 2-1. ヘッダーコンテナ ▼ **/
#header {
 font-family:'Monda','ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo UI', Meiryo, 'メイリオ', Verdana, Helvetica, Arial, 'MS UI Gothic', sans-serif;
 background: #383c3c url(noise.png);
 box-shadow: 0 0 5px #000;
 }
#header a { color: #ffffff; }
#header a:hover { text-decoration: none; }

#header-content {
 margin: 0 auto;
 }

/****************** ▼ 2-2. ブログタイトル ▼ **/
#blogtitle {
 width: 200px;
 line-height: 38px;
 }
#blogtitle a { color: #f6ad49; }
h1 { font-size: 30px; }


/****************** ▼ 2-3. メニューバー ▼ **/
@media screen and (min-width: 1020px) {
    #header {
      height: 38px;
    }
   #blogtitle {
      float: left;
    }
    #header-menubar {
      float: right;
      width: 800px;
    }
}
@media only screen and (min-width: 845px) {
    #header-menubar {
	background-color: #666;
	font-size: 12pt;
	height: 28px;
    }
    #header-menubar li {
	position: relative;
 	float: left;
	list-style-type: none;
	transition: background-color,color,box-shadow, 0.15s ease-out;
    }
    #header-menubar a {
	display: block;
	text-align: center;
	width: 130px;
	line-height:28px;
	transition: background-color,color,box-shadow, 0.15s ease-out;
    }
    #header-menubar a:hover {
	background: #555;
	color:#ffaa00;
    }
    #header-menubar li ul {
	z-index:100;
	position: absolute;
	top:28px;
	float: left;
	list-style-type: none;
	background: #777;
	box-shadow: 1px 1px 3px #000;
    }
    #header-menubar li ul li {
	overflow: hidden;
	height:0;
	transition: background-color,color,box-shadow, 0.15s ease-out;
    }
    #header-menubar li:hover ul li {
	overflow: visible;
	height:28px;
    }
}

#toggle{ 
 display: none;
}

#under-maintenance {   /*** 整備中 ***/
 box-shadow: 1px 1px 3px #000;
 width: 110px;
 display: none;
}

@media only screen and (max-width: 844px) {

#header-menubar li a {
 color: #aaaaaa;      /*** 整備中 ***/
}

    #header { height: 38px; }

    #blogtitle {
      float: left;
      line-height: 38px;
    }

    #header-menubar {
      float: right;
      max-width: 280px;
      width: -webkit-calc(100% - 200px);
      width: calc(100% - 200px);
    }

    #header-menubar {
 	background-color: #666;
 	font-size: 12pt;
	height: 28px;
    }

    .menu-navmenu-container {
	display: none;
    }



#header-menubar ul {
 z-index:100;
 float: left;
 list-style-type: none;
 box-shadow: 1px 1px 3px #000;
 width: 110px;
}


#header-menubar li {
 z-index:100;
 position: relative;
 list-style-type: none;
 transition: background-color,color,box-shadow, 0.15s ease-out;
 }


#header-menubar a {
 background-color: #666;
 display: block;
 text-align: center;
 line-height:28px;
 transition: background-color,color,box-shadow, 0.15s ease-out;
 }
#header-menubar a:hover {
 background: #555;
 color:#ffaa00;
 }


#header-menubar li ul {
 z-index:120;
 position: absolute;
 top:28px;
 float: left;
 list-style-type: none;
 background: #777;
 box-shadow: 1px 1px 3px #000;
 }
#header-menubar li ul {
 z-index:120;
 position: absolute;
 width: 140%;
 top:0px;
 left:-140%;
 float: left;
 list-style-type: none;
 box-shadow: 1px 1px 3px #000;
 }


#header-menubar li ul li {
 z-index:120;
 width: 100%;
 overflow: hidden;
 height:0;
 transition: background-color,color,box-shadow, 0.15s ease-out;
 }
#header-menubar li:hover ul li {
 z-index:120;
 overflow: visible;
 height:28px;
 }

  #toggle{
    display: block;
    position: relative;
  }
  #toggle a{
    display: block;
    position: relative;
    color: #fff;
    text-align: center;
    text-decoration: none;
  }
  #toggle:before {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 13px;
    height: 15px;
    margin-top: -7px;
    background: #38383c url(noise.png);
    z-index: 5;

  }
  #toggle a:after, #toggle a:before {
    z-index: 6;
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 13px;
    height: 3px;
    background: #666;
    transition: background-color,color,box-shadow, 0.15s ease-out;
  }
  #toggle a:after {
    margin-top: -4px;
  }
  #toggle a:before {
    margin-top: 2px;
  }
  #header-menubar a:hover:before,
  #header-menubar a:hover:after {
	background: #555;
  }
}


/**************************** ▲▲ 2. ヘッダー ▲▲ ***/



/**************************** ▼▼ 3. コンテンツ全般 ▼▼ ***/
#container {
 margin: 30px auto;
 }

@media screen and (max-width: 759px) {
    #left-colomn { margin-bottom: 30px; }
}
@media screen and (min-width: 760px) and (max-width: 844px) {
    #left-colomn { margin-bottom: 30px; }
    #sidebar1 {
      float: left;
      width: 49%;
    }
    #sidebar2 {
      float: right;
      width: 49%;
    }
}
@media screen and (min-width: 845px) and (max-width: 1019px) {
    #left-colomn {
      float: left;
      width: 528px; /*** for PS Vita **/
      width: calc(100% - 325px);
    }
    #right-colomn {
      float: right;
      width: 308px;
    } 
}
@media screen and (min-width: 1020px) {
    #left-colomn {
      float: left;
      width: 675px;
    }
    #right-colomn {
      float: right;
      width: 308px;
    } 
}


/*** float解除 ***/
.clearfix:after {
	display:block;
	clear:both;
	height:0px;
	visibility:hidden;
	content:".";
}
.clearfix {
	min-height: 1px; /*IE6、7対策*/
}
* html .clearfix {
	height: 1px;
	/*\*//*/ /*MAC IE5.x対策*/
	height: auto;
	overflow: hidden;
	/**/
}

/**************************** ▲▲ 3. コンテンツ全般 ▲▲ ***/



/**************************** ▼▼ 4. 左カラム ▼▼ ***/

#recommended-posts {
 overflow: hidden;
 padding: 11px;
 margin-bottom: 20px;
 box-shadow:1px 1px 3px #888;
 background-color: #fff;
}
#head-contents {
 padding: 15px; 
 box-shadow:1px 1px 3px #888;
 margin-bottom: 20px;
 background-color: #fff;
}
#main-contents {
 padding: 15px; 
 box-shadow:1px 1px 3px #888;
 background-color: #fff;
}

/****************** ▼ 4-1. おすすめ記事 **/
/*** common ***/
#recommended-posts ul {
 list-style-type: none;
}
#recommended-posts li {
 display: block;
 position: relative;
 float: left;
}
#recommended-posts img {
 width:100%;
 height: auto;
}
#recommended-posts a.string {
 display:block;
 position: absolute;
 overflow: hidden;
 color: #fff;
 background-color:rgba(0,0,0,0.5);
 transition:0.1s ease-out;
}
#recommended-posts li:hover > a.string {
 text-decoration: none;
 height:100%;
 top:0px;
}


@media(min-width: 1020px) {
  #recommended-posts li {
    width: 155px;
  }
  #recommended-posts li:nth-child(n+2) {
    margin-left: 11px;
  }
  #recommended-posts a.string {
    width: 155px;
    line-height:1.4em;
    height:2.8em;
    top: calc(100% - 2.8em);
  }
}

@media (min-width: 550px) and (max-width: 1019px) {
  #recommended-posts li {
    width: calc(25% - 6px);
  }
  #recommended-posts li:nth-child(n+2) {
    margin-left: 8px;
  }
  #recommended-posts a.string {
    width: 100%;
    line-height:1.4em;
    height:4.2em;
    top: calc(100% - 4.2em);
  }
}

@media (max-width: 549px) {
  #recommended-posts li {
    width:  -webkit-calc(50% - 6px);
    width:  calc(50% - 6px);
  }
  #recommended-posts li:nth-child(1), #recommended-posts li:nth-child(2) {
    margin-bottom: 12px;
  }
  #recommended-posts li:nth-child(2n+1) {
    margin-right: 12px;
  }
  #recommended-posts a.string {
    width: 100%;
    line-height:1.4em;
    height:4.2em;
    top: -webkit-calc(100% - 4.2em);
    top: calc(100% - 4.2em);
  }
}
/****************** ▼ 4-2. パンくずリスト **/
.kuzu {
 color:#444444;
 border-bottom: 1px solid #aaa;
 padding:0 0 14px 0;
 margin-bottom: 24px;
}
.kuzu li {display:inline;}

.kuzu li:first-child {
 background: url(sprite-image.png) no-repeat top left;
 background-position: 0 -127px; /* home */
 padding-left: 20px;
}
.bn-category {
 background: url(sprite-image.png) no-repeat top left;
 background-position: 0 2px; /* category */
 padding-left:20px;
}
.bn-tag {
 background: url(sprite-image.png) no-repeat top left;
 background-position: 0 -197px; /* tag */
 padding-left:20px;
}
.bn-post {
 background: url(sprite-image.png) no-repeat top left;
 background-position: 0 -256px; /* page */
 padding-left:19px;
}
.bn-time {
 background: url(sprite-image.png) no-repeat top left;
 background-position: 0 -63px; /* clock */
 padding-left:18px;
}

/**************************** ▲▲ 4. 左カラム ▲▲ ***/



/**************************** ▼▼ 5. 右カラム ▼▼ ***/
#sidebar1 {
 box-shadow:1px 1px 3px #888;
 background-color: #fff;
 padding: 10px 10px 20px;
 margin-bottom: 20px;
}
#sidebar2 {
 box-shadow:1px 1px 3px #888;
 background-color: #fff;
 padding: 10px 10px 20px;
}
#search_bar {
 width: 250px;
 margin: -5px 0 17px -5px;
}
#right-colomn h2 {
 font-weight: normal;
 margin: 24px 0 20px;
 padding-left: 10px;
 border-left: 3px solid #555;
}
#right-colomn ul {
 list-style-type: none;
 }
#right-colomn li ul li {
 margin-top: 5px;
 padding-left: 15px;
 background: url(sprite-image.png) no-repeat top left;
 background-position: 0 -315px; /* raquo */
 }
#right-colomn a {
 color:#4d5aaf;
 text-decoration:none;
}
#right-colomn a:hover {
 text-decoration:underline;
}
/**************************** ▲▲ 5. 右カラム ▲▲ ***/



/**************************** ▼▼ 6. ソーシャルボタン ▼▼ ***/
 /** Twitter Widget **/
#twitter-widget-0 {
 min-width: 100px !important;
 }
 
 /*** Top Social Buttons ***/
.top-button-twitter { width: 94px; }
.top-button-pocket { width: 100px; }
.top-button-facebook { width: 109px !important; height:30px !important; display: inline-block !important;}
.top-button-hatena { width: 120px; }

/*** RESPONSIVE Top Social Buttons ***/
@media screen and (max-width: 339px) {
  #top-social-button { height: 60px; }
  #top-social-button div:first-child { height: 30px; }
  #top-social-button div:last-child { height: 23px; }
  #top-social-button div div { float: left; }
}
@media screen and (min-width: 340px) and (max-width: 699px), (min-width: 846px) and (max-width: 919px) {
  #top-social-button { height: 60px; }
  #top-social-button div:first-child { height: 30px; }
  #top-social-button div:last-child { height: 23px; }
  #top-social-button div div { float: left; }
}
@media screen and (min-width: 920px), (min-width: 700px) and (max-width: 845px) {
  #top-social-button { height: 30px; }
  #top-social-button div { float: left; }
  #top-social-button div div { float: left; }
}

 /** Bottom Social Buttons **/
#bottom-social-button { margin-left: 10px; }
.bottom-button-twitter { width: 58px; }
.bottom-button-pocket { width: 59px; }
.bottom-button-facebook { width: 68px !important; height:80px !important; display: inline-block !important; }
.bottom-button-hatena { width: 78px; }

/*** RESPONSIVE Bottom Social Buttons ***/
@media screen and (max-width: 549px) {
  #bottom-social-button div:first-child { height: 80px; }
  #bottom-social-button div:last-child { height: 80px; }
  #bottom-social-button div div {
    float:left !important;
    margin-right:20px;
  }
}
@media screen and (min-width: 550px) {
  #bottom-social-button div {
    height: 80px;
    float: left;
  }
  #bottom-social-button div div {
    float:left !important;
    margin-right:20px;
  }
}
/**************************** ▲▲ 6. ソーシャルボタン ▲▲ ***/

/**************************** ▼▼ 7. アドセンス ▼▼ ***/
.ad_post_bottom { padding: 4px 0px 16px 0px; }
/*** RESPONSIVE Adsense ***/
@media screen and (max-width: 549px) {
  .ad_post_bottom { text-align:center; }
}
@media screen and (min-width: 550px) {
  .ad_post_bottom { text-align:left; }
}
@media screen and (max-width: 844px) {
.ad_sidebar, .ad_sidebar2 { text-align: center; }
}
@media screen and (min-width: 845px) {
.ad_sidebar, .ad_sidebar2 { text-align: left; }
}
.master_post_advert {
 text-align:center;
 margin: 15px -12px;
 }
.ad_sidebar { margin: -6px -6px 15px; }
.ad_sidebar2 { margin: 15px -6px 0; }
/**************************** ▲▲ 7. アドセンス ▲▲ ***/



/**************************** ▼▼ 8. フッター ▼▼ ***/
#footer {
 overflow: hidden;
 font-family:'Monda','ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo UI', Meiryo, 'メイリオ', Verdana, Helvetica, Arial, 'MS UI Gothic', sans-serif;
 font-size: 12pt;
 font-weight: bold;
 text-shadow: -1px -1px 0px #000; 
 background: #383c3c url(noise.png);
 box-shadow: 0 0 5px #000;
}
#footer-content {
 margin: 0 auto;
}
#footer-menu {
 float: left;
 line-height: 38px;
}
#footer-menu li {
 margin-right: 30px;
 list-style-type: none;
 float: left;
}
#footer-menu li a {
 color: #ddd;
}
#copyright {
 color: #f6ad49;
 float: right;
 line-height: 38px;
}
#copyright a {
 color: #f6ad49;
}
address {
 font-style: normal;
}
/**************************** ▲▲ 8. フッター ▲▲ ***/