/* Light */
:root {
	--bg-color:	#ffffff;
	--text-color:	#222;
	--link-color:	#4000ff;
	--hover-color:	red;
	--h1-color:	#008060;
	--h2-color:	#008060;
	--h3-color:	#00a078;
	--h4-color:	#008060;
	--h5-color:	#006048;
	--h6-color:	#004030;
	--h7-color:	#600080;
	--h1-bgcolor:	var(--bg-color);
	--h2-bgcolor:	var(--bg-color);
	--h3-bgcolor:	var(--bg-color);
	--h4-bgcolor:	var(--bg-color);
	--h5-bgcolor:	var(--bg-color);
	--h6-bgcolor:	var(--bg-color);
	--h7-bgcolor:	var(--bg-color);
	--h3-vcolor:	#0078a0;
	--h4-vcolor:	#006080;
	--h5-vcolor:	#004860;
	--h6-vcolor:	#003040;
	--hx-linkbg:	inherit;
	--em-bgcolor:	yellow;
	--strong-color:	red;
	--code-color:	black;
	--code-bgcolor:	#e0f0ec;
	--notice-bgcolor:	#ffffc0;
	--notice-border:	#808000;
	--block-color:	#008000;
	--block-bgcolor:	#e0ffe0;
	--block-border:	#008000;
	--taxonomyItems-bgcolor:	#e0f0ec;
	--taxonomyItems-link:	black;
	--taxonomyItems-hover-bg:	#ffffd0;
	--taxonomyItem-length:	#008060;
	--terms-color:	#004030;
	--terms-bgcolor:	#e0f0ec;
	--time-color:	#006080;
	--th-color:	#008060;
	--th-bgcolor:	#f0f8f6;
	--disabled-link-color:	#333;
	--border-color:	#008060;
	--button-text-color:	#000000;
	--button-color:	#e0e0e0;
	--quote-color:	#006080;
	--quote-bgcolor:	#f0f6f8;
	--quote-border:	#006080;
	--image-bg:	var(--bg-color);
}

/* Dark */
[data-theme="dark"]	 {
	--bg-color:	#002018;
	--text-color:	#ffffff;
	--link-color:	#d0c0ff;
	--hover-color:	yellow;
	--h1-color:	var(--text-color);
	--h2-color:	var(--text-color);
	--h3-color:	var(--text-color);
	--h4-color:	var(--text-color);
	--h5-color:	var(--text-color);
	--h6-color:	var(--text-color);
	--h7-color:	var(--text-color);
	--h1-bgcolor:	var(--bg-color);
	--h2-bgcolor:	#008060;
	--h3-bgcolor:	#00a078;
	--h4-bgcolor:	#008060;
	--h5-bgcolor:	#006048;
	--h6-bgcolor:	#004030;
	--h7-bgcolor:	#600080;
	--h3-vcolor:	var(--link-color);
	--h4-vcolor:	var(--link-color);
	--h5-vcolor:	var(--link-color);
	--h6-vcolor:	var(--link-color);
	--hx-linkbg:	rgb(0 80 60 / 50%);
	--em-bgcolor:	#000080;
	--strong-color:	#ffd0d0;
	--code-color:	#d0ffd0;
	--code-bgcolor:	black;
	--notice-bgcolor:	#404000;
	--notice-border:	#808000;
	--block-color:	f0f8f0;
	--block-bgcolor:	#004000;
	--block-border:	#008000;
	--taxonomyItems-bgcolor:	#008060;
	--taxonomyItems-link:	var(--text-color);
	--taxonomyItems-hover-bg:	#808000;
	--taxonomyItem-length:	#dfdfff;
	--terms-color:	#e0f0ec;
	--terms-bgcolor:	#004030;
	--time-color:	#80c0ff;
	--th-color:	#f0f8f6;
	--th-bgcolor:	#008060;
	--disabled-link-color:	#808080;
	--border-color:	#008060;
	--button-text-color:	#ffffff;
	--button-color:	#004030;
	--quote-color:	#f0f6f8;
	--quote-bgcolor:	#006080;
	--quote-border:	#003040;
	--image-bg:	var(--bg-color);
}

body {
  color: var(--text-color);
/*  font-family: sans-serif;*/
  line-height: 1.5;
/*  margin: 1rem;*/
  max-width: 768px;

  margin: auto;
  background: var(--bg-color);
}

header {
  border-bottom: 1px solid var(--text-color);
  margin-bottom: 1rem;
}

footer {
  border-top: 1px solid var(--text-color);
  margin-top: 1rem;
}

/*
a {
  color: #00e;
  text-decoration: none;
}
*/

/* internalページネーションの見た目を横一列にする */
ul.pagination {
  text-align : center ;
  
  padding: 0;
}
ul.pagination li.page-item {
  display : inline;
  text-align : center;
/*  padding : 2px;*/
/*  margin: 0.5em;*/
}
ul.pagination li.page-item a {
  text-decoration: none;
  font-size: larger;
  padding: 0 0.5em;
  border: 1px solid;
}
ul.pagination li.page-item.active {
/*  border-bottom : 2px solid #ccc;*/
/*  padding : 2px;*/
}
ul.pagination li.page-item.active a {
  color: var(--bg-color);
  background-color: var(--link-color);
  border-color: var(--disabled-link-color);
}
ul.pagination li.page-item.disabled a {
  color : var(--disabled-link-color);
}

nav ul {
  text-align : center ;
  
  padding: 0;
}
nav ul li {
  display : inline;
  text-align : center;
  padding: 2px;
}


/* Telmina's Diary X */

body {
	font-family: "Lucida Sans Unicode", "Lucida Grande", "Verdana", "Helvetica Neue", "Helvetica", sans-serif;
}

a:hover {
  color : var(--hover-color);
}
a:active {
  color : var(--hover-color);
}

h1,h1 a, h1 a:visited {
	color: var(--h1-color);
	background-color: 	var(--h1-bgcolor);
/*	font-size: 2em;*/
	text-decoration: none;
	clear: both;
}

h2 {
	color: var(--h2-color);
	background-color: 	var(--h2-bgcolor);
	font-size: 1.75em;
	text-decoration: none;
	border-bottom: 3px double var(--h2-color);
	clear: both;
}

h2 a, h2 a:visited {
	color: var(--h2-color);
	text-decoration: none;
}

h3 {
	color: var(--h3-color);
	background-color: 	var(--h3-bgcolor);
	font-size: 1.5em;
	border-bottom: 1px solid var(--h3-color);
	clear: both;
}
h3 a, h3 a:visited {
	color: var(--h3-vcolor);
	background-color: var(--hx-linkbg);
	text-decoration: none;
	border-bottom: 1px solid var(--h3-vcolor);
}

h4 {
	color: var(--h4-color);
	background-color: 	var(--h4-bgcolor);
	font-size: 1.4em;
	border-bottom: 1px dashed var(--h4-color);
	clear: both;
}
h4 a, h4 a:visited {
	color: var(--h4-vcolor);
	background-color: var(--hx-linkbg);
	text-decoration: none;
	border-bottom: 1px dashed var(--h4-vcolor);
}

h5 {
	color: var(--h5-color);
	background-color: 	var(--h5-bgcolor);
	font-size: 1.3em;
	border-bottom: 1px dashed var(--h5-color);
	clear: both;
}
h5 a, h5 a:visited {
	color: var(--h5-vcolor);
	background-color: var(--hx-linkbg);
	text-decoration: none;
	border-bottom: 1px dashed var(--h5-vcolor);
}

h6 {
	color: var(--h6-color);
	background-color: 	var(--h6-bgcolor);
	font-size: 1.2em;
	border-bottom: 1px dashed var(--h6-color);
	clear: both;
}
h6 a, h6 a:visited {
	color: var(--h6-vcolor);
	background-color: var(--hx-linkbg);
	text-decoration: none;
	border-bottom: 1px dashed var(--h6-vcolor);
}

h7 {
	color: var(--h7-color);
	background-color: 	var(--h7-bgcolor);
	font-size: small;
}
h7::before {
	content: "🎦";
}

h1 a:active,
h2 a:active,
h3 a:active,
h4 a:active,
h5 a:active,
h6 a:active,
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
	color: var(--hover-color);
}

a {
  color : var(--link-color);
  text-decoration : underline;
}

address {
  font-style : normal;
}

header h1::before {
    content: url(/images/telmina_t_icon_5s_eg.png);
    margin-right: 10px;
    position: relative;
    top: 8px;
}

img {
	max-width: 100%;
	max-height: 512px;
}

strong {
  font-weight : bold;
  color : var(--strong-color);
}

em {
  background-color : var(--em-bgcolor);
  font-style : normal;
}

strong.shout {
	font-weight:	bold;
	font-size:	xx-large;
}

code, pre {
  color: var(--code-color);
  background-color: var(--code-bgcolor);
  font-family: "Lucida Console", "Courier", "Terminal", monospace;
  white-space: pre-wrap;
}

blockquote {
	background-color: var(--quote-bgcolor);
	color: var(--quote-color);
	border: 1px solid var(--quote-border);
	padding: 0 1em;
	margin: 0
}

q {
	background-color: var(--quote-bgcolor);
	color: var(--quote-color);
}

.notice {
  font-size: 90%;
  background-color : var(--notice-bgcolor);
  border-width : 1px;
  border-style : solid;
  border-color : var(--notice-border);
  padding-left : 1em;
  padding-right : 1em;
  clear: both;
}

.block {
  font-size: 90%;
  background: var(--block-bgcolor);
  border: 1px solid var(--block-border);
  color:  var(--block-color);
  padding-left : 1em;
  padding-right : 1em;
  clear: both;
}

p:has(.taxonomyItems) {
  line-height: 2.5em;
}
.taxonomyItems {
  padding: 5px;
  margin: 5px;
  font-weight: bold;
  background: var(--taxonomyItems-bgcolor);
  white-space: nowrap;
}
.taxonomyItems a {
  color: var(--taxonomyItems-link);
  text-decoration : none;
}
.taxonomyItems a:active,
.taxonomyItems a:hover {
  color: var(--hover-color);
  background: var(--taxonomyItems-hover-bg);
  text-decoration : none;
}
span.taxonomyItemLength {
  color: var(--taxonomyItem-length);
  font-size: small;
}

.terms {
  background: var(--terms-bgcolor);
  font-size: smaller;
}
.terms div {
  font-weight: bold;
  color: var(--terms-color);
}
.terms ul {
  margin: 0.2em;
  padding: 0 0 0 1em;
}
.terms ul li {
  display : inline;
  margin : 0.2em;
}

.readMore p, .readMore p a, .readMore p a:visited {
  font-size: small;
  text-decoration : none;
}

main time {
  font-size: small;
  color: var(--time-color);
}

span.mastodon {
  border: 1px solid #6364FF;
  display: inline-block;
  height: 17px;
  font-size: 12px;
  padding: 0 2px 0 0 ;
  color: #6364FF;
  white-space: nowrap;
  background: var(--bg-color);
}
span.mastodon::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 16px;
  background-image: url(/svg/logo-white.svg);
  background-color: #6364FF;
  background-size: contain;
  vertical-align: top;
  border: 1px solid #6364FF;
}
span.mastodon a {
  color: #6364FF;
  text-decoration: none;
}
span.mastodon a:active,
span.mastodon a:hover {
  color: white;
  background: #6364FF;
  text-decoration: none;
}

span.bluesky {
  border: 1px solid #1185FE;
  display: inline-block;
  height: 17px;
  font-size: 12px;
  padding: 0 2px 0 0 ;
  color: #1185FE;
  white-space: nowrap;
  background: var(--bg-color);
}
span.bluesky::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 16px;
  background-image: url(/svg/bluesky_media_kit_logo.svg);
  background-color: #1185FE;
  background-size: contain;
  vertical-align: top;
  border: 1px solid #1185FE;
}

span.bluesky a {
  color: #1185FE;
  text-decoration: none;
}
span.bluesky a:active,
span.bluesky a:hover {
  color: white;
  background: #1185FE;
  text-decoration: none;
}

/*
button {
	color:	var(--button-text-color);
	background-color:	var(--button-color);
	border:	2px outset var(--button-color);
}
*/

hr {
	height: 1px;
	border: none;
	background-color: var(--border-color);
	clear: both;
}

table {
	border-collapse: collapse;
}
th {
	border-width: 1px 1px 3px;
	border-color: var(--border-color);
	border-style: solid solid double;
	white-space: nowrap;
	padding: 0 0.5em;
	background: var(--th-bgcolor);
	color: var(--th-color);
}
td {
	border: 1px solid var(--border-color);
	padding: 0 0.5em;
}

.float-left {
	float: left;
	max-width: 50%;
	background-color:	var(--image-bg);
}

.float-right {
	float: right;
	max-width: 50%;
	background-color:	var(--image-bg);
}

.float-left .image-wrapper
, .float-left .image-caption
{
	padding: 0 1em 1em 0;
}
.float-right .image-wrapper
, .float-right .image-caption
{
	padding: 0 0 1em 1em;
}

.inline-block {
	display: inline-block;
	max-width: 50%;
	background-color:	var(--image-bg);
}
.inline-block .image-wrapper
, .inline-block .image-caption {
	padding: 0 0.5em 0.5em 0.5em;
}
.inline-block img {
	max-height: 192px;
}

.left {
	text-align: left;
}
.center {
	text-align: center;
}
.right {
	text-align: right;
}

.image-caption {
	text-align: center;
	font-size: smaller;
}

/* アコーディオン全体のスタイル */
.accordion {
	width: 100%;
/*	max-width: 600px;*/
	margin: 0 auto;
}

/* 各アイテムの余白など */
.accordion-item {
	margin-bottom: 10px;
	border: 1px solid var(--border-color);
}

/* 見出し部分のスタイル */
.accordion-header {
	width: 100%;
	padding: 15px;
	background-color: rgb(128 128 128 / 15%);
	border: none;
	text-align: left;
	cursor: pointer;
	font-weight: bold;
	color: var(--text-color);
}

/* コンテンツ部分のスタイル（初期状態では閉じている） */
.accordion-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
}

/* アクティブ状態のコンテンツ部分 */
.accordion-item.active .accordion-content {
	max-height: 50%;
	padding: 15px;
}

/* アイコンの基本スタイル */
.accordion-icon {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-left: 10px;
	border-right: 2px solid var(--link-color);
	border-bottom: 2px solid var(--link-color);
	transform: rotate(45deg); /* 下向き矢印 */
	transition: transform 0.3s ease;
}

/* アクティブ状態のアイコン */
.accordion-item.active .accordion-icon {
	transform: rotate(-135deg); /* 上向き矢印に変更 */
}