/*
  Name: Customize
*/

/* 追加
-------------------------------------------------------------*/
/* .article H2～H5 */
/*
.article h2 {
  border: none;
  background: #333;
  color: #fff;
}
.article h3 {
  border-left: none;
  border-top: 2px solid #777;
  border-bottom: 2px solid #777;
  padding-top: 10px;
  padding-bottom: 10px;
}
.article  h4{
  border: none;
  background: #666;
  color: #fff;
  padding-left: 6px;
}
.article  h5{
  border-left: 4px solid #777;
  border-bottom: 1px solid #ccc;
  padding-left: 8px;
}
******************************/
/*
.article h2 {
  border: none;
  background: #333;
  color: #fff;
  padding-top: 15px;
  padding-bottom: 15px;
}
.article h3 {
  padding-bottom: 5px;
  border-bottom: 3px solid #a7a7a7;
}
******************************/
/*
.article h1 {
  margin-left: -10px;
}
.article h2 {
  border: none;
  border-bottom: 3px solid #c7c7c7;
  padding-left: 20px;
  padding-bottom: 10px;
}
.article h3 {
  border: none;
  border-radius: 5px;
  background: #eee;
  _color: #fff;
  margin-left: -10px;
  margin-right: -10px;
  padding-left: 12px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.article h4 {
  color: #555;
  padding-bottom: 5px;
  border-bottom: 2px solid #d7d7d7;
}
*/
.article h2 {
  border: none;
  background: #eee;
  padding-top: 15px;
  padding-bottom: 15px;
}
.article h3 {
  padding-bottom: 5px;
  border-bottom: 3px solid #666;
}
.article h4 {
  color: #555;
  padding-bottom: 5px;
  border-bottom: 2px solid #a7a7a7;
}

/************************************
 * ボディ
************************************/
/*
body {
  background-color: #fafafa;
}
*/

/************************************
 * ヘッダー
************************************/
#header {
  background-color: #fff;
}
/************************************
 * グローバルナビメニュー
************************************/

#navi {
  border-top: 2px solid #333;
  border-bottom: 2px solid #333;
  background-color: #333;
}

#navi ul {
  border: none;
  background: none;
}

#navi ul li a {
  color: #fff;
}

#navi ul li a:hover {
  background-color: #888;
}

#navi ul.sub-menu,
#navi ul.children {
  border-color: #555;
  background-color: #555;
}
/*
#navi .sub-menu li,
#navi .children li {
  height: auto;
}

#navi .sub-menu li a,
#navi .children li a {
  padding: 14px 10px;
}
*/

/************************************
 * サイドバー
************************************/
#sidebar h3{
  /*line-height: 30px;*/
  /*font-size: 16px;*/
/*
  color: #fff;
  background-color: #666;
  padding-left: 12px;
  padding-top: 12px;
  padding-bottom: 12px;
  -webkit-border-top-left-radius: 6px;
  -webkit-border-top-right-radius: 6px;
  -webkit-border-bottom-right-radius: 6px;
  -webkit-border-bottom-left-radius: 6px;
  -moz-border-radius-topleft: 6px;
  -moz-border-radius-topright: 6px;
  -moz-border-radius-bottomright: 6px;
  -moz-border-radius-bottomleft: 6px;
*/
/*
  border-top: 2px solid #555;
  border-bottom: 2px solid #555;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-top: 12px;
  padding-bottom: 12px;
*/

  padding: 10px;
  _color: #fff;
  background-color: #eee;
/*
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
*/
}

/************************************
 * インフォメーション（情報）ボックスの色
************************************/
.information{
  background-color: #ebf1f4 !important;
}

.information::before{
  color: #b4d6ea !important;
}

/************************************
 * キーボードキーのボックス
************************************/
.keyboard-key {
  margin-left: 2px;
  margin-right: 2px;
}

/************************************
 * 記事下広告右側
************************************/
.ad-right{
  /* Widthが広がると中央に余白ができるので右寄せを左寄せにしておく
  float:right;
  */
  float:left;
  margin-left:2px;
  width:336px;
  /* 幅を固定しない指定をしても336pxのままなので戻す
  width:initial;
  min-width:336px;
  */
}

/*-------------------------------------------------------------
   独自スタイル
-------------------------------------------------------------*/

/************************************
 * テーブル揃え
************************************/
.article table .lt{
  text-align: left;
}
.article table .ct{
  text-align: center;
}
.article table .rt{
  text-align: right;
}

/************************************
 * 前景色
************************************/
.article .fc-red{
  color: #f00;
}
.article .fc-orange{
  color: #f60;
}
.article .fc-yellow{
  color: #EFD139;
}
.article .fc-green{
  color: #060;
}
.article .fc-blue{
  color: #00f;
}
.article .fc-violet{
  color: #50f;
}
.article .fc-purple{
  color: #a0f;
}
.article .fc-pink{
  color: #f0c;
}
.article .fc-gray{
  color: #666;
}


/************************************
 * 背景色
************************************/
.article .bc-red{
  background-color: #fee;
}
.article .bc-orange{
  background-color: #FFE5D6;
}
.article .bc-yellow{
  background-color: #FFF3C1;
}
.article .bc-green{
  background-color: #efe;
}
.article .bc-blue{
  background-color: #eef;
}
.article .bc-violet{
  background-color: #E3D6FF;
}
.article .bc-purple{
  background-color: #F1D6FF;
}
.article .bc-pink{
  background-color: #FFD6F6;
}
.article .bc-gray{
  background-color: #eee;
}


/************************************
 * 太字
************************************/
.article .bold{
  font-weight: bold;
}

/************************************
 * 強調
************************************/
.emphasize {
  color: #004E5B;
  font-weight: bold;
/*
  margin: 2px 0;
  padding: 10px;
*/
}

/************************************
 * ボックス
************************************/
/* ボックス 1 */
.box1 {
  font-weight: bold;
  margin: 2px 0;
  padding: 10px 5px;
  border: solid 1px #333;
  background-color: #f9f9f9;
  color: #333;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}

/************************************
 * 文字列の折り返し
************************************/
.wb-all {
	word-break: break-all;
}

/************************************
 * 書式グループボックス
************************************/
.selector-format-box {
    border: 2px solid #666;
    margin: 2em 0;
    padding: 1em;
    position: relative;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
}
.selector-format-box::before {
    background-color: #fff;
    color: #666;
    content: "Format";
    font-weight: bold;
    left: 1em;
    padding: 0.5em;
    position: absolute;
    top: -1.5em;
}


/************************************
 * 強調ボックス
************************************/

.gray-box,
.gray-box-with-border,
.dark-gray-box {
  padding: 10px;
  background: #f5f5f5;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
}

.gray-box-with-border {
  border: 1px solid #ccc;
}

.dark-gray-box {
  background: #555;
  color: #fff;
}


/************************************
 * キャプション
************************************/

.caption {
  border-left: 4px solid #999;
  padding-left: 6px;
  font-weight: bold;
}

/************************************
 * ヘッダー
************************************/

.heading {
  font-size: 1.5rem;
  font-weight: bold;
  border-left: solid 8px #999;
  border-bottom: solid 1px #bbb;
  margin-top: 30px;
  padding-left: 12px;
  line-height: 3rem;
}


/************************************
 * Bootstrap3 like な指定
************************************/

.bsl-primary {
  background-color: #428BCA;
  color: #FFFFFF;
}

.bsl-success {
  background-color: #DFF0D8;
  border-color: #D6E9C6;
}

.bsl-info {
  background-color: #D9EDF7;
  border-color: #BCE8F1;
}

.bsl-warning {
  background-color: #FCF8E3;
  border-color: #FAEBCC;
}

.bsl-danger {
  background-color: #F2DEDE;
  border-color: #EBCCD1;
}

/*
-----------------------------------------------------*/

/************************************
 * 記事中サンプル
************************************/
/* HTML サンプル */
.html-sample {
	margin: 0px;
	padding: 5px;
	color: #666;
	width: 300px;
	border: solid 1px #666;
}
/* ヘッダー */
.html-sample .header {
	padding: 10px;
	font-size: 150%;
	color: #fff;
	background: #666;
	font-weight: bold;
	text-align: center;
}
/* 条件 */
.html-sample .condition-panel {
	margin-top: 5px;
	margin-bottom: 5px;
}
/* 条件キャプション */
.html-sample .caption {
	margin: 10px 0;
	padding: 5px;
	font-size: 120%;
	font-weight: bold;
	border-left: solid 10px #666;
	border-bottom: solid 1px #999;
}
/* アイテムキャプション */
.html-sample .condition-panel .item-caption {
	padding: 6px 10px;
	color: #fff;
	background: #999;
	font-weight: bold;
	border-radius: 5px 5px 5px 5px;
	-moz-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
}
/* アイテム */
.html-sample .condition-panel .item {
	padding: 10px 5px;
	_border: solid 1px #999;
}
/* ボタンエリア */
.html-sample .button-panel {
	margin: 10px 0;
}
/* ボタン */
.html-sample .button-panel button {
	margin: 0;
	padding: 5px 20px;
	background: #666;
	color: #fff;
	border: solid 1px #666;
	font-size: 110%;
	font-weight: bold;
	border-radius: 5px 5px 5px 5px;
	-moz-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
}
.html-sample .button-panel button:hover {
	cursor: pointer;
}
/* ライン */
.html-sample hr {
	margin: 0;
	height: 1px;
	border: none;
}
.html-sample hr.solid {
	border-top: solid 1px #999;
}
.html-sample hr.dotted {
	border-top: dotted 1px #999;
}
.html-sample hr.doshed {
	border-top: doshed 1px #999;
}
/* 結果エリア */
.html-sample .result-panel {
	margin-top: 10px;
}
/* 結果タイトル */
.html-sample .result-panel .result-caption {
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 10px;
	font-size: 110%;
	color: #333;
	background-color: #ddd;
	font-weight: bold;
}
/* 結果テーブル */
.html-sample .result-panel table {
	border-collapse: collapse;
}
.html-sample .result-panel th {
	border: solid 1px #666;
	color: #fff;
	background: #999;
}
.html-sample .result-panel td {
  border: solid 1px #666;
}
.html-sample .result-panel th, td {
  padding: 5px 5px;
}

/*********************************************************/
/* 横幅拡張 */
/*********************************************************/
/* 1111px以上はサイドバーありなので1210px以上から100pxずつ拡張 */

/* 1210px以上で100px拡張 */
@media screen and (min-width:1210px){
  div#header-in, div#navi-in, div#body-in, div#footer-in{
    /*width:1070px;*/
    width:1170px;
  }
  div#main {
    /*width:740px;*/
    width:840px;
  }
}
/* 1310px以上で200px拡張 */
@media screen and (min-width:1310px){
  div#header-in, div#navi-in, div#body-in, div#footer-in{
    width:1270px;
  }
  div#main {
    width:940px;
  }
}
/* 1410px以上で300px拡張 */
@media screen and (min-width:1410px){
  div#header-in, div#navi-in, div#body-in, div#footer-in{
    width:1370px;
  }
  div#main {
    width:1040px;
  }
}
/* 1510px以上で400px拡張 */
@media screen and (min-width:1510px){
  div#header-in, div#navi-in, div#body-in, div#footer-in{
    width:1470px;
  }
  div#main {
    width:1140px;
  }
}
/* 1610px以上で500px拡張 */
@media screen and (min-width:1610px){
  div#header-in, div#navi-in, div#body-in, div#footer-in{
    width:1570px;
  }
  div#main {
    width:1240px;
  }
}
/* 1710px以上で600px拡張 */
/*
@media screen and (min-width:1710px){
  div#header-in, div#navi-in, div#body-in, div#footer-in{
    width:1670px;
  }
  div#main {
    width:1340px;
  }
}
*/
/* 1810px以上で700px拡張 */
/*
@media screen and (min-width:1810px){
  div#header-in, div#navi-in, div#body-in, div#footer-in{
    width:1770px;
  }
  div#main {
    width:1440px;
  }
}
*/
/* 1910px以上で800px拡張 */
/*
@media screen and (min-width:1910px){
  div#header-in, div#navi-in, div#body-in, div#footer-in{
    width:1870px;
  }
  div#main {
    width:1540px;
  }
}
*/
/*********************************************************/

/*--------------------------------------
  タグクラウドのカスタマイズ
--------------------------------------*/
.tagcloud a {
  display: inline-block;
  margin-bottom: 5px;
  padding: 6px 12px;
  color: #2098A8; /* 文字色 */
  text-decoration: none;
  border-radius: 5px; /* 角を少し丸く */
  border: 1px solid #2098A8; 
  background: #FFF; /* 背景色 */
}

.tagcloud a:hover {
  transition: 0.3s;
  background: #D7ECEF; /* マウスホバー時の背景色 */
}

_.tagcloud a:before {
  font-family: "FontAwesome";
  content: "\f02b"; /* 絵文字のコード */
  padding-right: 4px;
}

/*--------------------------------------
  サイドバーウィジェットタイトルのアイコン
--------------------------------------*/

#custom_html-2 h3:before,
#categories-3 h3:before,
#tag_cloud-2 h3:before,
#new_entries-3 h3:before,
#popular_ranking-2 h3:before {
  font-family:"FontAwesome";
  margin-right:7px;
  font-size:120%;
  color:#777;
}

/* 検索 */
#custom_html-2 h3:before {
  content:"\f002";
}

/* カテゴリー */
#categories-3 h3:before {

  content:"\f03a";
  _content:"\f0c9";
  _content:"\f550";
}

/* タグクラウド */
#tag_cloud-2 h3:before {
  content:"\f02b";
}

/* 新着記事 */
#new_entries-3 h3:before {
  content:"\f1ea";
}

/* 人気記事 */
#popular_ranking-2 h3:before {
  content:"\f201";
}

/*--------------------------------------
  Vue.js一覧へのリンク
--------------------------------------*/

.to-vue-js-list {
  font-size:130%;
  display:inline-block;
  margin-top: 30px;
  margin-bottom: 30px;
}

.to-vue-js-list:before {
  _font-family:"FontAwesome";
  margin-right:10px;
  _font-size:130%;
  _content:"\f41f";
  content:" ";
  display:inline-block;
  width:32px;
  height:32px;
  background:url(https://johobase.com/jb/wp-content/uploads/vue-js-icon-32.png);
  background-size:contain;
  vertical-align:middle;
}

/*--------------------------------------
  目次キャプション（Vue.js一覧で使用）
--------------------------------------*/
.vue-table-of-contents {
  font-size:120%;
  font-weight: bold;
  color: #35495e;
}

.vue-table-of-contents:before {
  margin-right:10px;
  content:" ";
  display:inline-block;
  width:24px;
  height:24px;
  background:url(https://johobase.com/jb/wp-content/uploads/table-of-contents-symbol-24.png);
  background-size:contain;
  vertical-align:middle;
}

/*--------------------------------------
  Bulma一覧へのリンク
--------------------------------------*/

.to-bulma-list {
  font-size:130%;
  display:inline-block;
  margin-top: 30px;
  margin-bottom: 30px;
}

.to-bulma-list:before {
  margin-right:10px;
  content:" ";
  display:inline-block;
  width:32px;
  height:32px;
  background:url(https://johobase.com/jb/wp-content/uploads/bulma-icon-32.png);
  background-size:contain;
  vertical-align:middle;
}