/**************************************************** standard elements */
html {scroll-behavior: smooth;}
body {color: var(--color-text); font-family: var(--font-body); font-optical-sizing: auto; font-style: normal; line-height: 1.7;
overflow-wrap: break-word; font-weight: 200;}

p {line-height: 1.8;}
a {color: #000; text-decoration: none;}
ul {list-style: none; margin: 0; padding: 0;}
.br:before {content: "\A"; white-space: pre;}

/**************************************************** hamburger menu */
.hamburger {display: flex; flex-direction: column; width: 48px; height: 48px;
border: none; border-radius: 2px; cursor: pointer; position: fixed;
top: 0.1rem; right: 1rem; z-index: 9999; padding: 1rem;}

.hamburger span {display: block !important;
width: 34px !important; height: 4px !important;
background: #333 !important; margin: 3px auto !important;
border: 1px solid #333 !important; border-radius: 1px !important;
transition: 0.3s !important; transform-origin: center !important;}

#outer.menu-open .hamburger span:first-child {transform: rotate(45deg) translate(5px, 6px);}
#outer.menu-open .hamburger span:nth-child(2) {opacity: 0;}
#outer.menu-open .hamburger span:nth-child(3) {transform: rotate(-45deg) translate(5px, -6px);}

/* slidemenu */
.global_nav,.menu-overlay {height: 100vh; position: fixed;}

.global_nav {top: 0; right: -100vw; width: 80vw; max-width: 400px; background: rgb(255 255 255 / 0.8); box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
z-index: 100; padding: 6rem 1.5rem 2rem; transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; overflow-y: auto; -webkit-overflow-scrolling: touch; font-family: var(--font-en); font-weight: 200;}

/* scroll bar when the menu is long */
.global_nav::-webkit-scrollbar {width: 4px;}
.global_nav::-webkit-scrollbar-track {background: rgba(0,0,0,0.1);border-radius: 2px;}
.global_nav::-webkit-scrollbar-thumb {background: rgba(0,0,0,0.3);border-radius: 2px;}

#outer.menu-open .global_nav {right: 0;}
.global_nav ul {display: flex; flex-direction: column; margin: 0;}
.global_nav li {margin-bottom: 3px;}
.global_nav a {display: block; padding: 0.5rem 0; font-size: 1.1rem;}
.global_nav a:hover {color: #666;}

/* Overray */
.menu-overlay {top: 0; background: rgba(0, 0, 0, 0.5); opacity: 0;
visibility: hidden; transition: 0.3s; pointer-events: none;}
#outer.menu-open .menu-overlay {opacity: 1; visibility: visible; pointer-events: auto;}
#outer.menu-open .menu_withsubmenu.open > a::after {transform: translateY(-50%) rotate(-90deg);}

/* Info under menu */
.menu_icon {padding-top: 60px;}
.menu_icon li{display: flex; align-items: center; gap: 1em; margin-bottom: 1rem;}
.menu_icon li span {float: left;}
.menu_icon a img {width: 25px; height: auto; margin-right: 10px;}
.menu_icon li:first-of-type a img {position: relative; top: 0.3em;}
.menu_icon li:last-of-type a img {position: relative; top: 0.08em;}
.plus{font-size: 0.9em;}

/**************************************************** General */
#outer {display: flex; flex-direction: column; min-height: 100vh;}
header {position: fixed; top: 0; left: 0; width: 100%; display: flex;justify-content: space-between; align-items: center; padding: 1rem 1rem; z-index: 999; background-color: rgb(255 255 255 / 0.8); backdrop-filter: blur(10px);}

#logo a img {width: 160px;}

main {width: 100%; flex: 1; padding-top: 60px;}
.content {max-width: 100%; margin: 0 auto 100px; padding: 0 4%; box-sizing: border-box;}

.page_title {font-family: var(--font-en); font-weight: 200; text-align: center; padding: 6rem 0;}
.page_title a, .page_title span {font-family: var(--font-body);}
.page_title a:hover {opacity: 0.55;}

/****************************************************  Footer */
.footer {padding: 2%;}
.copyright {font-size: 13px; text-align: center;}

/****************************************************  Top */
#top {position: relative; width: 100%; min-height: 100vh; overflow: auto;}
#top_content {position: absolute; top: 50%; left: 3%; transform: translateY(-50%); z-index: 2; text-align: left;}
@media (max-height: 600px) {
  #top_content {top: 100px; transform: none;}
}

#top h1 {font-size: 4rem; color: #fff; font-family: var(--font-en); margin-bottom: 2rem; text-shadow:0 1px 2px rgba(0,0,0,0.15),0 4px 12px rgba(0,0,0,0.12);}
#top h1 span {display: block; line-height: 4rem;}

.full-screen-bg {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; object-fit: cover; z-index: -1; background-color: #000;}

.top_box {max-width: 100%; margin: 0 0 5px 0; padding: 0.8rem; box-sizing: border-box; background-color: rgb(255 255 255 / 0.8); backdrop-filter: blur(10px); margin-bottom: 5px; font-size: 0.9rem; line-height: 1.2rem; word-spacing: keep-all;}
.top_box:first-of-type {padding: 1.4rem 0.8rem;}
.top_box:hover {background-color: rgb(255 255 255 / 1);}
.top_box:last-child:hover {background-color: rgb(255 255 255 / 0.8);}

.top_box dt {font-size: 0.8rem; font-family: var(--font-en); font-weight: 400; padding-bottom: 3px;}
.top_box p {line-height: 1.2rem;}

.top_box:first-of-type dd {font-size: 1.4rem; padding-top: 3px;}

/****************************************************  Monthly Exhibition */
#monthly_exhibition h1 {font-size: 1.6rem;}
#monthly_exhibition h2 {font-size: 1.1rem;}
.exhibition-period {font-size: 0.9rem; padding-top: 2rem;}
.exhibition-en-title, .summary-en {font-family: var(--font-en);}
.exhibition-en-title span {font-size: 0.8rem;}

.ex_img {aspect-ratio: 5 / 7.5; overflow: hidden;margin-bottom: 12px; background-color: #f0f0f0; position: relative; transition-duration: .5s!important;}
.ex_img img {width: 100%; height: 100%; object-fit: cover;
display: block; transition: transform 0.6s ease!important;}
.img_hover:hover img {transform: scale(1.08)!important;}

.no-image-placeholder {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;color: #999;font-size: 0.8rem;}

.view-exhibition-btn {margin-top: 60px; display: inline-flex; align-items: center; gap: 14px; padding: 10px 20px; border: 1px solid #333; color: #333;text-decoration: none; font-size: 14px; letter-spacing: 0.05em; position: relative;transition: background-color 0.3s ease, color 0.3s ease;}
.view-exhibition-btn::after {content: ""; width: 7px; height: 7px; border-top: 1px solid #333; border-right: 1px solid #333; transform: rotate(45deg); transition: transform 0.3s ease; margin-left: 4px;}
.view-exhibition-btn:hover::after {transform: rotate(45deg) translate(4px, -4px);}

/********* Upper section archive (latest)*/
.upper-section-archive {border: #d3d3d3 solid 1px; padding: 5%;display: flex; gap: 40px; align-items: flex-start; margin-bottom: 60px;}
.upper-section-archive-img {width: 17%; min-width: 150px; flex-shrink: 0;}

/********* Upper section (latest)*/
.upper-section {display: flex; gap: 40px; align-items: flex-start; margin-bottom: 60px;}
.upper-section-img {width: 30%; flex-shrink: 0;}
.upper-section-info {width: 70%;}

/********* Past */
.past-exhibitions {display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px;}
.past-exhibitions-box {display: flex; gap: 20px; align-items: flex-start;text-decoration: none;}
.past-exhibition-img {width: 30%; flex-shrink: 0;}
.past-exhibitions-box:hover .past-exhibition-img img {opacity: .85;}
.past-exhibition-info {width: 70%;}

/****************************************************  Monthly Exhibition - single-exhibition.php */
.exhibition-content {padding-top: 2rem;}
.exhibition-content h2 {font-size: 1.2rem; padding: 10px 0 20px;}
.exhibition-content p {padding-bottom: 40px;}
.exhibition-items {display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;}

.item_img {aspect-ratio: 5 / 7.5; overflow: hidden; margin-bottom: 12px;background-color: #f0f0f0; position: relative; transition-duration: .5s !important;}
.item_img img {width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.6s ease !important;}
.img_hover:hover img {transform: scale(1.08) !important;}

/****************************************************  Product - single-item.php */
.item_content {padding-top: 60px;}
.item_spec {font-size: 0.9rem; padding: 60px 0 60px; display: grid; grid-template-columns: auto 1fr; gap: 5px 40px;}
.item_spec dt, .item_spec dd {margin: 0;}
.item_spec dt {white-space: nowrap;}

.base_wrap {display: flex; justify-content: center;}
.base_url {display: inline-flex; align-items: center; gap: 14px; padding: 10px 60px; border: 1px solid #333; color: #333;text-decoration: none; font-size: 14px; letter-spacing: 0.05em; position: relative;transition: background-color 0.3s ease, color 0.3s ease; text-decoration: none!important;}
.base_url::after {content: ""; width: 7px; height: 7px; border-top: 1px solid #333; border-right: 1px solid #333; transform: rotate(45deg); transition: transform 0.3s ease; margin-left: 4px;}
.base_url:hover::after {transform: rotate(45deg) translate(4px, -4px);}
.base_url img {width: 20px; height: auto;}

/**************************************************** Story / Journal archive*/
#article {display: flex; flex-direction: column; gap: 60px;}
#article_aside {order: -1; width: 100%;}
#article_content {order: 1;}

.article_box a {display: flex; gap: 40px; align-items: flex-start; margin-bottom: 60px;}
.article_left {width: 30%; flex-shrink: 0;}
.article_right {width: 70%;}

.article_img {aspect-ratio: 7.5 / 5; overflow: hidden;margin-bottom: 12px; background-color: #f0f0f0; position: relative; transition-duration: .5s!important;}
.article_img img {width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease!important;}

.article_right li:first-of-type {font-size: 1.2rem; line-height: 1.3rem; padding-bottom: 5px;}
.article_right li:nth-child(2)  {font-size: 0.9rem; padding-bottom: 20px;}

.aside_block:first-of-type {display: none;}
.aside_block {font-size: 0.8rem; margin-bottom: 60px; border-left: 1px dotted #999;}
.aside_block li {padding: 5px 20px; border: 1px solid #333; color: #333; margin-right: 15px; float: left;}
.aside_block li:hover {border: 1px solid #999;}
.aside_block p {display: none;}

.sp_none {display: none;}

/**************************************************** Single*/
.date {padding-bottom: 2rem;}

#single h2 {font-size: 1.3rem; padding: 10px 0 20px;}
#single a {text-decoration: underline;}
#single a:hover {opacity: 0.5;}
#single p {font-size: 1.2rem; padding: 0 0 40px;}
#single em {font-style: italic;}
#single strong {font-weight: bold;}

#single ul {padding: 20px 0;}
#single li {margin-left: 20px; list-style: initial;}

#single ol {margin: 0 20px; padding-bottom: 30px; list-style:none; counter-reset:counter;}
#single ol > li {list-style: none; text-indent: -1.8em;}

#single ol > li::before {
  content:counters(counter, "-") ". ";
  counter-increment:counter;
}
#single ol li > ol {counter-reset:counter;}
#singleol li > ul {counter-reset:counter;}
#single ol li > ul li {text-indent: 5px;}

.wp-block-table table {margin: 20px 0; border-collapse: collapse;}
.wp-block-table th, .wp-block-table td {border: 1px solid #000!important; padding: 10px;}
.is-style-stripes th, .is-style-stripes td {padding: 10px; border: 0!important;}
.is-style-stripes tr:nth-of-type(odd) {background: #d3d3d3!important;}

.wp-block-gallery li {list-style: none!important;}
.wp-block-gallery ul {padding-bottom: 10px;}
.wp-block-gallery a img {max-width: 100px; height: 100px!important; object-fit: cover!important;}
.wp-block-image img {max-width: 100%; height: auto; object-fit: cover!important; margin-bottom: 2px;}
.wp-block-separator {margin-bottom: 40px;}

.wp-block-columns {background-color: #fff; padding: 5%; margin-bottom: 5%;}

/* サムネイルのキャプションを非表示にする（Lightbox拡大時のみ表示） */
figure.wp-block-image figcaption,
figure.wp-block-image .wp-element-caption,
.gallery-item .gallery-caption,
.wp-caption-text {display: none;}

/**************************************************** Contact */
#contact {width: 67%; margin: 0 auto;}
.contact_box {padding-bottom: 40px;}
.contact_email {padding-top: 30px;}

/****** wp-navi */
.wp-pagenavi {width: 100%;display: flex;flex-wrap: wrap;justify-content: flex-start;align-items: center;margin: 40px 0;padding: 20px 0 40px 2%;box-sizing: border-box;gap: 6px;}
.wp-pagenavi .pages {display: none;}
.wp-pagenavi a, 
.wp-pagenavi span {display: flex;align-items: center;justify-content: center;min-width: 30px;height: 30px;
padding: 0 5px !important;font-size: 0.85rem;text-decoration: none;border: 0 !important;transition: all 0.2s ease-in-out;}
.wp-pagenavi a {background-color:#b3b3b3;color:#fff;}
.wp-pagenavi span.current {background-color:#121212;color: #fff;}
.wp-pagenavi a:hover {background-color: #121212;}