/**************************************************** 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;}

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

.submenu, .slide_comp, .slide_info {display: none !important;}
.menu-overlay {position: fixed; flex: none !important;
width: 0; height: 0; margin: 0; padding: 0;}

/********* header  */
header {width: 100%; height: 80px; position: fixed; z-index: 100; padding: 20px 3%; box-sizing: border-box; display: flex; align-items: center;}

/* Global menu */
.global_nav > ul {display: flex; flex-direction: row; gap: 1.5rem;}
.global_nav > ul > li:first-child {display: none;}

/**************************************************** 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: 2%; z-index: 999; background-color: rgb(255 255 255 / 0.8); backdrop-filter: blur(10px);}

#logo a img {width: 260px;}

main {width: 100%; flex: 1;}
#content {padding: 160px 2% 0; box-sizing: border-box;}

/* element center */
body:has(#profile) main, body:has(#contact) main {display: flex; align-items: center;  padding-bottom: 0; justify-content: center;}

/****************************************************  Footer */
footer {display: flex; justify-content: center; align-items: center; height: 2vw;}
.copyright {margin: 0; padding: 0; font-size: 0.6rem; text-align: center; line-height: 1;}

/****************************************************  Top */
.fullSlideShow {position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; overflow: hidden;}
.fullSlideShow ul {position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0; overflow: hidden;}
.fullSlideShow ul li {position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; margin: 0; padding: 0; opacity: 0;}
.fullSlideShow ul li img {width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; padding: 80px 2% 2% 2%; box-sizing: border-box; transition: opacity 1.8s ease;}

/* main.php: hide scroll */
html:has(.fullSlideShow),
body:has(.fullSlideShow) {height: 100%; overflow: hidden;}
body:has(.fullSlideShow) #outer {height: 100vh; overflow: hidden;}
body:has(.fullSlideShow) #top {min-height: auto; overflow: hidden;}

.top_box {padding: 1%; margin: 0 0 0 2%; position: fixed;
right: 2%; bottom: 8%; background-color: rgba(255, 255, 255, 0.5);}

.top_box dl {display: flex; align-items: flex-start;}
.top_box dt {flex: 0 0 auto; margin-right: 40px;}
.top_box dd {margin: 0; flex: 1;}

.top_box a {text-decoration: underline; transition: opacity 0.3s ease;}
.top_box a:hover {opacity: 0.5;}

/**************************************************** Flow */
#flow {max-width: 1100px; margin: 0 auto 6rem;}
.flow_list {margin: 0; padding: 0; list-style: none;}
.flow_item {display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 5%; padding: 2rem 0; border-top: 1px solid #000;}
.flow_item:last-child {border-bottom: 1px solid #000;}
.flow_step {display: flex; flex-direction: column; align-items: flex-start; width: 8rem; color: #000; line-height: 1;}
.flow_number {font-size: 2.5rem; font-weight: 400; letter-spacing: 0.04em;}
.flow_label {margin-top: 0.75rem; font-size: 0.8rem; letter-spacing: 0.22em;}
.flow_content h2 {display: flex; align-items: center; margin: 0 0 0.75rem; font-size: 1.1rem; font-weight: 600; line-height: 1.4;}
.flow_content h2 span {font-size: 0.7rem; border: 1px solid #000; padding: 3px 15px; margin-left: 15px;}
.flow_content p {max-width: 48rem; margin: 0; line-height: 1.8;}

/**************************************************** Profile */
#profile {display: grid; grid-template-columns: 2fr 2fr 1.2fr; gap: clamp(2rem, 5vw, 6rem); max-width: 1100px; margin: 0 auto; padding: 2rem 0 6rem;}
#profile dl {margin: 0;}
#profile .prof {display: grid; grid-template-columns: max-content minmax(0, 1fr); align-content: start; column-gap: 1.5rem; row-gap: 0.75rem; padding-top: 0.5rem; font-size: 0.9rem; line-height: 1.6;}
#profile .prof dt,
#profile .prof dd,
#profile .resume dt,
#profile .resume dd {margin: 0;}
#profile > div:first-child {border-right: 1px solid #000; padding-right: clamp(1.5rem, 3vw, 4rem);}

#profile h1, #profile h2 {margin: 0 0 2.5rem; font-size: clamp(1.15rem, 1.7vw, 1.1rem);}
#profile h1 span, #profile h2 span {margin-top: 4px; color: #777; font-size: 0.8em; letter-spacing: 0.06em;}
#profile h1 span {display: block;}
#profile h2 span:nth-of-type(2) {display: block;}
#profile .resume {display: grid; grid-template-columns: 7rem minmax(0, 1fr); column-gap: 1.5rem; row-gap: 0.8rem; font-size: 0.85rem; line-height: 1.6;}
#profile .resume dd {min-width: 0;}
#profile > div:nth-child(3) {align-self: stretch;}
#profile > div:nth-child(3) img {display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%);}

/**************************************************** Works  */
/************** Submenu */
/* menu__cat */

.menu__cat {display: flex; justify-content: center;gap: 20px; padding: 0 2% 80px;  margin: 0 auto; list-style: none;}
.menu__cat li {margin-right: 20px; float: none;}
.menu__cat li:last-child {margin-right: 0;}
.menu__cat a {text-decoration: none; color: #333; color: rgba(0, 0, 0, 0.3);}
.menu__cat a:hover,
.cat_current a {color: rgba(0, 0, 0, 1);}

/************** archive */
.works_archive {display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 1px; width: 100%; box-sizing: border-box; margin: 0;
padding: 0;}
.works_archive .box {flex: 0 0 calc(50% - 1px); aspect-ratio: 20 / 7; margin: 0; position: relative; overflow: hidden; box-sizing: border-box;}

.thumbnail-wrapper {display: block; width: 100%; height: 100%; background-color: #f0f0f0; position: relative;}
.thumbnail-wrapper img {width: 100%; height: 100%; object-fit: cover; aspect-ratio: 20 / 7;}

.overlay {position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; box-sizing: border-box;
padding: 8px; color: #fff; text-align: center;}
.overlay::before {content: ""; position: absolute; inset: 0; z-index: -1; background-color: rgba(0, 0, 0, 0); transition: background-color 0.2s ease-in;}
.thumbnail-wrapper:hover .overlay::before {background-color: rgba(0, 0, 0, 0.7);}
.overlay p {position: relative; z-index: 1; margin: 0; padding: 0 10px; line-height: 1.2em; opacity: 0; transition: opacity 0.6s ease-in;}
.thumbnail-wrapper:hover .overlay p {opacity: 1;}

/**************************************************** Single*/
.works_info {display: flex; justify-content: space-between; align-items: flex-start; gap: 5%; margin-bottom: 20px;}
.box_left {width: 60%;}
.box_right {width: 340px;}
.box_left h1 {font-size: 1.3rem;}
.box_left h2 {font-size: 0.9rem; display: block; padding-top: 5px;}
.box_right .item {display: grid; grid-template-columns: 5em minmax(0, 1fr);
width: 100%; margin: 0; padding: 0; line-height: 1.6em; row-gap: 4px;}
.box_right .item dt {margin: 0; padding: 0;}
.box_right .item dd {margin: 0; padding: 0; min-width: 0; overflow-wrap: break-word;}
.memo {padding-top: 80px;}

.image_rep {position: relative; min-height: 240px; background-color: #f7f7f7;}
.image_rep:has(img.loaded),
.image_rep.is-loaded {min-height: 0; background-color: transparent;}
.image_rep img {display: block; width: 100%; height: auto; padding-bottom: 2%;}

/********************* Single default */
#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 {min-width: 1000px;}

#contact h1 {margin: 0 0 30px; font-size: clamp(1.15rem, 1.7vw, 1.1rem);}
#contact h1 span {display: block; margin-top: 4px; font-size: 0.8em; letter-spacing: 0.06em; color: #666;}

#contact dl {margin: 0; display: grid;grid-template-columns: auto 1fr; column-gap: 2em; row-gap: 0.5em;}
#contact dl dt,
#contact dl dd {margin: 0;}
#contact dl a {text-decoration: underline;}

.ggmap {padding-top: 40px;}
#contact iframe {filter: grayscale(100%);}

/****** 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 0;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;}