/*
Theme Name: dbs-b23
Author: Toshio Ito (deebers-ITLab.)
Description: This is a simple two-column theme. Compatible with block editor. 2023Version. A more modern web-optimized version. 
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
@charset "UTF-8";
/*
メインのCSSスタイルを設定
ユーザがカスタマイズしやすいようにコンテンツ内のスタイルを記述する
基本レイアウトに関しては/css/basic-layout.cssに記述する
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------

1.0 BasicSetting （共通設定）
2.0 media Queries タブサイズ縦サイズ（750-939px)
3.0 media Queries PCサイズ（940px-）

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


/*--------------------------------------------------------------
1.0 BasicSetting （共通設定）
--------------------------------------------------------------*/

/* 投稿本文部分
----------------------------------------------- */
.mainBox { /* article内post本文エリア */
	margin-bottom: 20px;
	line-height: 1.7;
	font-size: 1.5rem; /* 個別設定漏れのため */
}

/* ブロックの装飾 カギ括弧でディスクリプションを囲う */
.mainBox .desc-box {
	padding: 40px 30px;
	position: relative;
	margin-bottom: 3.2rem;
}
.mainBox .desc-box::before,
.mainBox .desc-box::after {
	content: '';
	width: 30px;
	height: 30px;
	position: absolute;
}
.mainBox .desc-box::before {
	border-left: solid 2px #ccc;
	border-top: solid 2px #ccc;
	top: 0;
	left: 0;
}
.mainBox .desc-box::after {
	border-right: solid 2px #ccc;
	border-bottom: solid 2px #ccc;
	bottom: 0;
	right: 0;
}
.mainBox .desc-box .post-desc { /*テキストサイズとカラー*/
	color: #757575;
	line-height: 1.4;
	font-size: 1.4rem;
	margin: 0;
}
.mainBox .desc-box .post-desc::before {
	content: 'Description:';
	color: #bbb;
	display: block;
	position: absolute;
	top: 10px;
	left: 30px;
}
/* ブロックの装飾 カギ括弧でディスクリプションを囲う ここまで*/

	.mainBox p {
		line-height: 1.6;
		font-size: 1.5rem; /* 15px */
		margin-bottom: 3.0rem; /* 1文字分 */
	}
/* .mainBox内 inline要素の装飾 */
	.mainBox .bold { /* 太字 */
		font-weight: bold;
	}
	.mainBox .underline {
		background: -webkit-linear-gradient(transparent 65%,#ddfbff 0);
		background: linear-gradient(transparent 65%,#ddfbff 0); /* 下線ブルー */
	}
	.mainBox .color-blue { /* テキスト装飾 */
		color: #63acb7;
	}
/* .mainBox内 inline要素の装飾 End */
/* .mainBox内のマージンbottom削除 */
	.mainBox .margin-bottom-none {
		margin-bottom: 0;
	}
/* .mainBox内のfigure 画像*/
	.mainBox figure {
		margin-bottom: 3.2rem;
	}
/* .mainBox内のショートコードで呼び出す別ページへのカードリンクのfigure  */
	.mainBox .related-post-card .list-image-box { /* figure.list-image-box */
		margin: 0 8px 0 0;
	}

/* .mainBox内のボーダーボックス */
	.mainBox .border-box {
		border: solid 1px #ccc;
		border-radius: 3px;
		padding: 20px 10px 0 10px;
	}
	.mainBox .border-box-blue {
		border: solid 1px #63acb7;
		border-radius: 3px;
		padding: 20px 10px;
		margin-bottom: 3.2rem;
	}

/* .mainBox内のlist(ol)(ul)の設定 */
/* (ol)(ul)標準リスト表示の設定 */
	/* 番号付きリスト(class指定なし) */
	.mainBox ol {
		list-style: decimal;
		margin-bottom: 3.0rem; /* 1文字分 */
	}
	.mainBox ol ol {
		list-style: decimal;
		padding: 0;
		margin-bottom: 0;
	}
	.mainBox li{
		display: list-item;
		margin-left: 1em;
	}
	/* 行頭付きリスト(class指定なし) */
	.mainBox ul {
		list-style: disc;
		margin-bottom: 3.0rem;
	}
	.mainBox ul ul { /* list2階層は白点 */
		list-style: circle;
		padding: 0;
		margin-bottom: 0;
	}
	.mainBox ul ul ul { /* list3階層以降は四角点 */
		list-style: square;
	}

/* (ol)(ul)標準リスト表示の設定 End */

	/* 番号付きリスト 数字色付き CSSで対応 */
	ol.num-color {
		list-style: none;
		margin-bottom: 3.0rem;
		counter-reset: ol-counter;
	}
	ol.num-color ol,
	ol.num-color ul {
		margin-left: 0.2em;
	}
		ol.num-color > li { /* num-color直下のli */
			position: relative; /* 番号の基点になる */
			font-size: 1.5rem;
			margin:0;
			padding-left: 2.0rem;
		}
		ol.num-color > li::before { /* list要素に番号 */
			position: absolute;
			top: 0;
			left: 0;
			display: block;
			font-size: 1.5rem;
			width: 2.0rem;
			content: counter(ol-counter)".";
			counter-increment: ol-counter;
			font-weight: bold;
			color:#63acb7;
		}

		ol.num-color li h2,
		ol.num-color li h3,
		ol.num-color li h4,
		ol.num-color li h5,
		ol.num-color li h6 { /* ナンバーリスト内のタイトル装飾をなくす */
			vertical-align: baseline;
			font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
			padding: 0;
			position: static;
			border-bottom: none;
			line-height: 1.6;
		}
		ol.num-color li h2::before,
		ol.num-color li h3::after {
			position: static;
			border-bottom: none;
		}
		ol.num-color li > *:first-child { /* 番号に続く最初の要素をズレないように タイトル  */
			margin-bottom: 0.2rem;
			font-size: 1.5rem;
		}

/* mainBox内のcode表記のスタイル */
.mainBox code { /* inline */
	background-color: #efefef;
	border-radius: 2px;
	color: #555;
	padding: 2px 6px;
	margin: 0 2px;
	font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
}
.mainBox pre { /*code block*/
	background-color: #efefef;
	border-radius: 2px;	
	white-space: pre-wrap; /*コードを折り返す*/
	padding: 10px;
	margin-bottom: 3.2rem;
}
	.mainBox pre code { /*code block内のコード*/
		background: none;
		border-radius: 0;
		padding: 0;
		margin: 0;
	}


	/* 追記ボックス div */
	.mainBox .adden-box::before { /* ペンシル blue #63acb7*/
		white-space: pre-wrap; /* テキストとアイコンの間にスペース確保 */
		content: "\f044  追記";
		font-family: "FontAwesome";
		font-size: 1.6rem;
		color: #888;
		border-bottom: dashed 1px #999;
		padding: 1px 20px 1px 0;
		display: inline-block;
		margin-bottom: 1.0rem;
	}


/* sectionマージン */
	.mainBox section {
		margin-top: 6.0rem;
		margin-bottom: 6.0rem; /* p 2文字分程度 */
	}
	.mainBox section:first-child { /*最初のsectionのみマージントップ無し*/
		margin-top: 0;
	}
/* post内の見出しタグ  */
	.mainBox h2,
	.mainBox h3,
	.mainBox h4 {
		vertical-align: middle;
		line-height: 1.3;
		margin-bottom: 4.0rem; /* 1文字分 */
	}
	/* h2 装飾 */
	.mainBox h2 {
		position: relative;
		padding: 0 0 0 1.3rem;
		vertical-align: middle;
	}
	.mainBox h2::before{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		background: #63acb7; /* blue #63acb7 orange #ffb22d */
		width: 6px;
		height: 100%;
		border-radius: 1px;
	}
	/* h3 装飾 */
	.mainBox h3 {
		padding-bottom: 10px;
		border-bottom: solid 2px #ccc;
		position: relative;
	}
	.mainBox h3::after { /* 下線 */
		position: absolute;
		content: "";
		display: block;
		border-bottom: solid 2px #6cc5d1;
		bottom: -2px;
		width: 30%;
	}

	/* div.section-box 上下margin用 */
	.mainBox .section-box {
		margin-top: 4.0rem;
		margin-bottom: 4.0rem;
	}


	/* 文字装飾 inline(span) */
	.underline-yellow {
		background: -webkit-linear-gradient(transparent 65%,#fff7a0 0);
		background: linear-gradient(transparent 65%, #fff7a0 0); /* 下線黄色 */
	}
	.underline-pink {
		background: -webkit-linear-gradient(transparent 65%,#ffe2e2 0);
		background: linear-gradient(transparent 65%, #ffe2e2 40%); /* 下線赤色(ピンク) */
	}
	.underline-blue { /* #dff3ff #ddfbff */
		background: -webkit-linear-gradient(transparent 65%,#ddfbff 0);
		background: linear-gradient(transparent 65%,#ddfbff 0); /* 下線ブルー */
	}
	/* 強調細字 */
	.normwaight {
		font-weight: normal;
	}

	/* text 内部link 装飾 */
	.mainBox a[target="_self"]::after {
		content: "\f0f6";
		font-family: FontAwesome;
		font-weight: normal;
		padding-left: 2px;
		padding-right: 2px;
	}



	/* 文字装飾 FontAwesome -------------------*/
	.mainBox .ex-circle-fa::before { /* ! fa-exclamation-circle */
		content: "\f06a";
		font-family: "FontAwesome";
		font-weight: normal;
		color: #63acb7;
		margin-right:3px;
	}
	.mainBox .check-fa::before { /* fa-check-square-o  */
		content: "\f046";
		font-family: "FontAwesome";
		font-weight: normal;
		color: #63acb7;
		margin-right:3px;
	}
	.mainBox .pencil-fa::before { /* fa-pencil-square-o  */
		content: "\f044";
		font-family: "FontAwesome";
		font-weight: normal;
		color: #63acb7;
		margin-right:3px;
	}
	.mainBox .text-fa::before { /* fa-file-text-o  */
		content: "\f0f6";
		font-family: "FontAwesome";
		font-weight: normal;
		color: #63acb7;
		margin-right:3px;
	}




	/* pcで画像をフロートさせてテキストを回り込ませる */
	.photo-box-left .fig { /*figure*/
		text-align: center;
		margin: 0 0 20px 0;
	}
		.photo-box-left .fig a {
			text-decoration: none;
		}
		.photo-box-left .fig figcaption {
			font-size: 1.2rem;
			color: #888;
		}

/* 共通 youtube等のiframe 100%表示コンテナボックス */
/* youtubeの最大サイズをコントロール */
.maxwidth500 {
	margin-top: 6.0rem;
	margin-bottom: 6.0rem;
}
/* iframeのレスポンシブ */
.youtube-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
.youtube-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/* 投稿.mainBox内のカードビューリンクの設定 ----------------- */
.mainBox .list-view dd .card-title {
	padding-bottom: 10px;
	border-bottom: none;
}

/* attachment.php用 noindex仕様 */
.entry-attachment .attachment-imagebox { /* img pキャプションを内包*/
	text-align: center;
}
.entry-attachment .attachment-imagebox p { /* caption */
	font-size:1.3rem;
	padding:1.3rem 0 0;
}




/* 各アフィリエイトリンクボックス ------------------*/
.product-link-box {
	/*background: #fcfcfc;*/
	margin-bottom: 20px;
}
	.product-link-box p a { /* text linkの装飾 */
		font-weight: bold;
		display: block;
		padding: 17px ;
		border: solid 1px #4682b4;
		background: #fcfcfc;
		text-decoration: none;
	}
	.product-link-box p a::after { /* fa-angle-double-right  */
		content: "\f101";
		font-family: "FontAwesome";
		padding-left: 5px;
	}
	/* 製品ボックス内段落のマージンを無くす */
	.mainBox .product-link-box p {
		margin-bottom: 0;
	}

/* リンクサイト別設定 */
/* icon共通設定 */
.product-link-box.rakuten p a,
.product-link-box.amazon p a,
.product-link-box.soundhouse p a{
	padding-left: 50px;
}
/* 楽天 */
.product-link-box.rakuten p a {
	background: url(./images/af-icon/rakuten65x65.png) no-repeat 10px 50%;
	background-size: 30px 30px;
}

/* Amazon */
.product-link-box.amazon p a {
	background: url(./images/af-icon/amazon65x65.png) no-repeat 10px 50%;
	background-size: 30px 30px;
}

/* Soundhouse */
.product-link-box.soundhouse p a {
	background: url(./images/af-icon/soundhouse65x65.png) no-repeat 10px 50%;
	background-size: 30px 30px;
}

/* Singleページ下部ウィジェット */
.widget_text.single-add .ex-circle-fa::before { /* ! fa-exclamation-circle */
		content: "\f06a";
		font-family: "FontAwesome";
		font-weight: normal;
		color: #999;
		margin-right:3px;
	}



	/* ソースコード表示 */
	.mainBox .mark {
		font-family: Consolas, Menlo, 'Liberation Mono', Courier, monospace;
		background: #f3f3f3;
		padding: 2px 3px 4px;
		margin: 0 3px;
	}
/* 引用文 */
	.mainBox blockquote {
		background-color: #f8f8f8;
		background-image: url(./images/quote.png);
		background-repeat: no-repeat;
		background-position: left top;
		padding: 50px 20px 20px;
		margin: 20px 0 20px;
	}
	.mainBox blockquote,
	.mainBox blockquote p {
		font-size: 13px;
		line-height: 1.5;
		color: #666;
	}
	.mainBox blockquote p {
		margin-bottom: 13px;
	}
/* 水平線 */
	.mainBox hr {
		color: #CCC;
		background-color: #CCC;
		height: 1px;
		border: none;
		margin: 3.0rem 0;
	}
/* post内 STYLE 別スタイルシートに移動 ここまで----- */

/* サイドバーウィジェット サイト専用 ul.spon-list ------- */
.spon-list li {
	padding: 10px;
	margin: 10px 0;
	border: solid 1px #ddd;
}
.spon-list p {
	font-size: 1.4rem;
	line-height: 1.4;
	margin-bottom: 1.0rem;
	color: #888;
}
.spon-list .banner-box300 {
	max-width: 300px;
}
.spon-list .banner-box300 a {
	display: block;
}
.spon-list .banner-box300 img {
	width: 100%;
}

/*--------------------------------------------------------------
2.0 media Queries タブサイズ縦サイズ（750-939px)
--------------------------------------------------------------*/
@media print, screen and (min-width: 750px) and (max-width: 939px) { /* iPad ボックスレイアウト min750px max939px */

/* 投稿本文部分
----------------------------------------------- */
.mainBox { /* article内post本文エリア */
	line-height: 1.8;
}
	.mainBox p {
	line-height: 1.8;
	font-size: 1.6rem; /* 16px */
	margin-bottom: 3.2rem; /* 1文字分 */
	}
	/* post内の見出しタグ  */
	.mainBox h2 {
		font-size: 2.0rem; /* default1.8rem */
		padding: 0 0 0 1.7rem;
	}
	.mainBox h3,
	.mainBox h4 { /* basic-layout 1.6rem */
		font-size: 1.8rem;
	}
	.mainBox h3::after { /* 下線 */
		width: 20%;
	}

	/* .mainBox内のlist(ol)(ul)の設定 */
	.mainBox ul,
	.mainBox ol {
		line-height: 1.8;
		font-size: 1.6rem; /* 16px */
		margin-bottom: 3.2rem;
	}
	/* 番号付きリスト 数字色付き CSSで対応 */
	ol.num-color > li,
	ol.num-color > li::before,
	ol.num-color li > *:first-child {
		line-height: 1.8;
		font-size: 1.6rem; /* 16px */
	}

	/* 追記ボックス div */

	/* pcで画像をフロートさせてテキストを回り込ませる */
	.photo-box-left .fig { /*figure*/
		width: 37%;
		float: left;
		margin: 0 20px 20px 0;
	}

/* 投稿.mainBox内のカードビューリンクの設定 ----------------- */
.mainBox .list-view dd .card-title::after {
	width: 20%;
}


/* サイドバーウィジェット サイト専用 ---------------- */



}/* 2.0 media Queries タブサイズ（750-939px)ここまで /////////////////////////////////////////////////////////////*/


/*--------------------------------------------------------------
3.0 media Queries PCサイズ（940px-）
--------------------------------------------------------------*/
@media print, screen and (min-width: 940px) { /* pc ボックスレイアウト max1080px min940px ///////////////////////*/
/* 投稿本文部分
----------------------------------------------- */
.mainBox { /* article内post本文エリア */
	line-height: 1.8;
}
	.mainBox p {
	line-height: 1.8;
	font-size: 1.6rem; /* 16px */
	margin-bottom: 3.2rem; /* 1文字分 */
	}
	/* post内の見出しタグ  */
	.mainBox h2 {
		font-size: 2.0rem; /* default1.8rem */
		padding: 0 0 0 1.7rem;
	}
	.mainBox h3,
	.mainBox h4 { /* basic-layout 1.6rem */
		font-size: 1.8rem;
	}
	.mainBox h3::after { /* 下線 */
		width: 20%;
	}

	/* .mainBox内のlist(ol)(ul)の設定 */
	.mainBox ul,
	.mainBox ol {
		line-height: 1.8;
		font-size: 1.6rem; /* 16px */
		margin-bottom: 3.2rem;
	}
	/* 番号付きリスト 数字色付き CSSで対応 */
	ol.num-color > li,
	ol.num-color > li::before,
	ol.num-color li > *:first-child {
		line-height: 1.8;
		font-size: 1.6rem; /* 16px */
	}

	/* 追記ボックス div */

	/* pcで画像をフロートさせてテキストを回り込ませる */
	.photo-box-left .fig { /*figure*/
		width: 37%;
		float: left;
		margin: 0 20px 20px 0;
	}

/* 共通 youtube等のiframe 100%表示コンテナボックス */
	/* youtubeの最大サイズをコントロール */
	.maxwidth500 {
		max-width: 500px;
	}

/* 投稿.mainBox内のカードビューリンクの設定 ----------------- */
.mainBox .list-view dd .card-title::after {
	width: 20%;
}

/* サイドバーウィジェット サイト専用 ---------------- */

}/* 5.0 media Queries PCサイズ（940px)ここまで /////////////////////////////////////////////////////////////////*/