/*
  Skin Name: おず用スキン　その８
  Description: おず作成スキンの７からブロックエディタ使用、Meow Gallery、WebP化対応
  Skin URI: https://wp-cocoon.com/
  Author: おず
  Author URI: https://ozpht.myds.me/
  Screenshot URI: https://im-cocoon.net/wp-content/uploads/skin-template.png
  Version: 0.0.0
  Priority: 9999000000
*/
/*以下にスタイルシートを記入してください*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}


/* 2022.4.2 大幅書き替え */
/* 2022.9.23 大幅書き替え */


/*----------
	定数の設定
		--base-color: 背景色（Cocoonの設定にも一部ある）
		--main-color: タブ色、グランドメニューリンク色
		--sub-color: ウィジェット見出し、目次枠色
		--key-color: 検索フォーム、タグクラウド、目次タイトルアイコン色、目次罫線色（淡い色限定！！）
		--shadow-color: ホバー時の枠色
		--text-color: ボックスメニューの文字色

	※Cocoonのキーカラーと--key-colorを一致させておくこと
	※Cocoonの文字色と--text-colorを一致させておくこと
  ---------*/
:root {
	color-scheme: light dark;
	supported-color-schemes: light dark;

	--base-color: #f8f5f1;
	--base-color: #fbfaf5;
	--base-color: #fffef0;
	--base-color: #f5f1dd;
	--base-color: #f8f5f1;
	--base-color: #fbfaf3;
	
	--main-color: #cc6d68;
	--sub-color: #f7c114;
	--key-color: #96514d;
	--shadow-color: #afafb0;
	--text-color: #777;
	--text-color: #5f5f5f;
	--sp1-color: #5aa897;
	--bg-color: #fffdfb;
	--sp1-text-color: #fff;
	--text-shadow-color: #fff;
	
	--blogcard-bgcolor: #fff;

	--key-color050: #ff8882;
	--key-color015: #fff4ea;
	--text-color050: #999;
	--sp1-color050: #eaffd6;

	--cat-usual-color: #f39800;
	--cat-goout-color: #88cb7f;
	--cat-items-color: #2ca9e1;
	--cat-blog-color: #aa4c8f;
	--cat-game-color: #e83929;
	
	--cat-usual-color015: #fff7ef;
	--cat-goout-color015: #efffef;
	--cat-items-color015: #eff7ff;
	--cat-blog-color015: #f7efff;
	--cat-game-color015: #ffefef;

	--cat-usual-color_dark: #cc8100;
	--cat-goout-color_dark: #679960;
	--cat-items-color_dark: #1f7299;
	--cat-blog-color_dark: #994581;
	--cat-game-color_dark: #99261c;

	--cat-usual-postTitle-color: #ffa000;
	--cat-goout-postTitle-color: #1be200;
	--cat-items-postTitle-color: #00b0ff;
	--cat-blog-postTitle-color: #ff00b6;
	--cat-game-postTitle-color: #ff1500;
	
	--cat-usual-postTitle-shadow-color: #3f2800;
	--cat-goout-postTitle-shadow-color: #073900;
	--cat-items-postTitle-shadow-color: #002638;
	--cat-blog-postTitle-shadow-color: #360027;
	--cat-game-postTitle-shadow-color: #360400;
	
	--bg-btn-color: rgba(150,81,77,.05);
	--bg-drawer-color: #fff;

	--marker-yellow: 255, 239, 0;
	--marker-yellow: 255, 255, 0;
	--marker-yellow: 255, 235, 59;
	--marker-red: 245, 178, 178;
	--marker-red: 255, 200, 200;
	--marker-blue: 149, 229, 226;
	--marker-blue: 105, 218, 236;
	--marker-under-yellow: 62, 235, 0;
	--marker-under-yellow: 62, 235, 178;
	--marker-under-yellow: 255, 221, 188;
	--marker-under-yellow: 255, 222, 0;
	--marker-under-yellow: 189, 249, 195;
	--marker-under-yellow: 195, 216, 37;
	--marker-under-yellow: 192, 192, 192;
	--marker-under-red: 255,   0,   0;
	--marker-under-blue: 192, 128, 255;
	--marker-under-blue: 183, 227, 255;
	--marker-under-blue: 247, 194, 225;
	--marker-under-blue: 150, 120, 255;
	--marker-under-blue: 183, 227, 255;
	--marker-under-blue: 150, 200, 255;
	--marker-under-blue: 68, 234, 83;
	
	--marker-opacity: 1.0;
	
	--speech-balloon-left-bg-color: #f5e56b;
--speech-balloon-left-bg-color: rgb(var(--marker-yellow));
	--speech-balloon-right-bg-color: #dbd0e6;
--speech-balloon-right-bg-color: rgb(var(--marker-blue));
	
	--speech-balloon-left-border-color: #ec6800;
	--speech-balloon-right-border-color: #706caa;
		
	--speech-balloon-left-border-tail-color: #ffc540;

	--infomation-bg-color: #f3fafe;
	--comment-bg-color: #fefefe;
	--NGbox-bg-color: #ffe7e7;
	--goodBox-bg-color: #f7fcf7;
	--badBox-bg-color: #fff1f4;
	--memoBox-bg-color: #ebf8f4;
	
	--gmap-invert: 0%;
	--gmap-hue: 0deg;
	--gmap-contrast: 1.0;

	--marker-padding: 3px;
	--radius: 5px;
}

/*  ダークモード対応  2022.5.22 */
@media (prefers-color-scheme: dark) {
	:root {
	 	--base-color: #121212;
	 	--bg-color: #272727;
	 	--bg-color: #002d32;
		--text-color: #fff;
		--text-color050: #bbb;
		--sp1-color: #6e7b6e;
		--sp1-text-color: #f0f0f0;
		--text-shadow-color: #333;
		
		--blogcard-bgcolor: #272727;

		--cat-usual-color015: #544a47;
		--cat-goout-color015: #544a47;
		--cat-items-color015: #544a47;
		--cat-blog-color015: #544a47;
		--cat-game-color015: #544a47;

		--cat-usual-color015: #664d33;
		--cat-goout-color015: #336633;
		--cat-items-color015: #334d66;
		--cat-blog-color015: #4d3366;
		--cat-game-color015: #663333;

		--bg-btn-color: #302833;
		--bg-drawer-color: #475950;
		
/*
		--marker-yellow: 202, 202,   0;
		--marker-red: 245, 178, 178;
		--marker-blue: 127,191, 255;
		--marker-under-yellow: 193, 254, 121;
		--marker-under-red: 255,   0,   0;
		--marker-under-blue: 246, 136, 255;
		--marker-under-blue: 192, 136, 255;
*/
		--marker-opacity: 1.0;

		--speech-balloon-bg-color: var(--bg-drawer-color);

		--infomation-bg-color: var(--bg-drawer-color);
		--comment-bg-color: var(--bg-drawer-color);
		--NGbox-bg-color: var(--cat-game-color015);
		--goodBox-bg-color: var(--bg-drawer-color);
		--badBox-bg-color: var(--cat-game-color015);
		--memoBox-bg-color: var(--bg-drawer-color);

		
		--gmap-invert: 100%;
		--gmap-hue: 180deg;
		--gmap-contrast: 0.75;

	
	}

	.post h1 {
	/*	filter: grayscale(30%);*/
	}
	
	img {
		filter: grayscale(25%);
	}
	.site-logo-image,
	.box-menu-icon img,
	.go-to-top .go-to-top-button img {
		filter: drop-shadow(0 1px 1px #777);
	}
}



/*----------
	サイト全体の背景色を合わせる
	メインとサイドバー部分以外は設定で行う
	（制作中はCSSでimportantを使用して調整する）
  ----------*/

html {
    transition: color 300ms, background-color 300ms;
}

body.public-page {
	background-color: var(--base-color);
	color: var(--text-color);
}

.single #main {
	border-radius: var(--radius);
	background-color: transparent;
}

body:not(.single) #main,
#sidebar {
	background-color: transparent;
}

#header ,
#navi {
	background-color: var(--base-color);
}

#footer {
	background-color: var(--base-color);
}

#footer, #footer a, .footer-title {
 	color: var(--text-color);
 }
 
 
/*----------
	投稿ページ（フロントページ）
　	グリッドレイアウト
	カラム間16px 最小カラム285px (320-14-14=292)
	横方向１〜３カラム
  ----------*/
.ect-entry-card {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(304px, 1fr));
	gap: 14px;
}
.related-list {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(304px, 1fr));
}
/*319px以下*/
@media screen and (max-width: 319px){
  /*必要ならばここにコードを書く*/
	main.main, div.sidebar {
		/*padding: 16px 0;*/
	}
	.ect-entry-card {
		display: grid !important;
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		gap: 14px;
	}
	.related-list {
		display: grid !important;
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	}
}

.entry-card {
	display: grid;
	grid-template-columns:  120px  1fr;
	grid-template-rows: repeat(4, auto);
	gap: 0;
	grid-template-areas:
		"title title"
		"eyecatch snippet"
		"category tag"
		"date date";
}

.entry-card-content,
.entry-card-thumb  {
	display: contents;
}

.entry-card .entry-card-title {
	grid-area: title;
}

.entry-card .entry-card-snippet {
	grid-area: snippet;
}

.entry-card .entry-card-meta {
	grid-area: date;
	position: inherit;
	margin-top: 1em;
}

.entry-card .entry-card-meta .entry-card-categorys {
	display: none;
}

.entry-card .entry-card-tags-ex {
	grid-area: tag;
	margin-top: 1em;
}

.entry-card .entry-card-thumb img {
	grid-area: eyecatch;
}

.entry-card .cat-label {
	grid-area: category;
	margin-top: 2em;
	font-weight: bold;
}



.rect-mini-card .related-entry-card-wrap {
	width: 100%;
	padding: 1.5%;
}

.ect-entry-card .cf::after {
	content: none;
}

.ect-entry-card .tag-link {
	font-size: 0.6em;
}

.ect-entry-card .post-date {
/*	font-size: 0.7em;*/
}

.post-date {
	margin-right: 4em !important;
}


/*----------
	記事一覧表示
	グリッドレイアウト
	カラム間16px  最小カラム140px
	ページID: 1360
	スラッグ: all-articles
  ----------*/
.all-articles {
	--category-postTitle-color: var(--text-color);
	--category-postTitle-color015: var(--bg-color);
}
  
.post-1360 .new-entry-cards  {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 8px;
}
.post-1360 .new-entry-cards a {
	break-inside: avoid;
	border-color: rgba(150,81,77,.5);
	border-radius: var(--radius) !important;
	margin-bottom: unset !important;
	background-image: linear-gradient(180deg, var(--category-color015) 90px , var(--bg-color) 110px) !important;
}

.post-1360 .new-entry-cards a:hover {
    animation: bounce 0.8s ease-out;
    transform: none !important;
}
        
.post-1360 .new-entry-cards a[href*="/usual/"] {
	--category-color015: var(--cat-usual-color015);
}
.post-1360 .new-entry-cards a[href*="/go_out/"] {
	--category-color015: var(--cat-goout-color015);
}
.post-1360 .new-entry-cards a[href*="/items/"] {
	--category-color015: var(--cat-items-color015);
}
.post-1360 .new-entry-cards a[href*="/blog/"] {
	--category-color015: var(--cat-blog-color015);
}
.post-1360 .new-entry-cards a[href*="/game/"] {
	--category-color015: var(--cat-game-color015);
}

.post-1360 .new-entry-cards .widget-entry-card-date {
	position: absolute;
	bottom: 0;
	right: 0;
	font-size:0.7em;
	text-align: center;
	display: none;
}
.post-1360 .new-entry-cards .widget-entry-card-date:before {
	content: none;
}

.post-1360 .new-entry-cards .widget-entry-card-post-date {
	font-size: 1em;
}
.post-1360 .new-entry-cards .widget-entry-card-post-date:before {
	font-family: "Font Awesome 5 Free";
	content: "\f017";
	padding-right: 0px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
	font-weight: normal;
/*	font-size: 1em;*/
}
.post-1360 .widget-entry-card-content {
	margin: 0;
	text-align: center;
}
.post-1360 .new-entry-cards a {
	margin: 0;
	padding: 0;
}
.post-1360 .widget-entry-cards figure {
	width: 100%;
}
.post-1360 .new-entry-cards .card-thumb img {
	margin-bottom: 0.5em;
}
.post-1360 .widget-entry-card {
	position: initial;
}
.post-1360 .widget-entry-card-title {
	margin: 0;
/*	margin-bottom: 1.5em;*/
}
.post-1360 .cat-label {
	display: none;
}

.post-1360 .list-title-in:before,
.post-1360 .list-title-in:after  {
/*	background-color: var(--text-color);*/
}

.post-1360 .new-entry-card .card-thumb img {
	width: 70px !important;
	min-height: 70px;
	max-height: 70px;
}


/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	.post-1360 .widget-entry-card {
		font-size: 13px;
		line-height: 1.4;
	}
}


/*----------
	ナビメニュー
  ----------*/
#navi {
}


/*----------
	トップへ戻るボタン
  ----------*/
.go-to-top {
	bottom: calc(10px + 1em);
}

.go-to-top .go-to-top-button {
	background-color: transparent;
	width: auto;
	height: auto;
}

.go-to-top .go-to-top-button img {
	max-width: 120px;
}

.go-to-top-button:after {
	color: var(--text-color050);
	font-weight: normal;
	font-style: italic;
	position: absolute;

	content: 'トップへ戻る';
	font-size: 14px;
	bottom: -1em;
}

.go-to-top:hover {
	filter: saturate(150%)  drop-shadow(0px -1px 0px #333);
}


/*----------
	サイトロゴ
  ----------*/
.site-logo-image {
	animation: Down 1s ease-out 0s 1 normal;
}

.header-in {
}

#content-top {
}

.box-menus {
	animation: fadeIn 1s ease-out 0s 1 normal;
}


.header .header-in {
	width: 100vw;
}

/* スマホのランドスケープ（縦方向が狭い場合）はタイトル非表示 */
@media screen and (max-height: 500px) and (orientation: landscape) {
	.header .header-in {
		display: none;
	}
}


/*----------
	本文のmargin, padding
  ----------*/

.entry-content>p {
	padding-left: 1em;
	padding-right: 1em;
	padding-left: clamp(12px, 3vw, 2em);
	padding-right: clamp(12px, 3vw, 2em);
}

.entry-content>ol,
.entry-content>ul {
	padding-left: 3em;
	padding-right: 1em;
	padding-left: clamp(calc(12px + 40px), calc( 3vw + 40px), 6em);
	padding-left: clamp(1.5em, 5vw, 3em);
	padding-right: clamp(12px, 3vw, 2em);
}




/*----------
	エントリー、ウィジェットの枠や背景など
  ----------*/
#content a.a-wrap ,
#footer a.a-wrap {
	border-radius: var(--radius);
	position: relative;
	color: var(--text-color);
	box-shadow: 0 0 5px -1px var(--key-color);
/*	transform-origin: right top;*/
	border: 10px solid var(--bg-drawer-color);
	background-color: var(--bg-color) !important;
}
#content a.a-wrap {
/*	background: radial-gradient(circle at 1.5em 1em ,var(--category-color) 0, transparent 3.5em);*/
	background: radial-gradient(circle at 1.5em 1em ,var(--category-color) 0, var(--bg-color) 3.5em);
}
#content a[href*="/usual/"].a-wrap {
	--category-color: var(--cat-usual-color);
}
#content a[href*="/go_out/"].a-wrap {
	--category-color: var(--cat-goout-color);
}
#content a[href*="/items/"].a-wrap {
	--category-color: var(--cat-items-color);
}
#content a[href*="/blog/"].a-wrap {
	--category-color: var(--cat-blog-color);
}
#content a[href*="/game/"].a-wrap {
	--category-color: var(--cat-game-color);
}


#content a.prev-post {
	background: radial-gradient(circle at 25% 0% ,var(--category-prev-color) -50%, var(--bg-color) 32%);
}
#content a[href*="/usual/"].prev-post {
	--category-prev-color: var(--cat-usual-color);
}
#content a[href*="/go_out/"].prev-post {
	--category-prev-color: var(--cat-goout-color);
}
#content a[href*="/items/"].prev-post {
	--category-prev-color: var(--cat-items-color);
}
#content a[href*="/blog/"].prev-post {
	--category-prev-color: var(--cat-blog-color);
}
#content a[href*="/game/"].prev-post {
	--category-perv-color: var(--cat-game-color);
}

#content a.next-post ,
#content a.popular-entry-card-link ,
#content a.related-entry-card-wrap ,
#footer a.a-wrap {
	background: radial-gradient(circle at 82% 100% ,var(--category-next-color) -50%, var(--bg-color) 32%);
}
#content a[href*="/usual/"].next-post ,
#content a[href*="/usual/"].popular-entry-card-link ,
#content a[href*="/usual/"].related-entry-card-wrap ,
#footer a[href*="/usual/"].a-wrap {
	--category-next-color: var(--cat-usual-color);
}
#content a[href*="/go_out/"].next-post ,
#content a[href*="/go_out/"].popular-entry-card-link ,
#content a[href*="/go_out/"].related-entry-card-wrap ,
#footer a[href*="/go_out/"].a-wrap {
	--category-next-color: var(--cat-goout-color);
}
#content a[href*="/items/"].next-post ,
#content a[href*="/items/"].popular-entry-card-link ,
#content a[href*="/items/"].related-entry-card-wrap ,
#footer a[href*="/items/"].a-wrap {
	--category-next-color: var(--cat-items-color);
}
#content a[href*="/blog/"].next-post ,
#content a[href*="/blog/"].popular-entry-card-link ,
#content a[href*="/blog/"].related-entry-card-wrap ,
#footer a[href*="/blog/"].a-wrap {
	--category-next-color: var(--cat-blog-color);
}
#content a[href*="/game/"].next-post ,
#content a[href*="/game/"].popular-entry-card-link ,
#content a[href*="/game/"].related-entry-card-wrap ,
#footer a[href*="/game/"].a-wrap {
	--category-next-color: var(--cat-game-color);
}
#footer a.a-wrap:hover {
	background-color: inherit !important;
	color: inherit !important;
	transform: translateZ(10px) rotate(-2deg) perspective(100px);
}


.entry-card-title:first-letter {
 	font-size: 180%;
	color: #fff;
	text-shadow: none;
	text-shadow: 1px 1px 1px #777, -1px 1px 1px #777, 1px -1px 1px #777, -1px -1px 1px #777;
}


.prev-post {
	border-radius: 25% var(--radius) var(--radius) 0% / 95% var(--radius) var(--radius) 0% !important;
	transform: rotate(0deg) !important;
	border-width: 6px !important;
}

.next-post {
	border-radius: var(--radius) 0% 25% var(--radius) / var(--radius) 0% 95% var(--radius) !important;
	transform: rotate(0deg) !important;
	border-width: 6px !important;
}

.prev-next-home {
	transform: rotate(0deg) !important;
	transition: all 0.3s ease-in-out !important;
}

.prev-next-home span {
	transition: all 0.6s ease-in-out !important;
}

	
.prev-post-title,
.next-post-title {
	font-size: 16px;
	line-height: 1.6;
	font-weight: bold;
}

.prev-post:hover {
	transform: translateX(-3px) rotateY(-10deg) !important;
	transform-origin: right !important;
}

.next-post:hover {
	transform: translateX(3px) rotateY(-10deg) !important;
	transform-origin: left !important;
}

.prev-next-home:hover {
/*	box-shadow: 0 0 6px var(--sp1-color) !important;
	border: none !important;*/
	transition: all 0.3s ease-in-out !important;
}

.prev-next-home:hover span {
	text-shadow: 8px 6px 10px var(--shadow-color);
	color: var(--key-color050);
	transition: all 0.6s ease-in-out !important;
}


.ect-entry-card a.a-wrap {
	border-radius: 8% 45% 26% 42% / 10% 27% 48% 36% !important;
	transform: rotate(-1deg);
}

.ect-entry-card a.a-wrap:hover {
	color: inherit !important;
/*	transform: translateZ(10px) rotate(-2deg) perspective(100px);*/
/*	animation: mochimochi 1s infinite;*/
	animation: yureru-j 2s infinite;
/*	animation: yureru-js 0.4s infinite;*/
}


.related-list a,
.popular-entry-cards a,
.new-entry-cards a {
	min-height: calc(100px + 1em);
	margin-bottom: -10px !important;
	border-radius: 6% 2% 0% 0% / 20% 6% 0% 0% !important;
	border-width: 6px !important;
	transform: rotate(0deg) !important;
	transition-duration: 0.5s;
}

.related-list a:hover,
.popular-entry-cards a:hover,
.new-entry-cards a:hover {
	background-color: inherit !important;
	color: inherit !important;
	transform: translateX(18px) translateY(-6px) rotate(3deg) !important;
	transition-duration: 0.15s;
	box-shadow: 0 0px 5px -1px var(--key-color),0 8px 10px -1px var(--key-color) !important;
}


.widget-entry-card figure {
	width: 130px;
}

.widget-entry-card-content {
	margin-left: 130px;
}

.widget-entry-card-title {
	margin: 0 0 1em 1em;
}


/*  エントリーカードの画像部分のpadding調整 */
.widget-entry-cards .a-wrap {
	padding: 5px 0;
}


.sticker {
	position: absolute;
	top: -25px;
	right: -25px;
	background-repeat: no-repeat;
	background-position: top;
	background-size: contain;
	width: 60px;
	height: 60px;
	z-index: 99;
	filter:
			drop-shadow(3px 3px 0px var(--bg-drawer-color))
			drop-shadow(-3px -3px 0px var(--bg-drawer-color))
			drop-shadow(3px -3px 0 var(--bg-drawer-color))
			drop-shadow(-3px 3px 0 var(--bg-drawer-color))
			drop-shadow(0 0 3px #000);
	transform: rotate(2deg);
}

.ect-entry-card a[href*="/usual/"] .sticker {
	background-image: url("https://ozpht.myds.me/wp-content/uploads/theme-images/osyaberi_man-sticker.png");
}
.ect-entry-card a[href*="/go_out/"] .sticker {
	background-image: url("https://ozpht.myds.me/wp-content/uploads/theme-images/carrycase_man-sticker.png");
}
.ect-entry-card a[href*="/items/"] .sticker {
	background-image: url("https://ozpht.myds.me/wp-content/uploads/theme-images/present_jibun_gohoubi_man-sticker.png");
}
.ect-entry-card a[href*="/blog/"] .sticker {
	background-image: url("https://ozpht.myds.me/wp-content/uploads/theme-images/blogger_man_m-sticker.png");
}
.ect-entry-card a[href*="/game/"] .sticker {
	background-image: url("https://ozpht.myds.me/wp-content/uploads/theme-images/game_friends_sueoki-sticker.png");
}

/*----------
	サムネイルの表示設定
  ----------*/
.entry-card-thumb {
	width: auto !important;
}
	
/*.entry-card-thumb img */
.card-thumb img {
	width: 100px !important;
	margin: 0;
	padding: 0;
/*	object-fit: cover;*/
	object-fit: contain;
	background-color: transparent;

	display: flex;
	justify-content: center;
	place-items: center;
	margin-left: auto;
	margin-right: auto;
	min-height: 100px;
	max-height: 100px;
/*	height: 100%;*/
	border: none;
}

/*----------
	抜粋文の行の高さを本文と合わせる
	（Cocoonの設定を一致させる）→ やめた2022/8/14
  ----------*/
.entry-card-snippet {
	line-height: 1.8;
}

/*----------
	ページ送りは上下の余白を無視して上下目一杯で表示
  ----------*/
.pager-post-navi .card-thumb img {
	margin-top: -10px;
	margin-bottom: -10px;
	height: 100%;
}

.pagination .current {
	background-color: var(--key-color050) !important;
	border-color: var(--key-color) !important;
	color: #fff;
}


/*----------
	ページネーション
  ----------*/
.pagination-next a {
	border-radius: var(--radius);
	background-color: var(--bg-btn-color);
	color: var(--text-color050);
}


.page-numbers {
	border-style: dashed;
	border-width: 2px;
	background-color: var(--bg-btn-color);
	color: var(--text-color050);
	border-radius: var(--radius);
}

.current {
	border-style: solid;
}

.pagination a:hover {
	border-style: solid;
}

.dots {
	background-color: var(--bg-btn-color) !important;
}

.next {
	border-style: solid;
	background-color: var(--bg-btn-color);
}

.prev {
	border-style: solid;
	background-color: var(--bg-btn-color);
}

.pagination-next-link:hover {
	box-shadow: 0 1px 5px -1px rgba(150,81,77,.5);
}


/*----------
	新着・人気ウィジェットの投稿日
  ----------*/
.entry-category, .post-date, .post-update, .post-author, .amp-back {
    font-size: 0.9rem;
}


/*----------
	ウィジェットの投稿日のアイコンの変更
  ----------*/
.widget-entry-card-date::before{
	font-family: "Font Awesome 5 Free";
	content: "\f017";
	padding-right: 0px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
	font-weight: normal;
	font-size: 0.9em;
}


/*----------
	ウィジェットの更新日のアイコンの変更
  ----------*/
.widget-entry-card-update-date::before{
	font-family: "Font Awesome 5 Free";
	content: "\f1da";
	padding-right: 0px;
	font-weight: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
	font-weight: normal;
	font-size: 0.9em;
}


/* 投稿日は表示する */
.widget-entry-card-date {
	display: block;
	bottom: 0;
	right: 0;
	position: absolute;
}

/* 更新日は表示しない */
.widget-entry-card-update-date {
	display: none;
}


/*----------
	固定ページはタイトル・日付を非表示にする
  ----------*/
.page .entry-title,
.page .date-tags,
.page .author-info {
	display: none;
}


/*----------
	ナビメニュー
	マウスオーバーの時はアンダーラインを引く
	背景色の変更はしない
  ----------*/
#navi .navi-in a:hover {
	background-color: transparent !important;
}
#navi .navi-in a {
	position: relative;
}
#navi .navi-in a::after {
	position: absolute;
	bottom: 0px;
	left: 0;
	display: block;
	content: "";
	width: 100%;
	height: 4px;
	background: var(--main-color);
	transform: scaleX(0);
	transition: transform 0.4s;
}
#navi .navi-in a:hover::after {
	transform: scaleX(1);
	transition: transform 0.3s;
}
.navi-in > ul li {
	width: 14em;
}


/*----------
	目次クリックで飛ぶ時に見出しが見やすい位置の調整
  ----------*/
span[id^="toc"] {
	padding-top: 3.5em;
}


/*----------
	目次
  ----------*/
.toc {
	box-shadow: 0 0 0 2px var(--sub-color);
	border: none;
	border-radius: var(--radius);
	background-color: var(--bg-color);
	width: 70%;
}

.toc-title {
	margin: 0 20px 20px -10px;
	font-size: 1.4em;
	font-weight: normal;
}

.toc-title:before {
	font-family: "Font Awesome 5 Free";
	content: "\f56b";
	font-weight: bold;
	font-size: 1em;
	color: #fff;
	background-color: var(--key-color050);
	border-radius: 50%;
	padding: 14px;
	margin-right: 0.5em;
}

.toc .toc-list ul,
.toc .toc-list ol {
	padding-left: 0;
}

.toc .toc-content {
	padding: 1em 1em;
}

.toc ul {
	list-style: none;
}

.toc ul li{
	position: relative;
	padding-left: 35px;
}

.toc ul li:before {
	font-family: "Font Awesome 5 Free";
	content: "\f14e";
	position: absolute;
	font-weight: bold;
	left: 5px;
	font-size: 1.2em;
	-webkit-transition: all 0.8s ease-in-out;
	transition: all 0.8s ease-in-out;
	background-position: bottom;
	top: -0.2em;
}


.toc ul li:hover:before {
	color: var(--key-color050);
	transform:rotate(720deg);
	transform-origin: center;
}

.toc a {
	display: block;
	border-bottom: 2px dotted #ccc;
	width: 100%;
	color: var(--text-color);
}

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

/* モバイル用 */
@media screen and (max-width: 480px){
	.toc {
		width: 80vw;
	}
	.toc .toc-content {
		padding: 1em 0;
	}
}



/*	サイドバーの目次	*/
.sidebar .toc{
	background:transparent;
	border: none;
	box-shadow: none;
	width: 100%;
	padding: 1em 0.5em;
}

.sidebar .toc li:before {
	top: 0.2em;
}

.sidebar .toc a {
	line-height: 2.4;
}


/*----------
	カテゴリーラベルの調整
  ----------*/
.cat-label {
/*	width: 100%;*/
	font-size: 0.6em;
/*	top: auto;
	bottom: 0;
	left: 0;
*/
	max-width: 100%;
	bottom: 0;
	top: auto;
	left: auto;
	margin-right: 10px;
	margin-left: 10px;
	padding: 2px 6px;
	text-align: center;
/*	border-radius: var(--radius);*/
}
.cat-label:before {
	font-family: "Font Awesome 5 Free";
	content: "\f07b";
	font-size: 1em;
	padding-right: 0.5em;
	font-weight: bold;
}

.cat-link, .cat-label {
	border-radius: var(--radius);
}

.tag-link {
	padding: 2px 6px;
}


/*----------
	ボックスメニュー
  ----------*/
#content-top .box-menus {
}

#content-top .box-menu {
	position: relative;
	width: calc(100% / 4); /* メニューの数 */
	background: transparent;
	border-radius: 50%;
	box-shadow: none;

	background-repeat: no-repeat;
	background-position: center;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border: 1px solid transparent;
/*	margin-top: 1.5em;*/
	margin-bottom: 2em;
}
#content-top .box-menu:first-child {
	margin-left: auto;
}
#content-top .box-menu .box-menu-label {
	margin-top: 1.5em;
	width: 8em;
}

#content-top .box-menu  .box-menu-label {
	border-top: 5px solid var(--category-box-menu-color);
}
#content-top .box-menu[href*="/usual/"]  .box-menu-label {
	--category-box-menu-color: var(--cat-usual-color);
}
#content-top .box-menu[href*="/go_out/"]  .box-menu-label {
	--category-box-menu-color: var(--cat-goout-color);
}
#content-top .box-menu[href*="/items/"]  .box-menu-label {
	--category-box-menu-color: var(--cat-items-color);
}
#content-top .box-menu[href*="/blog/"]  .box-menu-label {
	--category-box-menu-color: var(--cat-blog-color);
}
#content-top .box-menu[href*="/game/"]  .box-menu-label {
	--category-box-menu-color: var(--cat-game-color);
}

#content-top .box-menu-description {
/*	color: var(--text-color050);*/
	color: var(--text-color);
	font-size: 2em;
	font-weight: normal;
/*	font-style: italic;*/
	bottom: 0.5em;
	position: absolute;

/*	font-family: 'Snell Roundhand',cursive;*/
	font-family: 'Nothing You Could Do', cursive;
		
	width: 100%;
	max-width: 20vw;
	transform: rotate(-4deg);
}

#content-top .box-menu:before {
}

#content-top .box-menu .box-menu-icon {
	color: var(--text-color);
	position: relative;
}

#content-top .box-menu .box-menu-label {
		color: var(--text-color);
}

#content-top .box-menu-icon img {
	max-width: none;
	max-height: none;
	width: 130px;
	height: auto;
}


/* マウスオーバー時の設定 */
#content-top .box-menu:hover {
/*	box-shadow: 0 0 0 4px #fff;*/
	animation: key1 2.0s ease-in-out infinite alternate;
}

#content-top .box-menu-icon:hover {
	animation:bounce 0.8s ease-out;
}
 


/* モバイル用の設定 */
@media screen and (max-width: 480px){
	#content-top .box-menus {
		gap: 2px;
	}
	#content-top .box-menu {
		width: calc((100% / 4) - 2px); /* メニューの数 */
		padding-left: 0;
		padding-right: 0;
	}
	#content-top .box-menu .box-menu-label{
/*		font-size: 12px;*/
/*		width: 20vw;*/
		font-size: clamp(10px, 3vw, 12px);
		width: calc(20vw - 2px);
	}
	#content-top .box-menu{
		min-height: 50px; /* 高さ */
	}
	#content-top img {
		max-width: 23.5vw;
		max-height: 23.5vw;
		width: 85% !important;
		height: auto;
	}
	.wwa .box-menus {
		margin-left: 3vw;
		margin-right: 3vw;
		margin-left: 0;
		margin-right: 0;
	}
	#content-top .box-menu-description {
		font-size: clamp(1em,5vw,20px);
		font-weight: bold;
/*		top: -0.4em;*/
		bottom: 1.2em;
	}
}


/*----------
	ボックスメニュー（フッター）一覧表示のやつ
  ----------*/
#footer .box-menus, #footer .widget-entry-cards {
}

#footer-in .box-menu {
	position: relative;
	width: calc(100% / 2); /* メニューの数 */
	background: transparent;
	border-radius: 50%;
	box-shadow: none;

	background-repeat: no-repeat;
	background-position: center;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border: 1px solid transparent;
	margin-top: 1.5em;
	transition: all 1.0s ease-in-out;
}
#footer-in .box-menu-description {
	color: var(--text-color050);
	font-size: 2em;
	font-weight: normal;
/*	font-style: italic;*/
	top: -0.5em;
	position: absolute;
	width: 100%;
	transform: rotate(-4deg);

	font-family: 'Nothing You Could Do', cursive;
}

#footer-in .box-menu:before {
}

#footer-in .box-menu .box-menu-icon {
	color: var(--text-color);
	position: relative;
}

#footer-in .box-menu .box-menu-label {
}

#footer-in .box-menu-icon img {
	max-width: none;
	max-height: none;
	width: 130px;
	height: auto;
}

/* マウスオーバー時の設定 */
#footer-in .box-menu:hover {
/*	box-shadow: 0 0 0 4px #fff;*/
	animation: key1 2.0s ease-in-out infinite alternate;
	background-color:  unset;
}

#footer-in .box-menu-icon:hover {
	animation:bounce 0.8s ease-out;
}


/*----------
	検索窓
  ----------*/
.search-box {
	margin: 0;
}
.search-edit, input[type="text"] {
   border: 1px solid var(--key-color);
   border-radius: var(--radius);
  outline: none;
}
[type=submit].search-submit {
   top: 10%;
    right: 5px;
    height: 80%;
    padding: 8px 20px;
    background: var(--key-color);
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: var(--radius);
}
[type=submit].search-submit:hover {
    color: #fff;
    background: var(--key-color050);
}


/*----------
	記事一覧ページ（ショートコードのサイトマップ使用時）
  ----------*/
.list-of-articles {
	text-align: center;
	font-size: 18px;
	margin-top: 3em !important;
	margin-bottom: 2em !important;
	display: block;
	margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}


/*----------
	記事一覧ページ（アイキャッチ付きサイトマップ（自作）
  ----------*/
.page-template-sitemap_eyecatch .breadcrumb {
	display: none
}

.page-template-sitemap_eyecatch ul li {
	list-style-type: none;
}

.page-template-sitemap_eyecatch ul.sitemap_menu {
	display: flex;
	margin: 0 0 3em 0;
	padding: 0;
	justify-content: space-around;
}

.page-template-sitemap_eyecatch ul.sitemap_menu li {
}


.page-template-sitemap_eyecatch h1 {
}

.page-template-sitemap_eyecatch h2 {
	border-width: 2px 0;
	border-style: solid;
	border-color: var(--key-color);
	text-align: center;
	margin-bottom: 1em;
}

.page-template-sitemap_eyecatch ul.sitemap {
	padding-left: 0;
}

.page-template-sitemap_eyecatch ul.sitemap li.sitemap_post {
	padding-left: 60px;
	background-repeat: no-repeat;
	background-position: left center;
	line-height: 55px;
}

ul.sitemap li.sitemap_post a {
}

.page-template-sitemap_eyecatch ul.sitemap li.sitemap_post span.post-date{
	display: none;
}

/*----------
	見出し
  ----------*/
/* ウィジェット部分 */
.widget h3 {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 25px;
	text-align: center;
	margin-top: 1em;
	margin-bottom: 0.5em;
	background: none !important;
	font-weight: normal;
}

.widget h3::before,
.widget h3::after {
	content: '';
	width: 2.5px;
	height: 40px;
	background-color: var(--sub-color);
}

.widget h3::before {
	margin-right: 20px;
	transform: rotate(-35deg)
}
.widget h3::after {
	margin-left: 20px;
	transform: rotate(35deg)
}


/*----------
	記事ページの位置調整
  ----------*/
.entry-content {
	margin-top: 3em;
	margin-bottom: 3em;
}




/*----------
	エントリーページのタイトルに対してのmargin調整
  ----------*/
.entry-card-title, .related-entry-card-title {
	margin: 0 2em 1em 10px;
	text-shadow: 1px 1px 1px var(--text-shadow-color), -1px 1px 1px var(--text-shadow-color), 1px -1px 1px var(--text-shadow-color), -1px -1px 1px var(--text-shadow-color);
	
	font-family: "UD デジタル 教科書体 NK-R", "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";

/*   	font-size: 22px;*/

}


/* コンテンツ部分 */
.post h1 {
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 192 192'%3E%3Cpath fill='%23cc6d68' fill-opacity='0.22' d='M192 15v2a11 11 0 0 0-11 11c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H145v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11 13 13 0 1 1 .02 26 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43a6.1 6.1 0 0 0-3.03 4.87V143h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 181 164a11 11 0 0 0 11 11v2a13 13 0 0 1-13-13 12 12 0 0 1 3.11-7.53l2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84a6.1 6.1 0 0 0-4.87-3.03H145v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 124 181a11 11 0 0 0-11 11h-2a13 13 0 0 1 13-13c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43a6.1 6.1 0 0 0 3.03-4.87V145h-35.02a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 107 124a11 11 0 0 0-22 0c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H49v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11A13 13 0 0 1 81 192h-2a11 11 0 0 0-11-11c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V145H11.98a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 0 1 0 177v-2a11 11 0 0 0 11-11c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H47v-35.02a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 28 109a13 13 0 1 1 0-26c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43A6.1 6.1 0 0 0 47 84.02V49H11.98a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 11 28 11 11 0 0 0 0 17v-2a13 13 0 0 1 13 13c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84A6.1 6.1 0 0 0 11.98 47H47V11.98a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 68 11 11 11 0 0 0 79 0h2a13 13 0 0 1-13 13 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43A6.1 6.1 0 0 0 49 11.98V47h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 85 68a11 11 0 0 0 22 0c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H143V11.98a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 124 13a13 13 0 0 1-13-13h2a11 11 0 0 0 11 11c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V47h35.02a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 179 28a13 13 0 0 1 13-13zM84.02 143a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 83 124a13 13 0 1 1 26 0c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84a6.1 6.1 0 0 0 4.87 3.03H143v-35.02a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 164 107a11 11 0 0 0 0-22c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V49h-35.02a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 1 1 83 68a12 12 0 0 1 3.11-7.53l2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84A6.1 6.1 0 0 0 84.02 49H49v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 28 85a11 11 0 0 0 0 22c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V143h35.02z'%3E%3C/path%3E%3C/svg%3E");

	letter-spacing: 0.00em;

	color: var(--category-postTitle-color);
/*	color: var(--text-color);*/

/*	font-weight: normal;*/
/*	text-shadow: 2px 2px 2px var(--category-postTitle-color_dark);
	-webkit-text-stroke: 2px var(--category-postTitle-color_dark);
*/

	text-align: center;

	border-width: 12px;
	border-width: clamp(8px, 2vw, 12px);
	border-style: solid;
	
	border-radius: var(--radius);

	font-size: 3em;
	font-size: clamp(1em, 2vw + 1em, 2.5em);
	padding: 3em 24px;
	line-height: 1.35em;
/*	font-style: italic;*/

	border-color: var(--category-postTitle-color);
	background-color: var(--category-postTitle-color015);

	font-family: "UD デジタル 教科書体 NK-R", "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";


	/*	アンチエイリアス*/
	-webkit-transform-origin: 0 0;
	-webkit-transform: scale(1, 1.01);
	-moz-transform-origin: 0 0;
	-moz-transform: scale(1, 1.01);
	-ms-transform-origin: 0 0;
	-ms-transform: scale(1, 1.02);
	-o-transform-origin: 0 0;
	-o-transform: scale(1, 1.01);
}

.post h1 span {
	display: inline-block;
	text-align: left;
	text-shadow: 0px 2px 3px var(--category-postTitle-color_dark);
/*	-webkit-text-stroke: 2px var(--category-postTitle-color_dark);*/

}



.about-oz36 {
	--category-postTitle-color: var(--key-color);
	--category-postTitle-color015: var(--key-color015);
	--category-postTitle-color_dark: var(--key-color);
}

.category-usual-post {
	--category-postTitle-color: var(--cat-usual-postTitle-color);
	--category-postTitle-color015: var(--cat-usual-color015);
	--category-postTitle-color_dark: var(--cat-usual-postTitle-shadow-color);
}

.category-go_out-post {
	--category-postTitle-color: var(--cat-goout-postTitle-color);
	--category-postTitle-color015: var(--cat-goout-color015);
	--category-postTitle-color_dark: var(--cat-goout-postTitle-shadow-color);
}

.category-items-post {
	--category-postTitle-color: var(--cat-items-postTitle-color);
	--category-postTitle-color015: var(--cat-items-color015);
	--category-postTitle-color_dark: var(--cat-items-postTitle-shadow-color);
}

.category-blog-post {
	--category-postTitle-color: var(--cat-blog-postTitle-color);
	--category-postTitle-color015: var(--cat-blog-color015);
	--category-postTitle-color_dark: var(--cat-blog-postTitle-shadow-color);
}

.category-game-post {
	--category-postTitle-color: var(--cat-game-postTitle-color);
	--category-postTitle-color015: var(--cat-game-color015);
	--category-postTitle-color_dark: var(--cat-game-postTitle-shadow-color);
}

.post h1>p.postSubTitle {
	margin-top: 1em;
	margin-bottom: 0;
	font-size: clamp(16px, 16px + 1vw, 30px);
}


.entry-content h2 {
/*	background-color: transparent !important;

    position: relative;
    padding: 1em 2em;
    border-radius: 5px;
    box-shadow: 7px 7px #f0b531, 7px 7px 0 3px #212121;
    outline: 3px solid #212121;
    background-color: #fefefe;
    color: #212121;
    font-size: 26px;
    font-weight: bold;
    text-align: center;
*/


/*  https://pa-tu.work/category/1   */

    position: relative;
    padding: 1em;
    border-radius: var(--radius);
/*    outline: 2px solid var(--category-postTitle-color);
    outline-offset: 5px;*/
    border: 4px solid var(--bg-color);
    box-shadow: 0 0 0 2px var(--category-postTitle-color);
    background:
		linear-gradient(
			-45deg,
			transparent 0 20px,
			var(--category-postTitle-color015) 20px calc(100% - 20px),
			transparent calc(100% - 20px)
			),
			repeating-linear-gradient(
				-45deg,
				var(--category-postTitle-color) 0 2px,
				var(--category-postTitle-color015) 2px 6px
				);
    color: var(--text-color) !important;
    text-shadow:
		-1px -1px 0 var(--bg-color),
		-1px  1px 0 var(--bg-color),
		 1px -1px 0 var(--bg-color),
		 3px  3px 0 var(--bg-color);
    font-size: 1.7em;
    font-weight: bold;
    text-align: center;



}

.entry-content h3 {
/*	background-color: transparent !important;*/
	border: none !important;
	padding: 0;
}

.entry-content h3 {
    position: relative;
    padding: 1em 2em 1em 2em;
    padding: 0.65em 2em 0.65em 2em;
/*    outline: 1px solid #777;*/
	box-shadow: 0 0 0 1px #777;
/*    background-image:
        radial-gradient(ellipse at bottom, #fff 0 80%, transparent 60%),
        repeating-linear-gradient(135deg, #f0b531 0 2px, transparent 2px 6px);*/
/*    background-image:
        radial-gradient(ellipse at bottom, var(--bg-color) 0 80%, transparent 60%),
        repeating-linear-gradient(135deg, var(--category-postTitle-color) 0 2px, var(--bg-color) 2px 6px);
*/
    background-image:
        radial-gradient(ellipse at bottom, var(--bg-color) 0 72%, transparent 87%),
        repeating-linear-gradient(135deg, var(--category-postTitle-color) 0 1px, var(--bg-color) 3px 6px);
    color: var(--text-color);
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
}




.entry-content h3.zz {
	position: relative;
	padding: 8px 15px 8px 2.5em !important;
	margin-left: 1em;
	margin-right: 0.5em;
	border-bottom: solid 0px #000;
	background: linear-gradient(0deg, rgba(246,89,115,0.1), rgba(246,89,115,0)) !important;
}

.entry-content h3.zz:before{
	content: "\f303";
	font-family: "Font Awesome 5 Free";
	position: absolute;
	font-size: 2em;
	left: -10px;
	bottom: 0;
	color: #f69;
	transform: rotate(-25deg);
	z-index: 99;
}

.entry-content h3.zz:after{
	content: "";
	position: absolute;
	width: 100%;
	height: 3px;
	bottom: -3px;
	left: 0;
	background-repeat: repeat-x;
	background-size: 0.6em 0.2em,1.6em 0.2em,3.4em 0.2em,3.6em 0.2em;
	background-position: right bottom;
	background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(246,89,115,0)), color-stop(0.1, rgba(246,89,115,0.02)), color-stop(0.5, rgba(246,89,115,1)), color-stop(0.98, rgba(246,89,115,0)), to(rgba(246,89,115,0)) );
	background-image:
			-webkit-radial-gradient(center center,0.2em 0.1em,rgba(246,89,115,1) 0,rgba(246,89,115,0) 0.1em,rgba(246,89,115,0) 0.2em),
			-webkit-radial-gradient(center center,0.4em 0.1em,rgba(246,89,115,1) 0,rgba(246,89,115,0) 0.3em,rgba(246,89,115,0) 0.4em),
			-webkit-radial-gradient(center center,0.7em 0.1em,rgba(246,89,115,1) 0,rgba(246,89,115,0) 0.6em,rgba(246,89,115,0) 0.7em),
			-webkit-radial-gradient(center center,7.1em 0.1em,rgba(246,89,115,1) 0,rgba(246,89,115,0) 7em,rgba(246,89,115,0) 7.1em);
	background-image:
			radial-gradient(0.2em 0.1em at center center,rgba(246,89,115,1),rgba(246,89,115,0)),
			radial-gradient(0.4em 0.1em at center center,rgba(246,89,115,1),rgba(246,89,115,0)),
			radial-gradient(0.7em 0.1em at center center,rgba(246,89,115,1),rgba(246,89,115,0)),
			radial-gradient(7.1em 0.1em at center center,rgba(246,89,115,1),rgba(246,89,115,0));
}



.entry-content h4 {
	text-align: center;
}


.entry-content h5.a {
	position: relative;
	padding-left: 30px;
	border: none;
	margin-left: 1em;
}
.entry-content h5.a::before,
.entry-content h5.a::after{
	content: "□";
	position: absolute;
}
.entry-content h5.a:before {
	left:0;
	top:-3px;
}
.entry-content h5.a:after {
	left: 5px;
	top: 3px;
	color: #A1B8D1;
}


.entry-content h5 {
  padding-left: 45px;
  position: relative;
  border: none;
}
.entry-content h5:before {
  content: "";
  background-color: var(--category-postTitle-color);
  width: 25px;
  height: 25px;
  position: absolute;
  left: 5px;
  transform:
    rotate(45deg)
    skew(
      calc((90deg - 60deg) / 2),
      calc((90deg - 60deg) / 2)
    );
}

.entry-content h5:after{
  content: "";
  background-color: var(--category-postTitle-color);
  opacity: 0.5;
  width: 15px;
  height: 15px;
  left: 25px;
  top: 30px;
  position: absolute;
  transform:
    rotate(45deg)
    skew(
      calc((90deg - 60deg) / 2),
      calc((90deg - 60deg) / 2)
    );
}





/*----------
	タグクラウド
  ----------*/
.tagcloud a {
	border-radius: var(--radius);
	border: 1px solid var(--key-color) !important;
/*	background-color: var(--key-color015);*/
	padding: 2px 6px;
	margin: 3px;
	color: var(--text-color);
}

.tagcloud a:before {
/*	content: '#';*/
}

.tagcloud a:hover {
	background: var(--key-color050) !important;
	color: #fff !important;
}

.tag-link {
	border-radius: var(--radius);
	color: var(--text-color);
/*	background-color: var(--key-color015);*/
}

/* span class="mytagnumberを付けた場合 */
.mytagnumber {
	border-left: 1px dashed var(--key-color050);
	padding-left: 4px;
	margin-left: 2px;
}


/* インデックスのタグ表示部分 */
.entry-card-tags-ex {
/*	margin-top: 1em;
	margin-bottom: 1em;
*/
}

/* タグ表示の時はアンカー記号は非表示 */
.tag-link .internal-icon,
.tag-link .anchor-icon {
	display: none;
}

/* タグ表示ではアンカー記号は非表示 */
.tagcloud .internal-icon,
.tagcloud .anchor-icon {
	display: none;
}


/*----------
	記事の目安時間の調整
  ----------*/
 .read-time {
	border-top-color: #ccc;
	border-bottom-color: #ccc;
	font-weight: normal;
 }
 
.read-time span.bold {
	font-weight: normal;
}
 


/*----------
	関連記事
  ----------*/
.related-entry-card-snippet {
}

.rect-mini-card .related-entry-card-wrap {
}


/*----------
	SNSフォローボタン
  ----------*/
.sns-follow-buttons a {
	border-radius: var(--radius);
}

  
.sns-follow-buttons {
	justify-content: center;
}
  
.sns-follow-buttons a {
	width: 16%;
}

@media screen and (max-width: 834px) {
	.sns-follow-buttons {
		justify-content: space-around;
	}

	.sns-follow-buttons a {
		width: 32%;
	}
}

/*----------
	プロフィールウィジェット
  ----------*/
.author-box {
/*	border: 1px solid var(--key-color) !important;*/
	border: none;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding:  20px 0 !important;
}

.author-thumb {
 	width: 110px !important;
 	height: 110px;
 	padding: 5px;

	background-image: -webkit-linear-gradient(315deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%);
 	background-image: linear-gradient(135deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%);

	clip-path: circle(54px at 50% 50%);
	
	transition: all 0.5s ease-in-out !important;
	transform-style: preserve-3d; /*3D化*/
}

.author-box .circle-image img {
/*	box-shadow: 0 0 0 3px var(--sub-color);*/
}

.author-thumb:hover {
/*  transition: 1.5s ;
  transform: rotateY( 360deg ) ;*/
	transition: all 1.5s ease-in-out !important;

 	transform: rotateY(360deg) perspective(100px);

}

.author-content {
	padding-left: 0;
	padding-right: 0;
}

.author-description {
	font-size: 0.9em;

	position: relative;
	padding: 1em;
	background-color: var(--sp1-color);
	color: var(--sp1-text-color);
	border-radius: var(--radius)
}
/* 色付きの半円 */
.author-description::before{
	content: '';
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	border-radius: 50%;
	transform: rotate(45deg);
	left: 30px;
	top: -25px;
	border-left: 30px solid var(--sp1-color);
	border-top: 30px solid var(--sp1-color);
	border-right: 30px solid transparent;
	border-bottom: 30px solid transparent;
}
/* 白い半円 */
.author-description::after{
	content: '';
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	border-radius: 50%;
	transform: rotate(45deg);
	left: 45px;
	top: -30px;
	border-left: 30px solid var(--base-color);
	border-top: 30px solid var(--base-color);
	border-right: 30px solid transparent;
	border-bottom: 30px solid transparent;
}

.author-description p {
	line-height: 1.8;
}

.author-description .check {
	list-style-type: none;
/*	background: #f2f7f9!important;*/
	padding-left: 1em;
}

.author-description .check li:before {
	content: "\f00c";
	margin-right: 0.5rem;
	font-family: "Font Awesome 5 Free";
	color: var(--sub-color);
	vertical-align: middle;
	font-size: 120%;
	line-height: 0;
	font-weight: bold;
}


.author-box .sns-follow-buttons {
/*	border-top : 5px double var(--shadow-color);
	padding-top: 0.5rem;*/
	display: flex;
	justify-content: space-around;
}

.author-box .sns-follow-buttons a.follow-button {
/*	font-size: 26px;
	width: 35px;
	height: 35px;*/
	font-size: 2rem;
	width: auto;
	height: auto;
	border-radius: 50%;
	border: none;
	transition: 0.5s;
}

/*Twitter*/
.author-box .sns-follow-buttons a.twitter-button{
/*	background-color:#1da1f2;*/
	background-color: transparent;
	color: #1da1f2 !important;
}
.author-box .sns-follow-buttons a.twitter-button:hover {
/*	border: 1px solid #1da1f2;
	background-color: #fff;
	color: #1da1f2 !important;
*/
}
/*Facebook*/
.author-box .sns-follow-buttons a.facebook-button{
	background-color: transparent;
	color: #3b5998 !important;
}
.author-box .sns-follow-buttons a.facebook-button:hover {
/*	border: 1px solid #3b5998;
	background-color: #fff;
	color: #3b5998 important;
*/
}
/*Instagram*/
.author-box .sns-follow-buttons a.instagram-button{
	background-color: transparent;
	color: #405de6 !important;
}
.author-box .sns-follow-buttons a.instagram-button:hover {
/*	border: 1px solid #405de6;
	background-color: #fff;
	color: #405de6 !important;
*/
}
/*YouTube*/
.author-box .sns-follow-buttons a.youtube-button{
	background-color: transparent;
	color: #cd201f !important;
}
.author-box .sns-follow-buttons a.youtube-button:hover {
/*	border: 1px solid #cd201f;
	background-color: #fff;
	color: #cd201f !important;
*/
}
/*LINE*/
.author-box .sns-follow-buttons a.line-button{
	background-color: transparent;
	color:#00c300 !important;
}
.author-box .sns-follow-buttons a.line-button:hover {
/*	border: 1px solid #00c300;
	background-color: #fff;
	color: #00c300;
*/
}
/*Feedly*/
.author-box .sns-follow-buttons a.feedly-button{
	background-color: transparent;
	color: #2bb24c !important;
}
.author-box .sns-follow-buttons a.feedly-button:hover {
/*	border: 1px solid #2bb24c;
	background-color: #fff;
	color: #2bb24c;
*/
}
/*RSS*/
.author-box .sns-follow-buttons a.rss-button{
	background-color: transparent;
	color: #f26522 !important;
}
.author-box .sns-follow-buttons a.rss-button:hover {
/*	border: 1px solid #f26522;
	background-color: #fff;
	color: #f26522 !important;
*/
}

/*ホバー時*/
.author-box .sns-follow-buttons a.follow-button:hover {
/*	-webkit-transform: scale(1.1) rotate(360deg);
	-moz-transform: scale(1.1) rotate(360deg);
	-ms-transform: scale(1.1) rotate(360deg);
	-o-transform: scale(1.1) rotate(360deg);
	transform: scale(1.1) rotate(360deg);
*/
	animation:bounce 0.8s ease-out;
}


/*----------
	ブログカードのサムネイル
  ----------*/
.blogcard-thumbnail img {
  width: auto;
}


/*----------
	カテゴリーページの関連ワード
  ----------*/
.toggle-wrap {
	margin-top: -2em;
}



/*----------
	記事中の写真
	※子要素による条件分岐で親要素にクラス付与している
	https://qumeru.com/magazine/314
	
	p.photo: １枚だけで使うことを想定
	div.tiled-gallery: タイルギャラリー機能（複数枚）を想定
	
	マステ風
	https://blog.minimal-green.com/entry/2017/01/14/211630
	
	
	2022/9/10  ギャラリー画像のサムネイルを3:2と指定
	                  画像サイズは基本的にサムネイル(200x0)とする　※4列まで可能とする為
	                  縦画像が多い時はportrait
	                  横画像が多い時はlandscapeとクラス追加指定する
	                  
	                  枚数が少ない時やオリジナルのアス比としたい場合は無指定
	                  1枚の時の指定もしてあるが1枚の時はギャラリーブロックではなく画像ブロックを使う
  ----------*/
.wp-block-gallery.has-nested-images.landscape  figure.wp-block-image img {
	aspect-ratio: 3/2;
	object-fit: cover;
}

.wp-block-gallery.has-nested-images.portrait  figure.wp-block-image img {
	aspect-ratio: 2/3;
	object-fit: cover;
}

.wp-block-gallery.has-nested-images.landscape43  figure.wp-block-image img {
	aspect-ratio: 4/3;
	object-fit: cover;
}

.wp-block-gallery.has-nested-images.portrait43  figure.wp-block-image img {
	aspect-ratio: 3/4;
	object-fit: cover;
}

.wp-block-gallery.has-nested-images.landscape169  figure.wp-block-image img {
	aspect-ratio: 16/9;
	object-fit: cover;
}

.wp-block-gallery.has-nested-images.portrait169  figure.wp-block-image img {
	aspect-ratio: 9/16;
	object-fit: cover;
}

.wp-block-gallery.has-nested-images.square  figure.wp-block-image img {
	aspect-ratio: 1/1;
	object-fit: cover;
}

.wp-block-gallery.has-nested-images figure.wp-block-image {
	flex-grow: 0;
}

/*  全ギャラリーブロックの間隔を「１」に固定する  */
.wp-block-gallery {
    --wp--style--unstable-gallery-gap: var(--wp--preset--spacing--20)!important;
    gap: var(--wp--preset--spacing--20)!important;
}


/*ギャラリー画像が1枚だけの時に画像100%にしたい場合*/
.wp-block-gallery.has-nested-images figure.wp-block-image:first-child:last-child {
/*	flex-grow: 1;*/
}

/*すべての画像のマウスイベント (クリック、ドラッグ、ホバー等) を無効にする*/
img {
	pointer-events: none;
}


/* Meowギャラリーブロック用*/
.mgl-justified-container,
.mgl-tiles-container,
.mgl-masonry-container,
.mgl-square-container,
.mgl-cascade-container {
	margin: 15px;
}


/* 動画ブロック用 */
.video-container {
	margin: 0px auto;
}


.wp-block-video {
	max-width: 770px;
	margin-left: auto;
	margin-right: auto;
}


/* ギャラリーブロック、動画ブロック用 */
.wp-block-video,
.wp-block-gallery.has-nested-images,
.mgl-gallery {
/*.tiled-gallery {*/
	box-shadow: 0 0 0 6px var(--blogcard-bgcolor), 1px 1px 3px 7px rgba(50, 50, 50, 0.25);
	position: relative;
	margin-bottom: 3.2em !important;
	overflow: inherit !important;
	width: fit-content !important;
	line-height: 1 !important;
}

.wp-block-video:after,
.wp-block-gallery.has-nested-images:after,

.mgl-gallery:after {
/*.wp-video:after,
.tiled-gallery:after,
.gallery-size-full:after {*/
	content: '';
	position: absolute;
	top: -1.5em;
	left: calc(50% - 5em);
	width: 5em;
	height: 2em;
	background-image: linear-gradient(-45deg, rgba(227,155,140,.4) 25%, rgba(255, 255, 255, 0.4) 25%, rgba(255, 255, 255, 0.4) 50%, rgba(227,155,140,.4) 50%, rgba(227,155,140,.4) 75%, rgba(255, 255, 255, 0.4) 75%, rgba(255, 255, 255, 0.4) 100%);
	background-size: 20px 20px;
	border-left: 2px dotted rgba(0,0,0,.1);
	border-right: 2px dotted rgba(0,0,0,.1);
	box-shadow: 0 0 5px rgba(0,0,0,.2);
	padding: 0.25em 2em;
	color: #65513f;
	transform: rotate(-4deg);
	display: flex;
	overflow: inherit !important;
	z-index: 99;
}


/*
	画像ブロック
	枠は1pxの実線
	基本的にpngファイルを想定
	画像サイズや幅指定などはエディタ画面による
*/
.entry-content>.wp-block-image {
	border: 1px solid #333;
	width: fit-content !important;
		margin: 0 auto;
}



@media screen and (max-width: 480px) {
	p.photo {
		max-width: 80vw;
	}
	.wp-block-gallery.has-nested-images figure.wp-block-image:first-child:last-child {
		width: fit-content !important;
	}
}




/*----------
	パノラマ写真(easy panorama用)
	".paver--initialized"がない場合は使用不可と判定して最大幅での表示とし縦はfit-contentとする
  ----------*/
.easy-panorama:not(.paver--initialized) {
	height: fit-content !important;
}



/*----------
	ブログカード用
  ----------*/
.wp-block-cocoon-blocks-blogcard {
/*	background-color: var(--blogcard-bgcolor);
	transform: rotate(0deg) !important;
*/
}


/*----------
  アイコンボックス
  ブロッククォート（引用）ボックス
  キャプションボックス
  ----------*/
.wp-block-cocoon-blocks-icon-box ,
.wp-block-quote ,
.caption-box {
	width: 90%;
	margin: 0 auto;
}


/*----------
	Cocoonの情報ボックスなど
  ----------*/
.is-style-information-box, .information-box, .information {
	background: var(--infomation-bg-color);
}

.is-style-comment-box, .comment-box {
	background: var(--comment-bg-color);
}

.is-style-ng-box, .ng-box {
	background: var(--NGbox-bg-color);
}

.is-style-good-box, .good-box {
	background: var(--goodBox-bg-color);
}

.is-style-bad-box, .bad-box {
	background: var(--badBox-bg-color);
}

.is-style-memo-box, .memo-box {
	background: var(--memoBox-bg-color);
}

.caption-box {
	border-color: var(--main-color);
	border-radius: var(--radius);
}

.caption-box-label {
	background-color: var(--main-color);
	display: block;
	text-align: center;
}

.caption-box-label .caption-box-label-text {
	color: #fff;
}

.caption-box-content {
	padding-top: 1.4em;
	padding-bottom: 1.4em;
}

.tab-caption-box .tab-caption-box-label  {
	background-color: var(--sub-color);
	color: var(--bg-color);
	text-shadow: 1px 1px var(--text-color);
}

.tab-caption-box .tab-caption-box-content  {
	border-color: var(--sub-color);
}


/*----------
	Googlemaps（マイマップ）を埋め込む際のレスポンシブ対応
	https://webdesignday.jp/inspiration/technique/css/4213/
	なおpadding-bottomの75%についてはアスペクト比4:3にしたいので
	3/4*100=75と算出しています
	16:9にしたければ 9/16*100=56.25%とします
	
	地図は16:9とする
	カスタムサイズ640*360でHTMLを取得する
	
	補足：
	googlemapsを埋め込む際に<div class="gmap">でラップし、iframeをwidth100%,height=autoに変更する
  ----------*/
.gmap {
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%;
	position: relative;
	margin: 0 auto;
}
.gmap iframe {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
}

iframe[src*="google.com/maps/"] {
	border: 1px solid #333 !important;
	display: block;
	margin: 0 auto;
	margin-bottom: 3.2em;

	filter: invert(var(--gmap-invert)) hue-rotate(var(--gmap-hue)) contrast(var(--gmap-contrast));
	-webkit-filter:invert(var(--gmap-invert)) hue-rotate(var(--gmap-hue)) contrast(var(--gmap-contrast));
}

/*----------
  記事の総数表示
  ----------*/
.postcount {
	text-align: center;
}

.postcount_text {
	font-size: 3em;
	font-weight: normal;
	font-family: 'Nothing You Could Do', cursive;
/*	font-style: italic;*/
}


/*----------
  テーブル
  ----------*/
.main figure.wp-block-table {
/*	max-width: 90%;*/
}


.main .wp-block-flexible-table-block-table {
	margin-left: 5%;
	margin-right: 5%;
}

.main figure.wp-block-flexible-table-block-table table.has-fixed-layout {
	margin-bottom: 0;
}

.main figure.wp-block-flexible-table-block-table div {
	margin-bottom: 0.5em;
}

.main figure.wp-block-flexible-table-block-table table tr th {
	background: var(--category-postTitle-color015);
}
.main figure.wp-block-flexible-table-block-table table tr td {
	background-color: var(--bg-color);
}

.entry-content>table {
/*	max-width: 90%;*/
	margin: 0 auto;
/*	margin-bottom: 3.2em;*/
}

tr>td:first-child 	{
/*	width: 20%;*/
/*	padding-left: 1em;
	padding-right: 1em;*/
}

/*  キャプションが「下」の場合は上方向にずらす  */
table+figcaption {
	margin-top: -5em;
}


/*480px以下*/
@media screen and (max-width: 480px) {
  /*必要ならばここにコードを書く*/
	.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table {
/*		width: 100%;
		max-width: none;
*/
	}
}


/* Cocoonテーマでレスポンシブ設定の追加CSS --- ここから */
/*   https://changbeer.site/2019/01/cocoon_responsive_table_with_custom/     */
.scrollable-table th, .scrollable-table td {
    /* テキストを折り返す設定 */
  /*  white-space: normal;*/
}

/* 640px以下*/
@media screen and (max-width: 640px) {
    .scrollable-table th {
        /* ヘッダーを固定する設定 */
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        z-index: 1;
    }
    .scrollable-table th, .scrollable-table td {
        /* テキストを折り返さない設定 */
        white-space: nowrap;
    }
}
/* Cocoonテーマでレスポンシブ設定の追加CSS --- ここまで */



/*----------
	マーカー関係
	https://alice.yuhostyles.com/cocoon-marker/
  ----------*/

/*マーカー*/
.marker,
.marker-red,
.marker-blue,
.marker-under,
.marker-under-blue {
	padding-bottom: 0.35em;
	padding-left: var(--marker-padding);
	padding-right: var(--marker-padding);
	background-color: unset !important;
    background-repeat: repeat-x !important;
    background-size: 0.6em 0.4em,1.6em 0.4em,3.4em 0.4em,3.6em 0.4em !important;
    background-position: right bottom !important;
}
.marker {
    background-image:
            radial-gradient(0.3em 0.2em at center center, rgba(var(--marker-yellow), var(--marker-opacity)), rgba(var(--marker-yellow), 0)),
            radial-gradient(0.6em 0.2em at center center, rgba(var(--marker-yellow), var(--marker-opacity)), rgba(var(--marker-yellow), 0)),
            radial-gradient(1.05em 0.2em at center center, rgba(var(--marker-yellow), var(--marker-opacity)), rgba(var(--marker-yellow), 0)),
            radial-gradient(10.65em 0.2em at center center, rgba(var(--marker-yellow), var(--marker-opacity)), rgba(var(--marker-yellow), 0)) !important;
}

.marker-red {
    background-image:
            radial-gradient(0.3em 0.2em at center center, rgba(var(--marker-red), var(--marker-opacity)), rgba(var(--marker-red), 0)),
            radial-gradient(0.6em 0.2em at center center, rgba(var(--marker-red), var(--marker-opacity)), rgba(var(--marker-red), 0)),
            radial-gradient(1.05em 0.2em at center center, rgba(var(--marker-red), var(--marker-opacity)), rgba(var(--marker-red), 0)),
            radial-gradient(10.65em 0.2em at center center, rgba(var(--marker-red), var(--marker-opacity)), rgba(var(--marker-red), 0)) !important;
}

.marker-blue {
    background-image:
            radial-gradient(0.3em 0.2em at center center, rgba(var(--marker-blue), var(--marker-opacity)), rgba(var(--marker-blue), 0)),
            radial-gradient(0.6em 0.2em at center center, rgba(var(--marker-blue), var(--marker-opacity)), rgba(var(--marker-blue), 0)),
            radial-gradient(1.05em 0.2em at center center, rgba(var(--marker-blue), var(--marker-opacity)), rgba(var(--marker-blue), 0)),
            radial-gradient(10.65em 0.2em at center center, rgba(var(--marker-blue), var(--marker-opacity)), rgba(var(--marker-blue), 0)) !important;
}

/*下半分のマーカー色（km）*/
.marker-under {
    background-image:
            radial-gradient(0.3em 0.2em at center center, rgba(var(--marker-under-yellow), var(--marker-opacity)), rgba(var(--marker-under-yellow), 0)),
            radial-gradient(0.6em 0.2em at center center, rgba(var(--marker-under-yellow), var(--marker-opacity)), rgba(var(--marker-under-yellow), 0)),
            radial-gradient(1.05em 0.2em at center center, rgba(var(--marker-under-yellow), var(--marker-opacity)), rgba(var(--marker-under-yellow), 0)),
            radial-gradient(10.65em 0.2em at center center, rgba(var(--marker-under-yellow), var(--marker-opacity)), rgba(var(--marker-under-yellow), 0)) !important;
}

.marker-under-red {
/*  background: linear-gradient(transparent 60%, #ffd0d1 60%);*/
	text-decoration-line: underline;
	text-decoration-style: wavy;
	text-decoration-color: rgb(var(--marker-under-red));
	text-underline-offset: 3px;
	text-decoration-thickness: 3px;
	background: none !important;
 	padding-left: var(--marker-padding);
	padding-right: var(--marker-padding);
}

.marker-under-blue {
/*  background: linear-gradient(transparent 60%, #a8dafb 60%);*/
/*	background: linear-gradient(transparent 60%, #ffd900 60%);*/
/*	background-image: repeating-linear-gradient(
		-45deg,
		rgb(var(--marker-under-blue)),
		rgb(var(--marker-under-blue)) 2px,
		rgba(var(--marker-under-blue), 0.0) 4px,
		rgba(var(--marker-under-blue), 0.0) 8px
		);
	background-size: 100% 0.5em;
	padding-bottom: 1.5em;
	background-position: 0 center;
	background-repeat: no-repeat;
	padding-left: var(--marker-padding);
	padding-right: var(--marker-padding);
*/
    background-image:
            radial-gradient(0.3em 0.2em at center center, rgba(var(--marker-under-blue), var(--marker-opacity)), rgba(var(--marker-under-blue), 0)),
            radial-gradient(0.6em 0.2em at center center, rgba(var(--marker-under-blue), var(--marker-opacity)), rgba(var(--marker-under-blue), 0)),
            radial-gradient(1.05em 0.2em at center center, rgba(var(--marker-under-blue), var(--marker-opacity)), rgba(var(--marker-under-blue), 0)),
            radial-gradient(10.65em 0.2em at center center, rgba(var(--marker-under-blue), var(--marker-opacity)), rgba(var(--marker-under-blue), 0)) !important;
}



/*	ブロックエディタ用に追記  2023.5.20   */
.components-popover__content .marker ,
.components-popover__content .marker-red ,
.components-popover__content .marker-blue {
	background-color: unset !important;
}

.components-popover__content .marker-under ,
.components-popover__content .marker-under-red ,
.components-popover__content .marker-under-blue {
	background-color: unset !important;
}

[class^=marker] {
/*	text-shadow: 1px 1px 0 var(--bg-color), 0 1px 0 var(--bg-color);*/
}


/*----------
	UL,OLタグのリストマーク
	class="check"としたものに限定
  ----------*/
.article .check {
	list-style-type: none;
/*	background: #f2f7f9!important;*/
	text-indent: -1.7em;
}

.article .check li:before {
	content: "\f058";
	margin-right: 0.5rem;
	font-family: "Font Awesome 5 Free";
	color: #8ac8cb;
	vertical-align: middle;
	font-size: 120%;
	line-height: 0;
	font-weight: bold;
}

.article .check li {
	margin-left: 1.7em;
}


/*----------
	Cocoonのふきだし
  ----------*/
.sbs-line .speech-balloon {
	background-color: var(--speech-balloon-left-bg-color) !important;
	border-color: var(--speech-balloon-left-border-color) !important;
}
  
.sbp-r .speech-balloon {
	background-color: var(--speech-balloon-right-bg-color);
	border-color: var(--speech-balloon-right-border-color);
	border-width: 1px;
}

div.sbs-think .speech-balloon::before, div.sbs-think .speech-balloon::after,
.sbp-r .speech-balloon::before , .sbp-r .speech-balloon::after {
	background-color: var(--speech-balloon-right-bg-color);
	border-color: var(--speech-balloon-right-border-color);
	border-width: 1px;
}

.speech-icon img {
	background: #fff;
}

.sbis-sn .speech-icon-image ,
.sbis-sb .speech-icon-image {
	border-radius: var(--radius);
}

/*----------
	吹き出しをもっとLINE風にする
	https://web.monogusa-note.com/cocoon-balloon-line
  ----------*/
.sbs-line {
/*    background: #7392c0;*/
	margin: 1em 0;
	padding: 10px 5px;
	position:relative;
	flex-direction: column;
	align-items: flex-start;
}
.sbs-line+.sbs-line {
	margin-top: -1em;
	padding-top: 0;
}
.sbs-line .speech-person {
	width: auto;
	min-width: auto;
}
.sbs-line .speech-icon {
	width: 80px;
	max-width: 80px;
	position: absolute;
	left: 5px;
}
.sbp-r .speech-icon {
	width: 80px;
	max-width: 80px;
}
.sbs-line .speech-icon img {
	background: #fff;
/*	border: none;*/
/*	border-radius: 50%;*/
/*	box-shadow: none;*/
}
.sbs-line .speech-name {
	color: #fff;
	font-weight bold;
	text-align: left;
	margin: 0 0 .2em;
	position: relative;
	z-index: 1;
}
.speech-balloon {
	max-width: 25em !important;
	color: #222;
	line-height: 1.5;
	border: none;
	border-radius: 25px;
	padding: .5em 1em;
}
.sbs-line.sbp-r .speech-balloon {
	margin: 0 35px 0 0;
}
.sbs-line.sbp-l .speech-balloon {
	margin: 0 0 0 40px;
}
.sbs-line.sbp-r .speech-balloon:before,
.sbs-line.sbp-l .speech-balloon:before {
	content: '';
	display: block;
	width: 25px;
	height: 40px;
	background: none;
	border: none;
/*    top: -20px;*/
	top: 20px;
}
.sbs-line.sbp-r .speech-balloon:before {
	box-shadow:inset 3px 15px 0 -5px var(--speech-balloon-right-bg-color);
	border-radius: 0 40px 40px 0;
	right: -10px;
}
.sbs-line.sbp-l .speech-balloon:before {
	box-shadow:inset 0 22px 0 -10px var(--speech-balloon-left-border-tail-color);
	border-radius: 40px 0 0 40px;
	left: -15px;
	z-index: -9999;
}
.sbs-line.sbp-l {
	min-height: 70px;
	padding-right: 10px;
	padding-left: 63px;
}
.sbs-line.sbp-r {
	padding-left: 10px;
	align-items: flex-end;
}
.sbs-line.sbp-r .speech-person {
	flex-direction: row-reverse;
}
.sbs-line.sbp-r .speech-icon,
.sbs-line.sbp-r .speech-name {
	display: none;
}
.sbs-line .speech-balloon:after {
	content: none;
}

/* 人物位置:右で画像を表示 */
.sbs-line.sbp-r {
	min-height: 70px;
}
.sbs-line.sbp-r .speech-icon {
	display: block;
	right: 5px;
	left: auto;
}
.sbs-line.sbp-r {
	padding-right: 63px;
}


/*----------
	タイムライン
  ----------*/
.timeline-item:before {
	width: 18px;
	height: 18px;
	left: 104px;
	top: 27px;
}

.timeline-item-label {
	padding-top: 12px;
	font-size: 18px;
	font-family: cursive;
}

.timeline-item-content {
	border-left-width: 6px;
	border-left-style: dotted;
}


/*----------
	打ち消し線を2重線にする
  ----------*/
del {
	text-decoration-line: line-through;
	text-decoration-color: #0061ff;
	text-decoration-style: double;
}





/*----------
	モバイル用
  ----------*/

/*ヘッダーの文字と背景の色を変える*/
.mobile-menu-buttons {
	background-image: linear-gradient(180deg, var(--sp1-color050) 3% , var(--bg-color) 100%);
}

#sidebar-menu-content,
#navi-menu-content {
	padding-top: 1em;
}

#navi-menu-content span.fas.fa-times::before {
	font-family: "Font Awesome 5 Free";
	content: "\f060";
	color: var(--sp1-color);
}

#sidebar-menu-content span.fas.fa-times::before {
	font-family: "Font Awesome 5 Free";
	content: "\f061";
	color: var(--sp1-color);
}

ul.menu-drawer:before {
	font-size: 1.2em;
/*	background: var(--bg-drawer-color);*/
	color: var(--text-color);
	margin-bottom: 1em;
	border-bottom: 3px dotted var(--sp1-color); /*点線の色変更はこちら*/
	content: "メニュー";
	display: inline-block;
	width: 100%;
	text-align: center;
}

ul.menu-drawer:after {
/*	background: var(--bg-drawer-color);*/
}

.menu-drawer li {
	padding: 0;
}

.menu-drawer li {
	font-weight: bold;
}

.menu-drawer a {
	font-size: 1.2em;
/*	background-color: var(--bg-drawer-color);*/
	line-height: 1.8;
	color: var(--text-color);
}

.menu-drawer a:hover {
	background-color: #f7f7f7;
}

.menu-drawer .sub-menu {
	padding: 0;
}

.menu-drawer .sub-menu li {
	font-size: 0.9em;
}

.menu-drawer .sub-menu li a::before {
	font-family: "Font Awesome 5 Free";
	content : "\f105";
/*	color: #7b7b7b;*/
	color: var(--text-color);
	margin: 0 0.5em 0 1em;
}

.menu-content {
	background: var(--bg-drawer-color);
}


@media (max-width:834px) {
	.sub-menu {
		box-shadow: none;
	}
}

.mobile-menu-buttons .menu-button > a {
	color: var(--text-color);
}

.sidebar {
	background-color: var(--bg-drawer-color);
}