@charset "UTF-8";

/*!
Theme Name: Simplicity2 child
Template:   simplicity2
Version:    20161002
*/

/* Simplicity子テーマ用のスタイルを書く */

/* フォントのスタイル */
body {
font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic'  
}

/* 見出しのスタイル */
.article h2 {
    font-size: 150%;
    padding: 12px 0 12px 13px;
    color: #4D517D;/*文字色*/
    line-height: 1.6em;
    border-left: #4D517D solid 9px;/*見出しの左側に線*/
    margin-left: 0.5px;
    margin-bottom: 40px;
  }

.article h3 {
position: relative;
padding-left: 1.2em;/*アイコン分のスペース*/
line-height: 1.4;
border-bottom:0;/*デフォルトのスタイルを消す*/
padding:1px 30px;
color: #555;/*文字色*/
}

.article h3:before {
font-family: FontAwesome;/*アイコンフォント*/
content: "\f00c";/*アイコンのユニコード*/
position: absolute;/*絶対配置*/
font-size: 1em;/*サイズ*/
left: 0;/*アイコンの位置*/
top: 0;/*アイコンの位置*/
color: #6C9FCE; /*アイコン色*/
}

.article h4 {
 font-size: 1.1em;/*文字サイズ*/
 border-bottom: solid 1px;/*下線*/
 color: #454545;/*色*/
 font-weight: bold;/*太字に*/
}

/* バッジのスタイル */
.sankou,
.sanko,
.reffer,
.ref{
  color: #fff;/*文字色*/
  background-color: #fd9292;/*背景色*/
  padding: 2px 6px 1px;/*内側の余白*/
  border-radius: 3px;/*角丸*/
  font-size: 13px;/*文字サイズ*/
  letter-spacing: 0.07em;/*文字間*/
  margin-right: 6px;/*バッジの右側に余白*/
}

/* ボックスのスタイル */
.information::before, .question::before, .alert::before {
    font-family: "FontAwesome";
    font-size: 45px;
    position: absolute;
    top: 20px;
    left: 13px;
    color: #a5d7ff;
    background-color: #f0f7ff;
}

.information, .question, .alert {
    background-color: #f0f7ff;
    padding: 20px 20px 20px 72px;
    border-radius: 5px;
    position: relative;
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
}

/* 引用のスタイル */

/* 引用のスタイル - 全体 */
blockquote {
    position: relative;
    padding: 10px 15px 10px 50px;/*内側の余白*/
    box-sizing: border-box;
    font-style: italic;/*斜体に*/
    border: solid 2px #3ca5d4;/*外枠*/
    color: #464646;/*外枠の色*/
    background-color: #fff;/*背景色*/
}

/* 引用のスタイル - 左上アイコン */
blockquote:before{
    display: inline-block;
    position: absolute;
    top: 20px;/*引用アイコンの位置*/
    left: 15px;/*引用アイコンの位置*/
    vertical-align: middle;
    content: "\f10d";/*アイコンのユニコード*/
    font-family: FontAwesome;/*アイコンフォント*/
    color: #3ca5d4;/*アイコンの色*/
    font-size: 25px;/*アイコンの大きさ*/
    line-height: 1;
}

/* 引用のスタイル - 内側の文章 */
blockquote p {
    padding: 0;
    margin: 10px 0;
    line-height: 1.7;
}

/* 引用のスタイル - 引用元 */
blockquote cite {
    display: block;
    text-align: right;/*右寄せ*/
    color: #888888;/*文字色*/
    font-size: 0.9em;/*文字サイズ*/
    margin-bottom: 10px;
    margin-right: 40px;
}

/* 引用のスタイル - 右下アイコン */
blockquote:after{
    display: inline-block;
    position: absolute;
    bottom: 20px;
    right: 15px;
    vertical-align: middle;
    text-align: center;
    content: "\f10e";
    font-family: FontAwesome;
    color: #3ca5d4;
    font-size: 25px;
    line-height: 1;
}

/* リストのスタイル（li） */

/* リストのスタイル（li） - リスト全体 */
ul ol {
  margin-top: 20px;
  margin-bottom: 30px;
}

#the-content > ul li,#the-content > ol li {
  margin: 0 0 7px;
  line-height: 1.7;
  position: relative;
  left: -10px;
}

/* リストのスタイル（li） - 順序なしリスト */
#the-content > ul > li{
  list-style-type: none;
}

#the-content > ul > li:before {
  content: '';
  width: 6px;
  height: 6px;
  display: inline-block;
  border-radius: 100%;
  background: skyblue;/*ポチの色*/
  position: relative;
  left: -15px;
  top: -3px;
}

/* リストのスタイル（li） - 入れ子リスト */
#the-content >ul li>ul{
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;
}

#the-content >ul li>ul>li:before{/*疑似要素*/
  font-family: FontAwesome;
  content: "\f138";/*アイコンの種類*/
  position: absolute;
  left : -1.5em;/*左端からのアイコンまでの距離*/
  color: #2d8fdd;/*アイコン色*/
  font-size: 0.9em;
  padding-top: 0.15em;
}

/* リストのスタイル（li） - 以下、infomationボックスなどの中にリストを書く場合 */
.information > ul li,information > ol li {
  margin: 0 0 7px;
  line-height: 1.7;
  position: relative;
  left: -10px;
}

.information > ul > li{
	list-style-type: none;
}

.information > ul > li:before {
	content: '';
	width: 6px;
	height: 6px;
	display: inline-block;
	border-radius: 100%;
	background: skyblue;
	position: relative;
	left: -15px;
	top: -3px;
}

.information > ul li>ul{
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;
}

.information > ul li>ul>li:before{/*疑似要素*/
  font-family: FontAwesome;
  content: "\f138";/*アイコンの種類*/
  position: absolute;
  left : -1.5em;/*左端からのアイコンまでの距離*/
  color: #2d8fdd;/*アイコン色*/
  font-size: 0.9em;
  padding-top: 0.15em;
}

/* 順序つきリストのスタイル（ol） */
#the-content >ol{
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding:0.5em;
  background: #f5faff;
  border-radius: 5px;
  border: dotted 1px #5c9ee7;
}
#the-content >ol li{
  position: relative;
  padding-left: 35px;
  line-height: 1.5em;
  padding: 0.5em 0.5em 0.5em 35px;
}

#the-content >ol li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*以下数字のデザイン変える*/
  display:inline-block;
  background: #5c9ee7;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 15px;
  border-radius: 50%;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align:center;
  /*以下 上下中央寄せのため*/
  top: 0.4em;
  /*-moz-transform: translateY(-1.55em);
  	-webkit-transform: translateY(-1.55);
  	-o-transform: translateY(-1.55);
  	-ms-transform: translateY(-1.55);
  	transform: translateY(-1.55);*/
}

/* シェアボタンのスタイル */

/* シェアボタンのスタイル - シェアボタン均等割り */
.sns-group-viral ul {
	  display: flex; 
}
/* シェアボタンのスタイル - SNSの名称部分を非表示 */
.icon-hatena::after, .icon-googleplus::after, .icon-facebook::after, .icon-twitter::after, .icon-pocket::after, .icon-line::after, .icon-feedly::after {
    display: none;
}
ul.snsbs li a{
  padding: 8px 6px 3px 6px;
  }
.sns-group-viral ul.snsb li a{
  border-radius: 4px;
  font-size: 19px;
}

/* シェアボタンのスタイル - 色を変更 */
ul.snsbs a.twitter-btn-icon-link{background-color:#74c1f8;}
ul.snsbs a.facebook-btn-icon-link{background-color:#6680d8;}
ul.snsbs a.google-plus-btn-icon-link{background-color:#fd6969;}
ul.snsbs a.hatena-btn-icon-link{background-color:#6eaff3;}
ul.snsbs a.pocket-btn-icon-link{background-color:#ff6d82;}
ul.snsbs a.line-btn-icon-link{background-color:#00c600;}
ul.snsbs a.evernote-btn-icon-link{background-color:#51b125;}
ul.snsbs a.feedly-btn-icon-link{background-color:#9ade79;}
ul.snsbs a.push7-btn-icon-link{background-color:#eeac00;}

/* シェアタイトルのスタイル */
.sns-share-msg {
    margin-bottom: -20px;
    font-size: medium;
    letter-spacing: 0.1em;
    /* text-align: center; */
    font-weight: bold;
    color: #256198;
}

/* サイドバーの見出し背景を修正 */
#sidebar h3 {
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  border-radius: 5px;
  background: #10ABA6;
  font-weight: bold;
  color: #fff;
}

/* 記事間に線を引く */
#main .entry {
  border-bottom: 1px solid #F0F0F0;
  padding-bottom: 15px;
}

/* 関連記事間に線を引く */
#main .related-entry {
  border-bottom: 1px solid #F0F0F0;
  padding-bottom: 10px; 
}

/* WordPress Popular Posts 順位の色変更 */
.wpp-list li:nth-child(1)::before {
  background-color: rgba(255,88,196,0.9);
}
.wpp-list li:nth-child(2)::before {
  background-color: rgba(245,171,31,0.9);
}
.wpp-list li:nth-child(3)::before {
  background-color: rgba(255,121,37,0.8);
}
.wpp-list li:nth-child(4)::before {
  background-color: rgba(94,185,77,0.8);
}
.wpp-list li:nth-child(5)::before {
  background-color: rgba(94,185,77,0.8);
}

/* WordPress Popular Posts 区切り線 */
.wpp-list li {
  margin:10px 0;
  border-bottom:1px solid #CCC;
}

/* 目次のスタイル */
#toc_container ul>li>ul>li {
    font-size: 94% !important;
}

#toc_container p.toc_title+ul.toc_list>li {
 margin-bottom: 0.1em;
 padding-bottom: 0.4em;
}

#toc_container p.toc_title+ul.toc_list {
    margin-top: 1em;
    margin-right: 0.4em;
}

#toc_container {
 border: none !important;
 border-radius: 9px;
 margin-top: 30px;
}

#toc_container li {
 padding-left: 1em !important;
 line-height: 1.8em;
}

#toc_container ul ul {
 margin-bottom: 10px;
}

.toc_number {
 margin-left: -0.5em;
 margin-right: 0.5em;
 font-family: 'Didot', "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "游明朝体", "Yu Mincho", YuMincho, serif;
 font-style: italic;
 font-weight: 200;
}

#toc_container p.toc_title {
    text-align: center;
    font-weight: 700;
    margin: 0;
    padding: 0;
    letter-spacing: 0.07em;
    color: #256198;
    font-family: 'Open Sans';
}

/* コメント欄の項目を非表示 */
.comment-notes {display: none;}
.comment-form-email {display: none;}
.comment-form-url {display: none;}
.form-allowed-tags {display: none;}

/* ロゴ画像のサイズ変更 */
img.site-title-img {
  width: 450px;
  height: auto;
}

/* 広告を中央揃えにする */
.ad_center {
	margin: 0 auto;
	text-align: center;
}

/* ブロック要素の広告を横並びにする */
.ad_float01 {
    float: left; /*広告を左に寄せ、次の広告を右に回り込ませる*/
    margin-right: 5px; /*広告の右側に余白を作る*/
}

.ad_float02 {
    float: left; /*広告を左に寄せ、次の広告を右に回り込ませる*/
}

.ad_float03 {
 clear: both; /*回り込みを解除させる*/
}

/* インフォ情報用dlタグのスタイル */
dl.infolist dt {
    float: left;
    clear: left;
    width: 7em;
}

dl.infolist dd {
    padding-left: 7em; /*dtの幅以上のpaddingをとる*/
	border-bottom: 1px solid #ccc;
}

/* テーブルのデザイン */
.table02{
  box-sizing: border-box; /*余白の大小で横幅が変動しないようにする*/
  border-collapse: collapse; /*枠線と枠線の隙間を無くす*/
  text-align: center; /*配置*/
  width: 100%; /*横幅比率*/
}
.table02 th, .table02 td{
  padding : 5px 18px; /*上下と左右の余白*/
  border: solid 1px #000000; /*枠線*/
  color: #000000; /*文字色*/
}

.table02 th{
  background-color: #fffaf0; /*背景色*/
  width: 42%; /*横幅比率*/
}

.table02 td{
  background-color: #ffffff; /*背景色*/
  width: 57%; /*横幅比率*/
}

/* グローバルメニューのホバー時の線と文字の色を変更*/
#navi ul li a:hover{
  color: #4394de !important;
  background-color:white;
  border-bottom: 2px #4394de  
}
#navi ul li a:before{
   background: #4394de !important;
}
#navi ul,#navi{
 background-color: #202035;
}

#navi ul,#navi li {
 color: #fff;
 position: relative;
 height: 100%;
}

#navi ul li a{
 vertical-align: text-bottom;
 height: 100%; 
 color: #fff;
 text-transform: uppercase;
 letter-spacing: 0.13em;
}

#navi ul > li{
  position: relative;
  padding-top: 5px;
  padding-bottom: 3px;
  display: inline-block;
  vertical-align: bottom;
  line-height: 100%;
}

/* アフィリタグのテキストリンクを改行を無くす */
.img-inline > img {
       display: inline !important;
}

/************************************
** TOPへ戻るボタン（Go to top）
************************************/
#page-top{
  position:fixed; /*ボタンの配置場所を固定*/
  display:none;
  right: 20px; /*右からのボタンの配置場所を指定（デフォルトは20px）*/
  bottom: 120px; /*下からのボタンの配置場所を指定（デフォルトは50px）*/
}

#page-top a{
  color:#fff;
  padding: 7px;
  text-decoration:none;
  display:block;
  cursor:pointer;
  text-align:center;
  border-radius: 50%;
  font-size:18px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  background-color: rgba(0, 0, 0, 0.22);
}