/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Feb 06 2026 | 05:29:35 */
/*************************************/
/*************************************/
/*************************************/
/**
 * テーマCocoonの外観変更
 *************************************/
/*************************************/
/*************************************/

* {
	word-break: unset;
	overflow-wrap: unset;
}

body {
	overflow-wrap: unset;
}

@media screen and (max-width: 480px) {
	body {
		font-size: inherit;
	}

}

.fz-17px {
    font-size: inherit;
}

.fz-18px {
    font-size: inherit;
}

/* 
google adsense対応。
基本的には、投稿のパンくずリストエリア内のgoogle adsense自動広告は除外すること。
このエリアに広告が挿入された場合、自前ラベルを付けたgoogle adsense自動広告が入ると、広告がパンくずリストエリア内から広告ラベルの分だけ下にはみ出る。
念のための対処。投稿のパンくずリストエリア内が広告縦サイズに応じて広がるようにする。

*/

.breadcrumb div {
/* 	display: inline-block; */
}



/**
ヘッダー

テーマCocoonヘッダー外観仕様メモ
- 表示幅が1023px以下になるとモバイルヘッダー表示になる。
- モバイルヘッダー表示ではないとき(PC表示と仮称)のメニューは2タイプある。センターロゴ(サイトロゴとメニューが縦並び)、トップメニュー(サイトロゴとメニューが横並び)。
- モバイルヘッダー時のモバイルメニューは3タイプある。トップメニュー、モバイルボタン、ボタンなし(メニューなし)
************************************/

.header-in {
/*     padding: 1rem 0; */
}

.logo-text {
    padding: 0 0 10px;
}

/**
ヘッダー キャッチフレーズ
************************************/
.tagline {
	font-size: 0.95rem;
	word-break: keep-all;
	margin: 10px 0 0;
}

@media screen and (width <= 480px) {
	.tagline {
		font-size: 0.92rem;
	}
}


/**
ヘッダー

モバイルヘッダー表示ではないとき
または
モバイルヘッダー表示 かつ モバイル設定 -> モバイルメニュー -> ヘッダーモバイルボタン以外の時
************************************/

/* サイト名テキストサイズ */

#header .site-name-text {
	font-size: 2.6rem;
	letter-spacing: -3px;
	font-weight: 900;
}
@media screen and (width <= 480px) {
	#header .site-name-text {
		font-size: 2rem;
	}
}


/**
ヘッダー
モバイル設定 -> モバイルメニュー -> ヘッダーモバイルボタン時
************************************/


/* サイト名テキストサイズ */
@media screen and (width <= 1023px) {
	.menu-button-in {
		font-size: 2rem;
	}
}


/* サイト名テキストリンク色 */
@media screen and (width <= 1023px) {
	.mobile-menu-buttons .menu-button > a {
		color: #99fed5;
	}
}

/* メニュー展開時のメニュー一覧フォントサイズ */
@media screen and (width <= 1023px) {
	.mobile-menu-buttons .menu-button {
		font-size: 1rem;
	}
}


/* ヘッダー背景色 */
@media screen and (width <= 1023px) {
	.mobile-menu-buttons {
		background-color: #009dbf;
	}
}

/* ヘッダーモバイルボタン時、サイト名マウスオーバー時の装飾 */
.mobile-menu-buttons .menu-button:hover .menu-button-in {
    opacity: unset;
    filter: brightness(1.1);
}


/**
ヘッダーメニュー
Cocoonヘッダーレイアウト センターロゴ時のメニューが表示幅が1023px以下になっても消さない
スマホでのGTranslateの言語選択肢タップ挙動がおかしくなるのでいったん保留。
************************************/
/* @media screen and (width <= 1023px),
@media screen and (width <= 834px) {
	.navi-in > .menu-header {
		display: flex;
	}
}
 */

/**
tagcloud サイドバーのタグ、カテゴリー一覧
************************************/

.tagcloud a {
    font-size: 0.85rem;
}

/**
投稿詳細画面のタグリンク
************************************/

.tag-link {
    font-size: 0.85rem;
}

/**
投稿詳細画面のカテゴリーリンク
************************************/

.cat-link {
    font-size: 0.85rem;
}

/**
figure
************************************/

.main figure.wp-block-table {
    width: auto;
    max-width: 100%;
	
	/* blockだとscroll領域内が狭くなってしまうのでgridに変更 */
	display: grid;
}

/**
テーブル
************************************/

@media screen and (width <= 834px),
screen and (width <= 480px) {
	table th, table td {
		font-size: 0.95rem;
	}
}

@media screen and (480px < width) {
	.scrollable-table th, .scrollable-table td {
		white-space: normal;
	}
}

/**
フロントページ投稿一覧
************************************/

/* フロントページ 投稿一覧のタイトル */
@media screen and (480px < width) {
	.e-card-title {
		font-size: 1.2rem;
	}
}
@media screen and (width <= 480px) {
	.e-card-title {
		font-size: 1.2rem;
	}
}

/* フロントページ 投稿サムネイルのカテゴリーラベルを非表示にする */
.cat-label {
	display: none;
}

/* フロントページ投稿一覧の各投稿に外枠を付ける */

/* .entry-card-wrap {
	outline: 1px solid gray;
    background-color: white;
}
 */

/* フロントページ投稿一覧のタイトル */
.related-entry-card-title, .entry-card-title {
	line-height: 1.25;

	/* Cocoonではフロントページ投稿一覧のタイトルは3行を超える分は切り捨てられるが、それを解除する。 */
	display: unset;
	
	line-break: loose;
}

/**
フロントページ 投稿一覧の投稿画像は枠一杯に表示させる。
************************************/


a.entry-card-wrap {
    padding: 0px;
}

.entry-card-thumb {
    margin-top: 0px;
	margin-bottom: 0px;
}

.entry-card-content.card-content.e-card-content {
    margin: 5px 10px 3px;
}


/** 
 * フロントページ投稿一覧の各投稿にマウスカーソルhover時、スマホタップ時に外枠にドロップシャドウを付ける。
 *************************************/

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

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

	a.entry-card-wrap:hover {
		transition: none;
		background-color: inherit;
		box-shadow: 0px 0px 10px black;
	}
	
	/* 画像の明度を上げる */
	figure.entry-card-thumb.card-thumb.e-card-thumb:hover {
    	filter: brightness(1.13);
	}
}

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

	/* タップしたときに表示	 */
	a.entry-card-wrap:active {
		transition: none;
		background-color: inherit;
		box-shadow: 0px 0px 10px black;
	}
	a.entry-card-wrap:hover {
		background-color: inherit;
	}
}




/**
ウィジェット
************************************/


.widget_recent_entries ul li a, .widget_categories ul li a, .widget_archive ul li a, .widget_pages ul li a, .widget_meta ul li a, .widget_rss ul li a, .widget_nav_menu ul li a, .widget_block ul li a {
    padding: 0.3rem 0;
}

/**
メインカラム
************************************/

/* SNSシェア、フォロー */
.main .sns-buttons a:hover {
    text-decoration: none;
}



/* 投稿タイトル */
.entry-title, .archive-title {
    font-size: 2rem;
/* 	word-break: break-all; */
	line-break: loose;
}

/* 投稿タイトル */
@media screen and (width <= 480px) {
	.entry-title {
		font-size: 1.8rem;
		padding: 0rem;
	}
}

/**
投稿ページ article階層
************************************/

.article h1, .article h2, .article h3, .article h4, .article h5, .article h6 {
    border: none;
}


/**
サイドバー
************************************/

/**
商品リンク
************************************/
@media screen and (width <= 834px) {
	.booklink-link2 > * > a,
	.kaerebalink-link1 > * > a,
	.tomarebalink-link1 > * > a,
	.product-item-buttons > * > a {
		font-size: 0.888rem;
	}
}

.kaerebalink-link1 a,
.booklink-link2 a,
.tomarebalink-link1 a,
.product-item-buttons a {
	font-size: 0.888rem;
}

@media screen and (width <= 480px) {
	.booklink-info, .kaerebalink-info, .tomarebalink-info, .product-item-content {
		text-align: left !important;
	}
}