/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Feb 06 2026 | 04:52:06 */
/*************************************/
/*************************************/
/*************************************/
/**
 * テーマに依存せずに外観をかえたい箇所の共通設定
 *************************************/
/*************************************/
/*************************************/


html {

	/* 
	line-break
	中国語、日本語、韓国語 (CJK) のテキストにおいて、句読点や記号を用いた場合の改行規則（禁則）を設定する。

	strict 最も厳格な改行規則を使用してテキストを改行します。
	*/

	line-break: strict;

	/*
	word-break
	改行しなければテキストがコンテンツボックスからあふれる場合に、ブラウザーが改行を挿入するかどうかを指定します。

	normal 既定の改行規則を使用します。
	keep-all CJK (中国語、台湾語、日本語、韓国語)テキストの改行を許可しません。 CJK 以外のテキストについては normal と同じ挙動となります。 */

	word-break: normal;


	/* 
	overflow-wrap
	インライン要素に対して、テキストが行ボックスをあふれないように、ブラウザーが分割できない文字列の途中で改行を入れるかどうかの設定を適用します。

	anywhere
	あふれることを避けるために、行内にその他の分割可能な位置がない場合、その他の分割できない文字列 — 長い単語や URL — が任意の場所で分割されることがあります。
	*/

	overflow-wrap: anywhere;

	/* 
	ベースフォントサイズをWebブラウザーのフォントサイズよりも2px大きい値にする。
	Webブラウザーのフォントサイズの初期値が16pxなので、基本的には18pxとなる。
	*/
	font-size: calc(1rem + 2px);
}

@media screen and (width <= 480px) {
	html {
		font-size: calc(1rem + 2px);
	}
}

body {
	
	letter-spacing: normal;
	line-height: 1.65;
	font-family: "Meiryo UI", "Yu Gothic UI", "MS PGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
	/* motorolaのAndroid端末で大文字I と小文字のl の区別を付かせたいならmonospace */

}

cite {
	font-size: 0.8rem;
	font-style: normal;
	color: gray;
}

.btn {
    word-break: auto-phrase;
}

/** 
 * 次の構成の体裁
	項目A
	- 箇条書き1
	- 箇条書き2
 *************************************/

.entry-content p:has(+ ul) {
    margin-bottom: 0em;
}

.entry-content li p {
    margin-bottom: 0em;
}

/** 
 * blockquoteタグ装飾
 *************************************/

blockquote {
	color: darkslategray;
	font-size: 0.95rem;
	padding: 10px 10px;
	margin: 0rem;
	max-width: 622px;
/* 	width: fit-content; */
    background-color: snow;
    border: 1px solid gray;
}

blockquote a {
/* 	text-decoration: underline; */
}

blockquote:before {
	display: none;
}
blockquote:after {
	display: none;
}


blockquote cite:before {
	content: none;
}

blockquote cite {
	font-size: 0.8rem;
	font-style: normal;
}

/** 
 * tableタグ装飾
 *************************************/

table {
    font-size: 0.95rem;
	word-break: normal;
	letter-spacing: 0px;
	line-height: 1.2;
	width: auto;
}

table th, table td {
    padding: 0.2rem;
}

table thead tr {
	word-break: keep-all;
}

table tbody tr {
/* 	word-break: normal; */
}

/** 
 * kbdタグ装飾
 *************************************/

kbd {
	margin: 0 2px;
	font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
	color: #444444;
	font-weight: normal;
	font-style: normal;
	text-align: center;
	line-height: 1em;
	text-shadow: 0 1px 0 #fff;
	display: inline;
	padding: .05rem .4rem;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	border: 1px solid #bbb;
	background-color: #f7f7f7;
	background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0)));
	background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
	background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1a000000', endColorstr='#00000000', GradientType=0);
	box-shadow: 0px 2px 0 #bbbbbb, 0 3px 1px #999999, 0 3px 0 #bbbbbb, inset 0 1px 1px #ffffff, inset 0 -1px 3px #cccccc;
}

/*************************************/
/*************************************/
/*************************************/
/**
 * パーツ
 * 独自クラス
 *************************************/
/*************************************/
/*************************************/




/** 
 * ボタン風広告テキストリンクCSS
 * 
 * 使い方
	基本
	<div class="onk-btn-link"><a href="">リンクテキスト</a></div>

	フォントサイズを指定を追加
	<div class="onk-btn-link onk-fz-0p95rem"><a href="">リンクテキスト</a></div>

	
	独自作成した ショップリンクCSSクラス を追加すれば各ショップリンクのボタン色になる。
		onk-ad-link-amazon
		onk-ad-link-rakuten
		onk-ad-link-yahoo
		onk-ad-link-dell

    <div class="onk-btn-link onk-font-1p1rem onk-ad-link-rakuten"><a href="">リンクテキスト</a></div>
 *************************************/



/* ボタン風広告テキストリンクCSSクラス */
.onk-btn-link {
    display: grid;
    justify-self: center;
    text-align: center;
    align-items: center;

	word-break: auto-phrase;
    overflow-wrap: break-word;
/*     font-size: 1rem; */
	font-size: 0.888rem;
	
	width: 100%;

	/* 	padding: 5px 1rem; */
    padding: 5px 0;
	margin: 3px 0 3px !important;

	border-radius: 6px;
	
	color: #ffffff;
	background-color: #232f3e;
}

.onk-btn-link a {
	text-decoration: none;
	color: inherit;
}

@media (hover: hover) and (pointer: fine) {
	.onk-btn-link:hover a  {
		text-decoration: none;
		color: inherit;
	}

	.onk-btn-link:hover {
		filter:
			drop-shadow(0px 2px 2px black)
			brightness(1.5);
	}
}



/*************************************/
/*************************************/
/*************************************/
/**
 * フロントページ
 *************************************/
/*************************************/
/*************************************/


/*************************************/
/*************************************/
/*************************************/
/**
 * mainコンテンツ内
 *************************************/
/*************************************/
/*************************************/


/* 
mainコンテンツにドロップシャドウを付ける。
表示幅 834px より大きいときのみ。
それより小さいときはドロップシャドウが見えていないので処理の無駄となる。
*/
@media screen and (834px < width) {
	.main {
    	filter: drop-shadow(3px 3px 5px black);
	}
}


.main a {
	text-decoration: none;
}

.main a:hover {
/* 	text-decoration: underline; */
}

/* 投稿画像のみに適用 */
.entry-content > p > img,
.entry-content > p > a > img {
    margin-top: 1.8rem;
    display: block;
    /* justify-self: center; */
}

/* 投稿画像のキャプションのみに適用 */
.entry-content > figcaption {
    margin: -1rem 0px 0.9rem 0px;
    color: black;
    background-color: lightgray;

    font-size: 0.95rem;

	text-align: center;
    max-width: 900px;
    width: 100%;
}

.entry-content figure {
    display: grid;
    justify-content: space-between;
}


.entry-content figure figcaption {
    margin: 3px 0 0.9rem 0;
    color: black;
    background-color: lightgray;
    font-size: 0.95rem;
    text-align: center;
}


/**
 * Headingタグ
 *************************************/

.entry-content {
	/* h2タグに連番をつけるためのカウンター */
	counter-reset: heading2Counter 0;
}


.entry-content h1, .entry-content h2,
.entry-content h3, .entry-content h4,
.entry-content h5, .entry-content h6 {

	margin-top: 2rem;

	line-height: 1;
	letter-spacing: -1px;
	font-weight: bold;

	color: Black;
	background: white;

	/* ボーター初期値 */
	border-color: #05618e;
	border-style: solid;
	border-width: 0px 0px;

	padding: 0.3rem 0.2rem;
}

.entry-content h1 span, .entry-content h2 span, 
.entry-content h3 span, .entry-content h4 span, 
.entry-content h5 span, .entry-content h6 span {
    padding: 3px 0 4px;
}

.entry-content h1 {
	font-size: 2rem;

	border-width: 0px 3px;
	filter: drop-shadow(0px 2px 2px black);

}

.entry-content h2 {
	font-size: 1.5rem;
	/* 	border-width: 0px 6px 0px 0px; */
	/* filter: drop-shadow(0px 2px 2px black); */
	background-color: darkturquoise;
	display: grid;
	grid-template-columns: max-content auto;
	padding: 0px;
	gap: 3px;
	align-items: center;
	min-height: 3.3rem;
	
	/* h2内のh3タグに連番をつけるためのカウンター */
	counter-reset: heading3Counter 0;

	/* 
	border-width: 0px 6px;
	filter: drop-shadow(0px 2px 2px black); */
}

/* テーマCocoon用調整。H2見出しをメインカラム幅いっぱいに表示する 
Cocoon設定 -> カラム -> コンテンツ余白幅に依存しているので、そこの値と同じに変更する。
表示幅 834px より大きいときのみ。
*/
@media screen and (834px < width) {
	.entry-content h2 {
		margin-left: -25px;
		margin-right: -25px;
	}
}

/* テーマCocoon用調整。H2見出しをメインカラム幅いっぱいに表示する
表示幅 834px 以下のとき。
*/
@media screen and (width <= 834px) {
	.entry-content h2 {
		margin-left: -16px;
		margin-right: -16px;
	}
}


.entry-content h2:before {
	counter-increment: heading2Counter;
	content: counter(heading2Counter) " ";

	font-size: 2.3rem;
	color: white;
	background-color: #05618e;

	display: inline-grid;
	justify-items: center;
	align-items: center;
	padding: 0px 5px;
	height: 100%;
}


.entry-content h3 {
	font-size: 1.3rem;
	/* 	border-width: 0px 6px 0px 0px; */
	/* filter: drop-shadow(0px 2px 2px black); */
	background: paleturquoise;
	display: grid;
	grid-template-columns: max-content auto;
	padding: 0px;
	gap: 3px;
	align-items: center;
	min-height: 2rem;

	/* border-width: 0px 10px;
	filter: drop-shadow(0px 2px 2px black); */

}


.entry-content h3:before {
	content: counter(heading2Counter) '.' counter(heading3Counter) " ";
	counter-increment: heading3Counter;

	font-size: 1.4rem;
	color: white;
	background-color: #05618e;

	display: inline-grid;
	justify-items: center;
	align-items: center;
	padding: 0px 2px;
	height: 100%;
}


.entry-content h4 {
	font-size: 1.2rem;

	padding-top: 1px;
	padding-bottom: 1px;
	border-width: 0px 0px 0px 14px;
	/* filter: drop-shadow(1px 1px 1px black); */
}


/*************************************/
/*************************************/
/*************************************/
/**
 * header-container内
 *************************************/
/*************************************/
/*************************************/


/*************************************/
/*************************************/
/*************************************/
/**
 * sidebar内
 *************************************/
/*************************************/
/*************************************/


.sidebar {
    /* filter: drop-shadow(3px 3px 5px black); */
	
	font-size: 0.95rem;
}

.sidebar a {
    text-decoration: none;
}

.sidebar a:hover {
/*     text-decoration: underline; */
}

/*************************************/
/*************************************/
/*************************************/
/**
 * 
 *************************************/
/*************************************/
/*************************************/

/** 
 * マウスカーソルhover時、スマホタップ時にテキストリンクの下線を表示させる
 *************************************/

/* 
主にマウスを使うパソコン向けの処理。
デバイスがhoverができる状態、かつマウス等のポインターデバイスが有効の場合。

なぜパソコンと、スマホで処理を分けるのか。
スマホだとタップしたときに、hover時の処理が残ったままになるため。
*/
@media (hover: hover) and (pointer: fine) {

	a:hover {
		text-decoration: underline;
	}

}

/* 
主にタッチ操作のスマホ、タブレット向けの処理。
デバイスがhoverができない状態、またはマウス等のポインターデバイスが無効の場合 */
@media (hover: none) or (pointer: none) {

	/* タップしたときに下線を表示	 */
	a:active {
		text-decoration: underline;
	}

}


/*************************************/
/*************************************/
/*************************************/
/**
 * フォントサイズを変える
 *************************************/
/*************************************/
/*************************************/


.onk-fz-0p95rem { font-size: 0.95rem; }
.onk-fz-1p1rem { font-size: 1.1rem; }
.onk-fz-1p2rem { font-size: 1.2rem; }