@charset "UTF-8";
/*  子テーマ：「base.css」	*/










/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
◆◆◆◆◆　　　　　　　　　　　　◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
◆◆◆◆◆　　　▼テスト開始　　　◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
◆◆◆◆◆　　　　　　　　　　　　◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/




/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
◆◆◆◆◆　　　　　　　　　　　　◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
◆◆◆◆◆　　　▲テスト終了　　　◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
◆◆◆◆◆　　　　　　　　　　　　◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/






















/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆

	■デフォルトの変更（親テーマ設定を変更）
	
	
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/


/*====================================================

	【段落と段落の間の行間を変更】

====================================================*/
.article-body p{
	margin-bottom: 20px;		/*	デフォルト：40px	*/
}



/*====================================================
 	■「アンカー要素のアンダーバーを全て削除
 
 	理由：ツールチップを表示する文字列にアンダーバー（赤線）を付けるので、
 		紛らわしくならないようにするてめ

====================================================-*/
a{
	text-decoration: none !important;		/*	アンダーバーなどの装飾を無に		*/
}


/*
# =================================================================
# 	■フォントの色
# =================================================================
*/


/*===カーソルがリンクテキストから外れている場合=========*/

/*-------------------------
「!important」を付けると、ブログ上の全てのリンクテキストに反映される。
そうなると、次の文字が背景色と区別がし辛くなり、読み難い問題が発生する。
・カテゴリーマークの文字色は、管理画面で設定してある文字色（白色）にも反映されてしまう。
・サイドバーの最近の投稿に於いて、画像上に表示しているタイトル文字（本来は白色）にも反映されてしまう。

一方、「!important」を外すと、次のリンクテキストが反映されなくなる。
�@カテゴリーマークの文字色（白色）
�Aサイドバーの最近の投稿画像上に表示しているタイトル文字（白色）
�B「サイドバーのカテゴリ名（黒色）
�C各記事一覧ページ（トップページ、カテゴリー一覧、アーカイブ一覧、キー検索一覧）のタイトル文字（黒色）
�Dトップページの記事一覧の「続きを読む」の文字

「!important」を外すことにより、�@と�Aは反映されなくなるのでＯＫだが、�Bと�Cは反映されないと、
問題なので、別途反映させるステップを追加することにした。
-------------------------*/
a{
	color: #3A71A5;					/*	暗い青				*/
		-webkit-transition: 2s;
		-moz-transition: 2s;
		-o-transition: 2s;
		-ms-transition: 2s;


}


/*-------------
サイドバーカテゴリーのリンクテキスト
-------------*/
.widget_categories a{
	color: #3A71A5 !important;		/*	サイドバーのカテゴリーのリンクテキストに対し、別途暗い青色を指定		*/
		-webkit-transition: 2s;
		-moz-transition: 2s;
		-o-transition: 2s;
		-ms-transition: 2s;

/*	text-decoration: underline !important;		*/		/*	他のリンクテキストに合わせて、アンダーバーを指定⇒当初は、テキストリンクにアンダーバーを付けていたが、ツールチップ対応によりアンダーバーを付けないように変えたため、このステップをコメントアウトすることに。		*/
}


/*-------------
「続きを読む」ーのリンクテキスト
-------------*/
.ently_read-more a{
	color: #3A71A5 !important;		/*	「続きを読む」のリンクテキストに対し、別途暗い青色を指定		*/
		-webkit-transition: 2s;
		-moz-transition: 2s;
		-o-transition: 2s;
		-ms-transition: 2s;
}



/*===カーソルがリンクテキスト上にいる場合=========*/

/*------
「!important」を付けると、背景色で分類しているカテゴリーマークの文字色にも反映され見にくくなったので、できるだけ見易くなるように背景色を濃くするなり変えて対応した。
なお、「!important」を外すと、通常のリンクテキストも反映されないので、「!important」を外すことは不可。
-------*/

a:hover,
a:active,
a:focus{
	color: #59AEFF !important;		/*	明るい青			*/
		-webkit-transition: .5s;
		-moz-transition: .5s;
		-o-transition: .5s;
		-ms-transition: .5s;
}

/*=== END ■フォントの色 ==================================================*/



/*====================================================================

	■見出し一覧の番号のフォントの種類を指定

======================================================================*/
.toc-area_inner li::before {	/*	「h2」	*/
   font-family:'serif';			/*	細い文字（但し、別途背景色が付き、文字は白色に）	*/
}

.toc-area_inner li ol li::before {		/*	「h3」	*/
   font-family:'arial black';			/*	太くて多少幅広い文字	*/
   color: #1a334c;						/*	番号の色を紺色に	*/
}

.toc-area_inner li ol li ol li::before {	/*	「h4」	*/
   font-family:'arial';					/*	細くて多少幅が広い文字	*/
   color: #1a334c;						/*	番号の色を紺色に	*/
}

.toc-area_inner li ol li ol li ol li::before {	/*	「h5」&「h6」	*/
   font-family:'arial narrow';							/*	細い文字	*/
   color: #1a334c;						/*	番号の色を紺色に	*/
}

/*======= END　■見出し一覧の番号のフォントの種類を指定 ==========*/


	
/*====================================================

	■見出し（目次）一覧の背景■

	【参考まで】
	・「toc_title」、「toc-area」の両クラスは、
	ブラウザのソース上には現れない。⇒フォーラムで知る。
	・ソース上では、「keni_toc」IDのみがあり、
	「toc-area」クラスと同等の要素で、見出し一覧全体の領域を指すと思われる。
	・「toc-area」は「toc_title」の領域を含むとおもわれるが、
	「toc_title」が上層に表示されるようだ。


======================================================*/

/*--- 見出し一覧のタイトル ------------*/
.toc_title {
	border: dotted 1px !important;		/*   HTML5 & CSS3  P.138,139	*/
    color: #1A334C !important;
	border-radius: 5px !important;				/*   HTML5 & CSS3  P.141→枠線を角丸	*/
	background: linear-gradient(to right, rgba(86,170,255,0.1) 5%, rgba(17,34,51,0.3) 80%, rgba(17,34,51,0.3) 81%, rgba(86,170,255,0.1) 100%) !important;
	/*	★注意★　CSSは上から読まれていき、詳細度が同じなら下にあるプロパティが優先されるので、必ずベンダープレフィックスが付かないプロパティを最後に書くこと！！！	*/
}


/*--- 見出し一覧の全体 ------------*/
.toc-area {
	background: linear-gradient(to top, rgba(150,150,150,0.1) 0%, rgba(0,0,0,0.15) 25%, rgba(255,255,255,0.05) 100%) !important;	/*		*/
/*	background: linear-gradient(to top, rgba(150,150,150,0.08) 0%, rgba(0,0,0,0.08) 25%, rgba(255,255,255,0.08) 100%) !important;	/*		*/
/*	background: linear-gradient(to top, rgba(0,0,0,0.08) 5%, rgba(255,255,255,0.08) 60%) !important;	/*		*/

	border-style: none;
	border-radius: 5px !important;				/*  角丸	*/
}

/*======= END　■見出し一覧の背景■ =====================================*/




	
/*=======================================================================

	■タイトル、見出しの装飾変更■


========================================================================*/


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

	＜＜＜反映ページ＞＞＞
	・トップページに於ける各記事のタイトル
	・カテゴリー一覧ページに於ける各記事のタイトル
	・アーカイブページ（月別）に於ける各記事のタイトル
	・検索結果ページに於ける各記事のタイトル

	■覚書
	・「!important」を付けなければ反映されなかった。


-----------------------------------------------------*/
h2.entry_title {
	padding: 0px 15px !important;		/* 	見出しの枠と文字の間隔：上下0px、左右15px（プロパティの値１⇒上下、値２⇒左右）		*/
	background: linear-gradient(to top, rgba(53,104,156,.2) 5%, rgba(255,255,255,0.2) 100%) !important;		/*		*/
}

h2.entry_title a {

	color: #3A71A5 !important;		/*---	暗めの青色----*/

		-webkit-transition: 2s;
		-moz-transition: 2s;
		-o-transition: 2s;
		-ms-transition: 2s;
}



h2.entry_title a:hover {

	color: #59AEFF !important;		/*----	更に明るい青色へ------*/

		-webkit-transition: .5s;
		-moz-transition: .5s;
		-o-transition: .5s;
		-ms-transition: .5s;
}





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

	＜＜＜反映ページ＞＞＞
	・「h1.entry_title」⇒		個別記事ページに於ける記事タイトル
	・「h1.archive_title」⇒	次のタイトル
								・カテゴリーの記事一覧ページ
								・アーカイブの記事一覧ページ（月別）
								・検索結果の記事一覧ページ
	

	■覚書
	・この変更により、デフォルトの上部の斜線枠は消えた
	
------------------------------------------------------*/


h1.entry_title, h1.archive_title {

    color: white !important;

	text-shadow: -1px -1px #000000 !important;		/*	テキストに影	*/

	border: solid 1px #aaaaaa !important;		/*   HTML5 & CSS3  P.138,139	*/

	padding: 15px 20px !important;		/* 	見出しの枠と文字の間隔：上下15px、左右20px（プロパティの値１⇒上下、値２⇒左右）		*/
	border-radius: 10px !important;				/*   HTML5 & CSS3  P.141→枠線を角丸	*/

	box-shadow: 0px 2px 3px #cccccc, 0px 0px 4px 3px #ffffff inset !important;			/*   HTML5 & CSS3  P.156→枠に影を付ける。	　P,162 →　枠の内側にも影を付ける。　P.164　→　4つ目の値「3px」は影を大きくするため。　*/

	background: linear-gradient(to right, rgba(35,69,103,1) 5%, rgba(86,170,255,1) 80%, rgba(86,170,255,1) 81%, rgba(35,69,103,1) 100%) !important;		/*	濃く		*/

/*	background: linear-gradient(to right, rgba(30,59,89,1) 5%, rgba(86,170,255,1) 80%, rgba(86,170,255,1) 81%, rgba(30,59,89,1) 100%) !important;		/*	更に濃く		*/

/*	background: linear-gradient(to right, rgba(21,51,76,1) 5%, rgba(86,170,255,1) 80%, rgba(86,170,255,1) 81%, rgba(21,51,76,1) 100%) !important;		/*	最も濃く		*/

	/*	★注意★　CSSは上から読まれていき、詳細度が同じなら下にあるプロパティが優先されるので、必ずベンダープレフィックスが付かないプロパティを最後に書くこと！！！	*/

}



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

	＜＜＜反映ページ＞＞＞
	・サイドバーの各タイトル
		例えば、「最近の投稿」、「カゲゴリー」、「アーカイブ」
	
	
	■プロパティ
    background: green !important;		⇒背景色
    color: orange !important;			⇒文字の色
    font-size: 2em !important;			⇒文字のサイズ			
    letter-spacing: 20px !important;	⇒文字間隔

	■覚書
	
------------------------------------------------------*/





h3.sub-section_title {
	border: solid 1px #1A334C !important;		/*   HTML5 & CSS3  P.138,139	*/
	
    color: #1A334C !important;	/*	最も濃く		*/


/*	margin: 40px 0px 30px;	/* 	見出しとその上下のコンテンツの間隔（プロパティの値１⇒上、値２⇒左右、値３⇒下）	*/

/*	padding: 10px 10px;		/* 	見出しの枠と文字の間隔：上下10px、左右20px（プロパティの値１⇒上下、値２⇒左右）		*/
	border-radius: 5px !important;				/*   HTML5 & CSS3  P.141→枠線を角丸	*/


	background: linear-gradient(to right, rgba(17,34,51,0.3) 5%, rgba(86,170,255,0.1) 80%, rgba(86,170,255,0.1) 81%, rgba(17,34,51,0.3) 100%) !important;		/*	最上級の最も濃く		*/

	/*	★注意★　CSSは上から読まれていき、詳細度が同じなら下にあるプロパティが優先されるので、必ずベンダープレフィックスが付かないプロパティを最後に書くこと！！！	*/
}


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

	＜＜＜反映ページ＞＞＞
	・関連記事のタイトル
	
	
	■プロパティ
    background: green !important;		⇒背景色
    color: orange !important;			⇒文字の色
    font-size: 2em !important;			⇒文字のサイズ			
    letter-spacing: 20px !important;	⇒文字間隔

	■覚書
	
------------------------------------------------------*/

h2.keni-related-title {
	border: solid 1px #1A334C !important;		/*   HTML5 & CSS3  P.138,139	*/
    color: #1A334C !important;
	margin-top: 40px !important;
/*	margin: 40px 0px 30px;	/* 	見出しとその上下のコンテンツの間隔（プロパティの値１⇒上、値２⇒左右、値３⇒下）	*/

	padding: 10px 20px !important;		/* 	見出しの枠と文字の間隔：上下10px、左右20px（プロパティの値１⇒上下、値２⇒左右）		*/
	border-radius: 5px !important;				/*   HTML5 & CSS3  P.141→枠線を角丸	*/

	background: linear-gradient(to right, rgba(86,170,255,0.1) 5%, rgba(17,34,51,0.3) 80%, rgba(17,34,51,0.3) 81%, rgba(86,170,255,0.1) 100%) !important;
	/*	★注意★　CSSは上から読まれていき、詳細度が同じなら下にあるプロパティが優先されるので、必ずベンダープレフィックスが付かないプロパティを最後に書くこと！！！	*/
}





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

	＜＜＜反映ページ＞＞＞
	・投稿記事の見出しｈ２
	
	■注意
	・背景色のグラデーションは「!important」を付けないと反映されなかった！！！
	
------------------------------------------------------*/

div.article-body h2	{
    color: #1A334C !important;
    
	border-left: solid 8px #1A334C !important;		/*   HTML5 & CSS3  P.138,139	*/
	border-right: solid 8px #1A334C !important;		/*   HTML5 & CSS3  P.138,139	*/
	border-top: solid 1px #1A334C !important;		/*   HTML5 & CSS3  P.138,139	*/
	border-bottom: solid 1px #1A334C !important;		/*   HTML5 & CSS3  P.138,139	*/




	margin: 40px 0px 30px !important;	/* 	見出しとその下のコンテンツの間隔（プロパティの値１⇒上、値２⇒左右、値３⇒下）	*/

	padding: 5px !important;		/* 	見出しの枠と文字の間隔		*/
	border-radius: 5px !important;				/*   HTML5 & CSS3  P.141→枠線を角丸	*/

	background: linear-gradient(to right, rgba(17,34,51,0.3) 5%, rgba(86,170,255,0.1) 80%, rgba(86,170,255,0.1) 81%, rgba(17,34,51,0.3) 100%) !important;
	/*	★注意★　CSSは上から読まれていき、詳細度が同じなら下にあるプロパティが優先されるので、必ずベンダープレフィックスが付かないプロパティを最後に書くこと！！！	*/
}



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

	＜＜＜反映ページ＞＞＞
	・投稿記事の見出しｈ３
	
	■注意
	・背景色のグラデーションは「!important」を付けないと反映されなかった！！！
	
------------------------------------------------------*/

div.article-body h3	{
	line-height: 1.8 !important;		/*	文字と上下の線の間隔が狭いので、line-height: 1.8を指定して少し間隔を広げる	*/

	border-style: none !important;
	margin: 30px 0px 20px !important;	/* 	見出しとその下のコンテンツの間隔（プロパティの値１⇒上、値２⇒左右、値３⇒下）	*/
	padding: .5em !important;		/*	左右の横幅を広げるため。元は「.5em」	*/
	position: relative;
}


div.article-body h3::before {
	content: "";
	display: block;
	height: 2px;
	background: linear-gradient(to right, rgba(17,34,51,0.3) 5%, rgba(86,170,255,0.2) 80%, rgba(86,170,255,0.2) 81%, rgba(17,34,51,0.3) 100%) !important;	
}

div.article-body h3::after {
	content: "";
	display: block;
	height: 4px;
	background: linear-gradient(to right, rgba(17,34,51,0.3) 5%, rgba(86,170,255,0.2) 80%, rgba(86,170,255,0.2) 81%, rgba(17,34,51,0.3) 100%) !important;	
}




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

	＜＜＜反映ページ＞＞＞
	・投稿記事の見出しｈ４
	
	■注意
	・背景色のグラデーションは「!important」を付けないと反映されなかった！！！
	
------------------------------------------------------*/


div.article-body h4	{
	border-style: none !important;
	margin: 30px 0px 20px !important;	/* 	見出しとその下のコンテンツの間隔（プロパティの値１⇒上、値２⇒左右、値３⇒下）	*/
	padding: .5em !important;		/*	左右の横幅を広げるため。元は「.5em」	*/
	position: relative;
}

div.article-body h4::after {
	content: "";
	display: block;
	height: 2px;
	background: linear-gradient(to right, rgba(17,34,51,0.3) 5%, rgba(86,170,255,0.2) 80%, rgba(86,170,255,0.2) 81%, rgba(17,34,51,0.3) 100%) !important;	
}


/*======= END　■タイトル、見出しの装飾■ =====================================*/



/*================================================================

	■マウスオーバー時のリンク画像のズームアップ
	
	参考：
	・関連記事、最近の投稿と違い、画面サイズが全ての横幅に対応

=================================================================*/

/*-------------------------------------------	
	次のページの記事一覧の画像
	・トップページ
	・カテゴリー
	・アーカイブ（月別）
	・検索結果の記事一覧ページ

---------------------------------------------*/
.entry_thumb {
  overflow: hidden;	 	 /*拡大時にはみ出た部分を隠す*/
  width: 279px; 		 /*画像の幅*/
  height: 185px;  		/*画像の高さ*/
 }

.entry_thumb img {
  display: block;
  transition-duration: 1s; 	 /*画像サイズが元に戻る時間*/
 }
 
.entry_thumb img:hover {
  transform: scale(1.2,1.2); 	 /*画像の拡大率*/
  transition-duration: 0.5s; 	 /*画像サイズが拡大する元に戻る時間*/
 }
 
 



/*★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆☆★☆★☆★

	■メディアクエリ
	
	・デバイスの横幅によるＣＳＳの切り分け
	
	【参考】
	賢威８の親テーマ「base.css」では、次の順序で記述されていたが、
	ベースを４８０ｐｘ未満とし、デバイスの横幅が
	ある一定以上のものに異なる設定する形である。
		・指定なし
		・４８０ｐｘ以上
		・７６８ｐｘ以上
		・９２０ｐｘ以上
		・１２００ｐｘ以上
	※各メディアクエリで同じＣＳＳがあれば、ＣＳＳは後の記述が適用される。
	よって、「min-width」(以上)を使っているのだろう。
	※参考までに、親テーマ「advanced.css」では、７６８ｐｘ以上のみがある。

	一方、子テーマ（「keni8-child」フォルダ）内の「advanced.css」には独自のメディアクエリを設定
	こちらは、ベースを最も横幅の小さいものにするとに慣れていないため、
	この子テーマ内では画面の横幅が十分大きいＰＣ表示をベースにし、
	デバイスの横幅がある一定以下のものに異なる設定する形である。
	※各メディアクエリで同じＣＳＳがあれば、ＣＳＳは後の記述が適用される。
	
★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆☆★☆★☆★*/


/*◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇

	７６８ｐｘ以上に適用

◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇*/
@media only screen and (min-width : 768px){


/*================================================================

	■マウスオーバー時のリンク画像のズームアップ

=================================================================*/

/*-------------------------------------------	
	
	投稿記事ページの関連記事の画像
	
	■参考
	・画面サイズ７６８以上に限定しているのは、
	それ未満だと各関連記事の領域の右側に余白ができるため

---------------------------------------------*/ 		
 .single .related-entry-list_style02 .related-entry_thumb {
  overflow: hidden;  
  width: 195px;  	
  height: 125px;  
  display: block;
 }
 .single .related-entry-list_style02 .related-entry-list_item .related-entry_thumb img {
  display: block;
  transition-duration: 1s; 	
  position: relative;
  top: 60px;
 }
 .single .related-entry-list_style02 .related-entry-list_item:hover .related-entry_thumb img {
  position: relative;
  top: 0;
  left:0;
  transform: scale(1.2);  	
  transition-duration: 0.5s; 	
 }



/*-------------------------------------------	
	
	サイドバーの「最近の投稿」の画像
	
	■参考
	・画面サイズ７６８以上に限定しているのは、
	テキスト領域の横幅が画面領域の横幅より大きく、食み出すため

---------------------------------------------*/
.widget_recent_entries_thumb {
  overflow: hidden;	 	 /*拡大時にはみ出た部分を隠す*/
  width: 279px; 		 /*画像の幅*/
  height: 185px;  		/*画像の高さ*/
 }

.widget_recent_entries_thumb img {
  display: block;
  transition-duration: 1s; 	 /*画像サイズが元に戻る時間*/
 }
 
.widget_recent_entries_thumb img:hover {
  transform: scale(1.2,1.2); 	 /*画像の拡大率*/
  transition-duration: 0.5s; 	 /*画像サイズが拡大する元に戻る時間*/
 }


/*======= END　■マウスオーバー時のリンク画像のズームアップ================*/


}	/*◇◇◇ END 「７６８ｐｘ以上に適用」◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇*/