/*
 Theme Name:   How To Child
 Theme URI:    http://underscores.me/
 Description:  How To Child Theme
 Author:       wp-exp.com Manager
 Author URI:   https://wp-exp.com/
 Template:     how-to
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  LICENSE
 Tags:         blog
 Text Domain:  how-to-child
*/

/*--------------------------------------------------------------
>>> もくじ
----------------------------------------------------------------
フォント
リンク
見出し
段落
引用
テキスト装飾・強調
フォントサイズ
リスト
テーブル




# Typography
		見出し
		段落
# レイアウト
# サイトヘッダー
	## グローバルメニュー、サイト説明文
# パンくずリスト
# メインコンテンツ
	## リンク
	## リスト
	## テーブル
	## 図表
	## テキスト装飾
	## ボックス・飾り枠
# 投稿下
	## 公開日・更新日
	## ソーシャルアイコン
# 記事・カテゴリーリスト共通設定
	## entry-list-type1
	## entry-list-type2
	## アクセスランキング
# トップページ
	## 見出し
	## おすすめコンテンツ
	## サイト更新情報
# アーカイブ
# サイトマップ
# ページネーション
# 404
# サイドバー
# ページ先頭へ戻る
# サブメニュー
# フッター
# 広告
	## ビジネスサイト向けおすすめテーマ
	## flexbox
# margin・padding
--------------------------------------------------------------*/

/* フォント */
body,
button,
input,
select,
textarea {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

@media screen and (max-width:599px) {
	body,
	button,
	input,
	select,
	textarea {
		font-size: 14px;
		font-size: 0.875rem;
	}
}

/* リンク */
a,
a:visited {
	color: #03C;
	text-decoration: none;
}

a:hover {
	color: #6684e0;
	text-decoration: underline;
}

/* 見出し */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 100%;
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 1.1em;
}

h1.entry-title {
	font-size: 22px;
	font-size: 1.375rem;
}

.entry-content h2 {
	font-size: 19px;
	font-size: 1.1875rem;
	background-color: #eeeef0; /* light gray */
	border-left: 5px solid #005bac; /* main color */
	border-bottom: 1px solid #bebec0; /* dark gray */
	padding: 1em 8px 1.2em 13px;
	margin-top: 3.5em;
}

.entry-content h3 {
	font-size: 17px;
	font-size: 1.0625rem;
	border-left: 5px solid #444;
	padding: .8em 3px 1em 10px;
	margin-top: 3.2em;
}

.entry-content h4 {
	border-bottom: double #bebec0; /* dark gray */
	padding-bottom: .6em;
	margin-top: 2.9em;
}

.entry-content h5 {
	border-bottom: 1px dashed #bebec0; /* dark gray */
	margin-top: 2.5em;
}

@media screen and (max-width:599px) {
	h1.entry-title { font-size: 137.5% }
	.entry-content h2 { font-size: 118.75% }
	.entry-content h3 { font-size: 106.25% }
}

.entry-content h3 span,
.entry-content h4 span { font-size: 80% }

/* 段落 */
p {
	letter-spacing: 0.4px;
	margin: 0 0 1.75em;
}

/* 引用 */
blockquote {
	position: relative;
	font-size: 90%;
	background-color: #eeeef0; /* light gray */
	z-index: 1;
	padding: 1.8em;
	margin: 0 0 3.25em;
}

blockquote p:last-of-type {
	margin-bottom: 0
}

blockquote:before,
blockquote:after {
	font-family: 'icomoon';
	font-size: 24px;
	line-height: 1;
	color: #bebec0; /* dark gray */
	position: absolute;
	z-index: 2;
}

blockquote:before {
	content: "\e90c";
	left: 10px;
	top: 5px;
}

blockquote:after {
	content: "\e90b";
	right: 10px;
	bottom: 5px;
}

/* テキスト装飾・強調 */
strong {
	font-weight: normal;
}

.kasen { background: linear-gradient(transparent 95%, #444 100%) }
.fw-b { font-weight: 800 }

.red,
.blue,
.green,
.purple {
	font-weight: bold;
	font-weight: 600;
}

.red { color: #FF0000 }
.blue { color: #0000FF }
.green { color: #008000 }
.purple { color: #800080 }
.marker { background: linear-gradient(transparent 60%,#ff6 0) }
.marker-title {
	display: inline-block;
	color: #005bac; /* main color */
	font-weight: bold;
	font-weight: 600;
	background-color: #e5eef6; /* light sub color */
	padding: .3em .6em;
	margin-bottom: .5em;
}

/* フォントサイズ */
.fs-ss { font-size:75% }
.fs-s { font-size:90% }
.fs-l { font-size:110% }
.fs-ll { font-size:125% }

/* リスト */
ul,
ol,
dl {
	letter-spacing: 0.4px;
	margin: 0 0 1.75em;
}

ul,
ol {
	padding: 0;
}

ul {
	list-style: none;
}

dt {
	margin-bottom: .5em
}

dd {
	font-size: 95%;
	padding: 0 10px;
	margin: 0 0 1.9em;
}




/* テーブル */
table {
	margin: 0 0 3.25em;
}

.entry-content table {
	width: auto;
	caption-side: bottom;
}

caption {
	font-size: .85em;
	padding-top: .5em;
}

.entry-content table th,
.entry-content table td {
	border: 1px solid #bebec0; /* dark gray */
	padding: 10px;
}

.entry-content table th {
	background-color: #eeeef0; /* light gray */
}

@media screen and (max-width:480px) {
	.entry-content table {
		width: 100%;
	}

	.entry-content table.type-1 {
		border-top: 1px solid #bebec0; /* dark gray */
	}

	.entry-content table.type-1 th,
	.entry-content table.type-1 td {
		display: block;
	}

	.entry-content table.type-1 th {
		border-top: none;
	}

	.entry-content table.type-1 td {
		border-top: none;
	}
}


/* その他 */
ins {
	background: transparent; /* AdSense背景色を非表示化 */
}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/


.box,
.note-detail {
	margin: 0 0 3.25em;
}



/*--------------------------------------------------------------
# レイアウト
--------------------------------------------------------------*/
body {
	width: 100%;
}

header#masthead,
#primary,
#secondary,
#footer-inner {
	width: 100%;
	max-width: 660px;
	margin-left: auto;
	margin-right: auto;
}

header#masthead,
#primary,
#secondary {
	margin-bottom: 2.5em;
}

#main {
	margin-bottom: 2.5em;
}

#primary,
#secondary {
	padding: 0 10px;
}

#footer-inner {
	padding: 10px;
	margin-bottom: 0;
}

@media screen and (min-width:1000px) {
	header#masthead,
	#content,
	#footer-inner {
		max-width: 1000px;
	}

	#content {
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-ms-flex-pack: justify;
		    -webkit-justify-content: space-between;
		        justify-content: space-between;
		-ms-flex-wrap: wrap;
		    -webkit-flex-wrap: wrap;
		        flex-wrap: wrap;
		padding-left: 0;
		padding-right: 0;
		margin: 0 auto;
	}

	#primary {
		width: 660px;
	}

	#secondary {
		width: 300px;
		padding: 0;
		margin-right: 0;
	}
}

/*--------------------------------------------------------------
# サイトヘッダー
--------------------------------------------------------------*/
@media screen and (max-width:999px) {
	.site-branding {
		position: relative;
	}

	.site-title {
		padding: 10px;
		margin: 0;
	}

	.site-title img {
		max-width: calc(100% - 66px);
		max-height: 56px;
	}
}

@media screen and (min-width:1000px) {
	.site-branding {
		font-size: .9em;
	}

	.site-branding p {
		text-align: center;
		margin: 1em auto;
	}

	.site-title {
		text-align: center;
	}
}

/*--------------------------------------------------------------
## グローバルメニュー、サイト説明文
--------------------------------------------------------------*/
/* トグルボタン */
#toggle {
	position: absolute;
	top: 10px;
	right: 10px;
	color: #333;
	line-height: 1;
	padding: 6px 8px;
	border: solid 1px #bebec0; /* dark gray */
	border-radius: 5px;
	background-color: #fff;
	cursor: pointer;
}

#toggle i {
	font-size: 26px;
	color: #333;
}

#toggle span {
	font-size: 10px
}

/* グローバルメニュー、サイト説明文 */
#primary-menu,
p.site-description {
	display: none
}

/* メインメニュー */
#main-menu ul {
	text-align: left;
	background-color: #222;
	margin: 10px 0;
	padding: 0;
}

#main-menu li {
	border-bottom: 1px solid #fff;
}

#main-menu li:last-of-type:after {
	border-bottom: none
}

#main-menu li a {
	display: block;
	padding: 10px;
	color: #fff;
	font-size: 14px;
	font-size: 0.875rem;
	text-decoration: none;
}

@media screen and (min-width:1000px) {
	#toggle {
		display: none
	}

	p.site-description {
		display: block;
		font-size: .9em;
		padding: 0 10px;
	}

	#primary-menu {
		display: block
	}

	#main-menu ul {
		background-color: transparent;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}

	#main-menu li {
		display: inline-block;
		text-align: center;
		border-bottom: 4px solid #eeeef0; /* light gray */
		margin: 0 .5em;
	}

	#main-menu li a {
		font-weight: 600;
		color: #444;
		padding: 5px 10px;
	}

	#main-menu li:hover {
		border-bottom-color: #005bac; /* main color */
		transition: 0.3s;
	}

	#main-menu li.current-menu-parent,
	#main-menu li.current-menu-item {
		border-bottom-color: #005bac; /* main color */
	}
}

/*--------------------------------------------------------------
# パンくずリスト
--------------------------------------------------------------*/
#breadcrumbs {
	font-size: 85%;
}

#breadcrumbs,
#breadcrumbs a {
	color: #666; /* dark gray */
}

#breadcrumbs ol {
	list-style: none;
}

#breadcrumbs ol li {
	display: inline;
}

/*--------------------------------------------------------------
# メインコンテンツ
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## リンク
--------------------------------------------------------------*/
.entry-content a {
  text-decoration: underline;
}


/*--------------------------------------------------------------
## リスト
--------------------------------------------------------------*/
.entry-content li {
	margin-bottom: 0.8em;
}

.entry-content ul li {
	position: relative;
	padding-left: 1em;
}

body.single .entry-content ul li:after {
	display: block;
	content: "";
	position: absolute;
	top: calc(50% - .2em);
	left: .25em;
	width: .4em;
	height: .4em;
	background-color: #005bac; /* main color */
	border-radius: 100%;
}

.entry-content ol li {
	margin-left: 24px;
}

li > ul, li > ol {
	margin-top: .8em;
	margin-left:  0;
}

/*--------------------------------------------------------------
## テーブル
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## 図表
--------------------------------------------------------------*/
.entry-content figure {
	text-align: center;
	margin-bottom: 2.5em;
}

.entry-content figure img {
	box-shadow: 0 3px 3px rgba(0, 0, 0, .3);
}

.entry-content figcaption,
.entry-content p.wp-caption-text {
	font-size: .9em;
	text-align: center;
}

.entry-content figcaption:before {
	content: "\25B2";
}

/*--------------------------------------------------------------
## テキスト装飾
--------------------------------------------------------------*/

.t-center {text-align: center}

.official-link,
.reference-link,
.relation-link {
	position: relative;
	font-size: .9em;
	background-color: #e5eef6; /* light sub color */
	border-radius: 4px;
	padding: 1em .75em;
	margin-bottom: 2.75em;
}

.official-link a,
.reference-link a,
.relation-link a {
	color: #444;
}

.official-link:before,
.reference-link:before,
.relation-link:before {
	position: absolute;
	top: -.81em;
	left: .75em;
	color: #fff;
	font-weight: bold;
	border-radius: 4px;
	background-color: #005bac; /* main color */
	padding: 0 .5em;
}

.official-link:before {content: "\516C\5F0F\30DA\30FC\30B8"}
.reference-link:before {content: "\53C2\8003\30DA\30FC\30B8"}
.relation-link:before {content: "\95A2\9023\30DA\30FC\30B8"}

.button_wp,
.button_normal,
.button_gray {
	font-size: .85em;
	vertical-align: baseline;
	border-radius: 3px;
	word-break: keep-all;
	padding: 2px 4px;
	margin: 0 3px;
}

.button_wp,
.button_normal {
  font-weight: bold;
}

.button_normal,
.button_gray {
	border: 1px solid #bebec0; /* dark gray */
	border-bottom-width: 2px;
}

.button_wp {
  color: #fff;
  font-weight: bold;
  background-color: #008ec2;
  border-bottom: 2px solid #006799;
}

.button_gray {
  background-color: #eeeef0; /* light gray */
}

/* 注釈ナンバー */
.num {
	position: relative;
	background: linear-gradient(transparent 95%, rgba(255,0,0,0.5) 99% );
	padding-left: 1.8em;
}

.num:before {
	background-color: #cc0000;
	border-radius: 50%;
	color: #fff;
	width: 1.5em;
  height: 1.5em;
  font-size: .8em;
  text-align: center;
  position: absolute;
	left: .2em;
	top: .2em;
}

.no_01:before {content: "1";}
.no_02:before {content: "2";}
.no_03:before {content: "3";}
.no_04:before {content: "4";}
.no_05:before {content: "5";}
.no_06:before {content: "6";}
.no_07:before {content: "7";}
.no_08:before {content: "8";}
.no_09:before {content: "9";}
.no_10:before {content: "10";}

/*--------------------------------------------------------------
## ボックス・飾り枠
--------------------------------------------------------------*/
.note-detail,
.box {
	padding: 10px 5px;
	border-radius: 5px;
}

@media screen and (min-width:600px) {
	.note-detail,
	.box {
		padding: 1em;
	}
}

.entry-content .box li {
	margin-bottom: .5em;
}

.entry-content .box ul li {
	margin-left: 0;
}

.entry-content .box ol li {
	margin-left: 18px;
}

.box dd {
	padding: 0;
}


.box figure,
.box dl,
.box dd,
.box ul,
.box ol,
.box li:last-of-type {
	margin-bottom: 0;
}


.point {
	background-color: #fcf8e3;
	border: 1px solid #e2dfcc;
}

.question,
.archive-description {
	background-color: #eeeef0; /* light gray */
	border: 1px solid #bebec0; /* dark gray */
}

.memo {
	font-size: .9em;
	background-color: transparent;
	border: 2px solid #bebec0; /* dark gray */
}

.note-detail {
	background-color: transparent;
	border: 1px dashed #666;
}

ul.internal-link {
	font-size: .9em;
	border: 1px solid #bebec0; /* dark gray */
	padding-bottom: .3em;
}

ul.internal-link li {
	margin-left: .5em;
}

ul.internal-link:before {
	content: "\95A2\9023\30DA\30FC\30B8";
	display: block;
	border-bottom: 1px solid #bebec0; /* dark gray */
	background-color: #eeeef0; /* light gray */
	padding: .3em .5em;
	margin-bottom: .5em
}

.note:after {
	content: "\203B";
  vertical-align: top;
  font-size: 75%;
}

.note-detail {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	font-size: 85%;
}

.note-detail > * {
	margin-bottom: 0;
}

.note-detail:before {
  content: "\203B";
  font-weight: bold;
  margin-right: .3em;
}


/* 利用環境 */
.environment {
	font-size: 85%;
	background-color: #eeeef0; /* light gray */
}

.environment p {
	margin-bottom: 1em;
}

.env-title {
	font-weight: bold;
	font-weight: 600;
}

/*--------------------------------------------------------------
# 投稿下
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## 公開日・更新日
--------------------------------------------------------------*/
.entry-footer {
	font-size: 80%;
	background-color: #eeeef0; /* light gray */
	border-radius: 5px;
	padding: 10px;
}

.entry-footer .updated:not(.published) {
  display: inline;
}

.entry-footer .publish_date:before {
  content: "\516C\958B\65E5\FF1A";
}

.entry-footer .update_date:before {
  content: "\66F4\65B0\65E5\FF1A";
  margin-left: 1em;
}

.entry-footer .author {
	display: none;
}

/*--------------------------------------------------------------
## ソーシャルアイコン
--------------------------------------------------------------*/
ul.social-icon-list {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-pack: justify;
	    -webkit-justify-content: space-between;
	        justify-content: space-between;
	-ms-flex-wrap: wrap;
	    -webkit-flex-wrap: wrap;
	        flex-wrap: wrap;
	margin-bottom: 2.5em;
}

ul.social-icon-list li {
	position: relative;
	border-radius: 5px;
	width: calc(97% / 3) ;
	text-align: center;
	margin: 0 0.5% .2em;
}

@media screen and (min-width:1025px) {
	ul.social-icon-list li {
		width: 19%;
	}
}

ul.social-icon-list li a {
	display: block;
	line-height: 1;
	text-decoration: none;
	color: #fff;
	padding: 1em 0;
}

.social-icon {
	font-size: 1.25em
}

ul.social-icon-list li:hover {
	opacity: 0.6;
	transition: 0.3s;
}

ul.social-icon-list li.facebook-icon { background-color: #3C5A99 }
ul.social-icon-list li.twitter-icon { background-color: #55ACEE }
ul.social-icon-list li.googleplus-icon { background-color: #DD4B39 }
ul.social-icon-list li.hatebu-icon { background-color: #3C7DD1 }
ul.social-icon-list li.pocket-icon { background-color: #EE4257 }
ul.social-icon-list li.line-icon { background-color: #00C300 }

.share-count {
	font-size: 0.75em;
	position: absolute;
	bottom: 0;
	right: 5px;
}

/*--------------------------------------------------------------
# 記事・カテゴリーリスト共通設定
--------------------------------------------------------------*/
.entry-list {
	font-size: 14px;
	font-size: 0.875rem;
}

.entry-list a {
	color: #333;
}

.entry-list li {
	border-bottom: 1px solid #e0e0e4; /* middle gray */
}

/*--------------------------------------------------------------
## entry-list-type1
		トップページ>おすすめコンテンツ
		投稿>関連ページ
--------------------------------------------------------------*/
.entry-list-type1 li {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-pack: justify;
	    -webkit-justify-content: space-between;
	        justify-content: space-between;
	-ms-flex-wrap: wrap;
	    -webkit-flex-wrap: wrap;
	        flex-wrap: wrap;
	padding: 1em 5px;
}

.entry-list-type1 .entry-list-thumb {
	width: 80px;
	max-height: 80px;
	overflow: hidden;
	margin-right: 10px;
}

.entry-list-type1 .entry-list-thumb img {
	width: 80px;
	height: auto;
}

.entry-list-type1 .entry-list-title {
	width: calc(100% - 90px) ;
	font-size: 90%;
}

.relations {
	margin-bottom: 2.5em;
}

/*--------------------------------------------------------------
## entry-list-type2
		トップページ>更新情報
		トップページ>アクセスランキング
		サイドバー>カテゴリー
		サイドバー>アクセスランキング(トップページ以外)
--------------------------------------------------------------*/
.entry-list-type2 li {
	position: relative;
}

.entry-list-type2 li a {
	display: block;
	padding: 10px;
}

.entry-list-type2 li a:hover {
	text-decoration: none;
	background-color: #eeeef0; /* light gray */
	transition: 0.3s;
}

@media screen and (min-width:480px) {
	.entry-list li:last-of-type {
		border-bottom: none;
	}

	.entry-list-thumb {
		margin-left: 10px;
	}

	.entry-list-title {
		margin-right: 10px;
	}

	.entry-list-type1 .entry-list-title {
		width: calc(100% - 110px) ;
	}

	.sub-color-flame {
		border: 1px solid #ccdeee; /* sub color */
		border-radius: 0 0 4px 4px;
	}
}

@media screen and (min-width:600px) {
	.entry-list-type1 {
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-ms-flex-pack: justify;
		    -webkit-justify-content: space-between;
		        justify-content: space-between;
		-ms-flex-wrap: wrap;
		    -webkit-flex-wrap: wrap;
		        flex-wrap: wrap;
	}

	.entry-list-type1 li {
		width: 50%;
	}

	.entry-list .entry-list-type1 li:nth-last-of-type(2) {
		border-bottom: none;
	}
}

/*--------------------------------------------------------------
## アクセスランキング
--------------------------------------------------------------*/
.access-ranking ol {
	counter-reset: rank;
}

.access-ranking ol li {
	list-style: none;
}

.access-ranking ol li a {
	position: relative;
	padding-left: 35px;
}

.access-ranking ol li a:before {
	counter-increment: rank;
	content: counter(rank);
	background-color: #005bac; /* main color */
	border-radius: 50%;
	color: #fff;
	width: 20px;
  height: 20px;
  font-size: 12px;
  text-align: center;
  position: absolute;
	left: 10px;
	top: 10px;
	padding-top: 1px;
}

/*--------------------------------------------------------------
# トップページ
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## 見出し
--------------------------------------------------------------*/
body.home #main h2 {
	font-weight: 600;
	font-size: 14px;
	font-size: 0.875rem;
	background-color: #ccdeee; /* sub color */
	border-radius: 4px;
	padding: 5px 10px;
	margin-bottom: 0;
}

@media screen and (min-width:480px) {
	body.home #main h2 {
		border-radius: 4px 4px 0 0;
	}
}

/*--------------------------------------------------------------
## おすすめコンテンツ
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## サイト更新情報
--------------------------------------------------------------*/
.update-history-date {
	display: block;
}

/*--------------------------------------------------------------
# アーカイブ
--------------------------------------------------------------*/
h1.page-title {
	font-size: 130%;
}

.archive-description p {
	font-size: 80%;
	margin-bottom: 0;
}

body.archive article {
	padding: 1em .5em;
	margin-bottom: 0;
}

body.archive article:hover {
	background-color: #eeeef0; /* light gray */
	transition: 0.3s;
}

body.archive article a:hover {
	text-decoration: none;
}

body.archive h2 {
	margin-bottom: .5em;
}

.article-box {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-pack: justify;
	    -webkit-justify-content: space-between;
	        justify-content: space-between;
	-ms-flex-wrap: wrap;
	    -webkit-flex-wrap: wrap;
	        flex-wrap: wrap;
	color: #444;
	text-decoration: none;
}

.article-thumb img {
	width: 8em;
	height: 6em;
	text-align: center;
	border: 1px solid #ccc;
}

.article-summary {
	width: calc(100% - 8.5em) ;
}

.article-summary p {
	margin-bottom: 0;
}

@media screen and (max-width:400px) {
	.article-summary p {
		font-size: 12px;
		font-size: .75rem;
	}
}

@media screen and (min-width:600px) {
	.article-thumb img {
		width: 10em;
		height: 7.5em;
	}

	.article-summary {
		width: calc(100% - 11em) ;
	}
}

body.archive hr {
	border-top: 1px solid #eeeef0; /* light gray */
	border-bottom: 1px solid #fff;
	margin: 0;
}

body.archive hr:last-of-type {
	margin-bottom: 2.5em;
}

/*--------------------------------------------------------------
# サイトマップ
--------------------------------------------------------------*/
ul#sitemap_list li.cat-item {
	margin-bottom: 2.05em;
}

ul#sitemap_list ul {
	margin-top: 1.2em;
	margin-left: .2em;
}

ul#sitemap_list li {
	padding-left: 0;
	margin-left: 0;
}

ul#sitemap_list li.cat-item > a {
	color: #444;
	text-decoration: none;
}

ul#sitemap_list li:before{
	border: none;
}

/*--------------------------------------------------------------
# ページネーション
--------------------------------------------------------------*/
.pagination {
  text-align: center;
  margin: 0 auto 2.5em;
}

.pagination .page-numbers {
	background: #bebec0; /* dark gray */
	border-radius: 4px;
	color: #fff;
	display: inline-block;
	font-size: .75em;
	line-height: 3em;
	width: 3em;
	height: 3em;
	overflow: hidden;
	margin: 0 .5em;
}

.pagination .current {
	background: #444;
}

.pagination a:hover {
	text-decoration: none;
}

/*--------------------------------------------------------------
# 404
--------------------------------------------------------------*/
.error404 h2 {
	margin-top: 2.5em;
	margin-bottom: .4em;
}

/*--------------------------------------------------------------
# サイドバー
--------------------------------------------------------------*/
#secondary {
	font-size: 14px;
	font-size: 0.875rem;
}

#secondary section,
#secondary div {
	margin-bottom: 2.5em;
}

#secondary h2 {
	font-weight: 600;
	font-size: 14px;
	font-size: 0.875rem;
	background-color: #ccdeee; /* sub color */
	border-radius: 4px 4px 0 0;;
	padding: 5px 10px;
	margin-bottom: 0;
}

/*--------------------------------------------------------------
# ページ先頭へ戻る
--------------------------------------------------------------*/
#pagetop {
	position: fixed;
	bottom: 0;
	right: 0;
	font-size: 30px;
	width: 50px;
	height: 50px;
	color: #fff;
	background-color: rgba(0,0,0,0.3);
	text-align: center;
	vertical-align: middle;
}

#pagetop:hover {
	background-color: #005bac; /* main color */
	cursor: pointer;
	transition: 0.3s;
}

/*--------------------------------------------------------------
# サブメニュー
--------------------------------------------------------------*/
.menu-submenu-container {
	font-size: .9em;
	background-color: #eeeef0; /* light gray */
}

.menu-submenu-container ul {
	text-align: center;
	padding: .5em 0;
	margin: 2em auto 0;
}

.menu-submenu-container li {
	margin: .8em 0;
}

@media screen and (min-width:680px) {
	.menu-submenu-container li {
		display: inline;
		margin: 0 .3em;
	}
}

.menu-submenu-container li a {
	color: #666;
}

/*--------------------------------------------------------------
# フッター
--------------------------------------------------------------*/
footer#colophon {
	color: #fff;
	background-color: #666;
	min-height: 50px;
}

#footer-inner .site-info {
	text-align: center;
}

/*--------------------------------------------------------------
# 広告
--------------------------------------------------------------*/
/* HeaderTop */
aside.ad-header-top {
	text-align: center;
	margin: .5em auto;
}

/* AfterTitle */
aside.ad-after-title {
	text-align: center;
	margin-bottom: 1.9em;
}

/* AfterMore */
aside.ad-main-top {
	margin-bottom: 1.9em;
}

@media screen and (max-width:679px) {
	aside.ad-main-top {
		text-align: center;
	}
}

@media screen and (min-width:680px) {
	aside.ad-main-top {
		width: 336px;
	}

	.entry-content-intro p {
		width: calc(100% - 356px) ;
	}

	.flexbox-none aside {
		text-align: center;
		width: 100%;
	}
}

/* MainMiddle */
aside.ad-main-middle {
	text-align: center;
	margin-bottom: 1.9em;
}

/* MainBottom */
aside.ad-main-bottom {
	margin-bottom: 1.9em;
}

@media screen and (min-width:600px) {
	aside.ad-main-middle,
	aside.ad-main-bottom {
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-ms-flex-pack: justify;
			-webkit-justify-content: space-between;
		        justify-content: space-between;
		-ms-flex-wrap: wrap;
			-webkit-flex-wrap: wrap;
		        flex-wrap: wrap;
	}

	.ad-left,
	.ad-right {
		width: 49%;
	}

	.ad-right {
		text-align: right;
	}
}

/* SideTop / SideBottom */
.ad-side-top,
.ad-side-middle,
.ad-side-bottom {
	text-align: center;
}

/* Recommend */
.recommend-ad {
	margin-bottom: 2.5em;
}

.recommend-product {
	margin-bottom: 4em;
}

.recommend-thumb {
	text-align: center;
	margin-bottom: 1em;
}

.recommend-text h4 {
	font-size: 105%;
	margin-bottom: .5em;
}

.recommend-text p {
	font-size: 90%;
	margin-bottom: 1em;
}

.recommend-link {
	text-align: center;
	margin: 0 auto;
}

.recommend-link a {
	font-size: 1.2em;
	font-weight: bold;
	text-decoration: none;
	border-radius: 6px;
	width: 80%;
	text-align: center;
	margin: 0 auto;
}

.recommend-link a {
	display: block;
	color: #fff;
	background-color: #F78F00;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-top: 5px;
}

.recommend-text .recommend-link a:hover {
	text-decoration: none;
	opacity: 0.8;
	transition: 0.3s;
}

.recommend-link:before {
	display: block;
	color: #333;
	font-size: .9em;
}

p.recommend-link:before { content: "\2193\a0\8A73\7D30\30FB\304A\7533\8FBC\306F\3053\3061\3089\a0\2193"; }
.recommend-theme:before { content: "\2193\a0\30C7\30E2\30B5\30A4\30C8\30FB\3054\8CFC\5165\306F\3053\3061\3089\a0\2193" }

.recommend-book .recommend-link span {
	display: block;
	height: 3.1em;
}
.recommend-book .recommend-link a {
	display: block;
	color: #fff;
	width: 100%;
	padding-top: 8px;
	padding-bottom: 8px;
}

.amazon-btn a {	background-color: #EB8C11;}
.rakuten-btn a {	background-color: #BF0000;}
.seven-btn a {	background-color: #000;}
.honto-btn a {	background-color: #0085CD;}

@media screen and (min-width:600px) {
	.recommend-product {
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-ms-flex-pack: justify;
		    -webkit-justify-content: space-between;
		        justify-content: space-between;
		-ms-flex-wrap: wrap;
		    -webkit-flex-wrap: wrap;
		        flex-wrap: wrap;
	}

	.recommend-product {
		margin-bottom: 2em;
	}

	.recommend-thumb {
		text-align: left;
		width: 180px;
		height: 190px;
	}

	.recommend-text {
		width: calc(100% - 190px) ;
	}

}

/*--------------------------------------------------------------
	## ビジネスサイト向けおすすめテーマ
--------------------------------------------------------------*/
#genre-index ul {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	        justify-content: space-between;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	        flex-wrap: wrap;
}

#genre-index li {
	text-align: center;
	border: 1px solid #fff;
	width: 50%;
	padding-left: 0;
	margin: 0;
}

#genre-index li:before {
	border: none;
}

#genre-index li a {
	display: block;
	color: #333;
	background-color: #eeeef0; /* light gray */
	text-decoration: none;
	padding-top: 1em;
	padding-bottom: 1em;
}

#genre-index li a:hover {
	color: #fff;
	background-color: #005bac; /* main color */
	transition: 0.3s;
}

@media screen and (min-width:680px) {
	#genre-index li {
		width: 25%;
	}
}

.recommend-theme-title {
	color: #fff;
	font-size: 1.25em;
	font-weight: bold;
	text-align: center;
	background-color: #0D1D3F;
	width: 600px;
	padding: .5em 0;
	margin: 0 auto;
}

.recommend-theme-img {
	text-align: center;
	margin-bottom: 1em;
}

.recommend-theme-link {
	text-align: center;
}

a.recommend-theme-btn {
	color: #0D1D3F;
	font-size: 1.25em;
	font-weight: bold;
	text-decoration: none;
	border: 2px solid #0D1D3F;
	padding: .4em 1em;
	margin-bottom: 2.5em;
}

@media screen and (max-width:479px) {
	a.recommend-theme-btn {
		font-size: 1em;
	}
}

a.recommend-theme-btn:hover {
	background-color: #0D1D3F;
	text-decoration: none;
	color: #FFFFFF;
	transition: 0.3s;
}

.recommend-theme-link:before {
	display: block;
	content: "\30C7\30E2\30B5\30A4\30C8\3092\78BA\8A8D\3067\304D\307E\3059";
	color: #0D1D3F;
	font-size: .75em;
	font-weight: bold;
	margin-bottom: 1em;
}

.to-genre-index {
	font-size: .9em;
	text-align: right;
	margin-top: 2em;
}

.to-genre-index a {
	color: #555;
	text-decoration: none;
}

/*--------------------------------------------------------------
	## flexbox
--------------------------------------------------------------*/
@media screen and (min-width:680px) {
	.flexbox {
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-ms-flex-pack: justify;
		    -webkit-justify-content: space-between;
		        justify-content: space-between;
		-ms-flex-wrap: wrap;
		    -webkit-flex-wrap: wrap;
		        flex-wrap: wrap;
	}

	.flexbox-reverse {
		-ms-flex-direction: row-reverse;
		    -webkit-flex-direction: row-reverse;
		        flex-direction: row-reverse;
	}

	.col-2-l,
	.col-2-r {
		width: 50%;
	}
	.col-2-l {padding-right: .5em}
	.col-2-r {padding-left: .5em}
}

/*--------------------------------------------------------------
# margin・padding
--------------------------------------------------------------*/
.mt-0 {margin-top: 0}
.mb-0 {margin-bottom: 0}
.ml-0 {margin-left: 0}
.mb-0 {margin-right: 0}
.mb-l {margin-bottom: 4em}