body {

    /* overflow-x: hidden; */

background: var(--background)!important;
color: var(--foreground)!important;

}

/* .darkmode {

} */


/*==================
TABLEPRESS TOUR STYLES
 tablepress-id-1
 tablepress-id-2
================*/
.tablepress>:where(tbody.row-striping)>:nth-child(even)>*,
.tablepress>:where(tbody.row-striping)>:nth-child(odd)>*,
.tablepress tbody td {
background: transparent;
}

.tablepress-id-1 tbody td,
.tablepress-id-2 tbody td {
color: var(--foreground);
}

.tablepress-id-1 .column-1,
.tablepress-id-2  .column-1 {
width: 5rem;
}

.tablepress-id-1 .column-2,
.tablepress-id-2  .column-2 {
width: 15rem;
}

.tablepress-id-1 .column-3,
.tablepress-id-2  .column-3 {
width: 30rem;
}

.tablepress-id-1.tablepress thead th,
.tablepress-id-2.tablepress thead th {
background: transparent;
}

.tablepress-id-1 td.column-1 {
	font-weight: 700;
}

.tablepressLinkEN:link {
	color: var(--foreground);
	text-decoration: none;
}

.tablepress-id-2 td.column-2 .tablepressLinkJP:link {
	color: var(--bright-red);
	text-decoration: none;
}

.tablepress-id-1 td.column-2 .tablepressLinkEN:visited,
.tablepress-id-2 td.column-2 .tablepressLinkJP:visited {
	color: var(--foreground);
	text-decoration: none;
}

.tablepress-id-1 td.column-2 .tablepressLinkEN:hover,
.tablepress-id-2 td.column-2 .tablepressLinkJP:hover {
	color: var(--bright-green);
	letter-spacing: .1rem;
	text-decoration: underline;
}

.tablepress-id-1.tablepress thead th,
.tablepress-id-2.tablepress thead th  {
	background: transparent;
	font-size: 1rem;
}


.tablepress-id-1 tbody td,
.tablepress-id-2 tbody td {
    border: none;
}

    .tablepress-id-1 thead tr th,
    .tablepress-id-2 thead tr th
   {
		letter-spacing: .2rem;
    border-bottom: 2px solid var(--foreground);
		border-top: none;
		border-left: none;
		border-right: none;
	}


.tablepress-id-1.tablepress thead th,
.tablepress-id-2.tablepress thead th {
	font-size: 1.2rem;
	font-weight: 700;
}

@media (max-device-width:640px),
screen and (max-width:640px) {
	.tablepress-id-2.tablepress thead th {
		font-size: 9px;
	}
}

/*================
Modern Footnotes
==================*/
.modern-footnotes-footnote a {
	font-family: var(--secondary-ENfont);
font-size: .8rem;
font-weight: 700;
	color: var(--bright-red);
}

.modern-footnotes-footnote a:before {
	content: "[";
}

.modern-footnotes-footnote a:after {
	content: "]";
}



/*================
Simplicity Photo Slide Show
==================*/

div.hide {
    display: none;
}

.photocontainer {
background-color: #ffffff;
display:grid;
place-content:center;
width: 80%;
min-height:100vh;
overflow:hidden;
margin: 0 auto;
}

.infocontainer {
    display: flex;
	text-align: center;
	justify-content: center;
	align-items: center;

	font-family: var(--secondary-ENfont);
    color: var(--foreground);
  font-style: normal;
	min-width: 50px;
	height: 42px;
	font-size: 1rem;
	font-weight: 400;
	
	margin: 0 auto;
	width: fit-content;
	background: transparent;
  box-shadow: 0 0 .25em rgba(255, 255, 255, 0.25);
  /* padding-left: 3rem; */

}

.numbercontainer, #numbertext, .totaltext, div.titletext, div#imagetext.tooltips, div.downloadtext, a#photodownload {
	font-family: inherit;
	color: var(--foreground);
	font-weight: inherit;
	font-size: inherit;
	display: inline-flex;
	/* line-height: 42px; */

}

.numbercontainer {margin-right: 10px;}
.downloadtext {position: relative; margin-left: 10px;}
#imagetext, a#photodownload {cursor: pointer;}

div#imagetext.tooltips {
  font-family: var(--mono-ENfont);
  font-weight: 700;
font-size: .8rem;
  font-style: normal;
  line-height: initial;
  letter-spacing: normal;
margin: 0 0 10px 6px;
padding: 8px 3px 0px 3px;
}

/* #photodownload:link {
		color: var(--clr-accent);
}

#photodownload:visited {
		color: var(--clr-accent);
} */

#photodownload:hover {
	text-decoration: underline;
	font-weight: 700;
}

.downloadtext i.fa.fa-download::before {
visibility: hidden;
		position: absolute;
		top: 44px;
		left: 80px;
		color: var(--bright-red);
}

.downloadtext:hover i.fa.fa-download::before {
	visibility: visible;
}

.w {
  width:50vmin;
  height:80vmin;
}

.ts {
  width:100%; height:100%;
  position:relative;
  --barH:10%;  /*active zone height = 100% - barH */
}


.t {
 --w:40%;
  display: block;
  width:var(--w);
  height: var(--barH);
  position: absolute;
  bottom:0;
  left: var(--l);
  transform-origin:top left;
}

.t a {
  display:block; 
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(0.8);
}

[type="radio"] { 
  display:none; 
}

:checked + label.t {
  left:0; bottom:var(--barH);
  height:calc(100% - var(--barH));
}

:checked + label.t a {
  object-fit:contain;
}


.ts { /*thumbnails bar*/
  perspective:100px;
  perspective-origin:center center;
  transform-style:preserve-3d;
  pointer-events:none;
}

.ts:after {/*the plate*/
  content:"";
  display:block;
  width:100%;
  height:15px;
  position:absolute; bottom:0;
  background:linear-gradient(transparent 20%, rgba(0,0,0,0.1));
  transform:rotateX(90deg)scaleX(1.2);
  transform-origin:bottom center;
}

/*inactive labels*/
:not(:checked) + .t { 
  transform:translate3d(0, 0, -5px);
  pointer-events:auto;
}

:not(:checked) + .t:hover {
  transform:translate3d(0, -7px, -5px);
  box-shadow:0 30px 30px -25px rgba(0,0,0,0.3);
  cursor: pointer;
}

:not(:checked) + .t a {
  transform:scale(0.9);/*create gaps*/
}

:checked + .t {/*active label*/
  box-shadow:0 0 0 transparent;
  animation: anim 2s 1;
}

@keyframes anim {
  from { transform:rotateY(6deg)rotateX(3deg)
}

}

/* 
transitions
*/
.t {/*active->inactive & hover->rest*/
  transition:transform 0.5s, bottom 0.6s, left 0.6s, width 0.3s, box-shadow 1s;
}
.t:hover, :checked + .t {
  transition:transform 0.5s, bottom 0.6s, left 0.6s, width 0.3s, box-shadow 0s;
}

 






/* =======================
SOCIAL ICONS
====================== */
/* .site-footer-primary-section-1 .site-footer-section .site-footer-section-1  */
.site-footer {
    display: flex!important;
    align-items: center!important; /* Centers items vertically */
    justify-content: space-between; /* Spaces items to the left and right */
}



/* ==============================
=================================
        @MEDIA QUERIES
=================================
================================= */

/* ============= Small Mobile  320px – 480px =============*/
@media (max-width: 480px) {

  .dark-mode-toggle-pages {
  width: 30px!important;
  height: 30px!important;
}


h1.page-title,
h1.page-titleJP {
font-size: 3rem!important;
}

html[lang="ja"] body {
font-size: .6rem!important;
}

.page-navi-font {
font-size: .6rem!important;
}

.ai-glow-card {
  max-inline-size: 500px!important;
  margin-block: 2rem!important;
  max-width: 90ch!important;;
  /* gap: .5lh!important; */
  gap: 5px!important;

}

.card-content {
  /* gap: 8px!important; */
}
.card-content a {
font-size: .8rem!important;
letter-spacing: -.05rem!important;
}

}

/* ============= Large Mobile / Tabletse (Portrait) 481px – 768px =============*/
@media (min-width: 481px) and (max-width: 768px) {

}

/* ============= Tablets / Small Laptops 769px – 1024px =============*/
@media (min-width: 769px) and (max-width: 1024px) {

}

/* ============= Desktops / Laptops 1025px and up =============*/
@media (min-width: 1025px) {

}