@charset "UTF-8";
/*
Theme Name: Eriko Morita
Description: 
Theme URI: https://erikomorita.com/
Author: 和工房 包結
Author URI: https://erikomorita.com/
Version: 1.0
*/

/* --------------------------------------------------------------------------------------------------
Adobe Fonts
-------------------------------------------------------------------------------------------------- */

html {
visibility: hidden;
animation: loading 1s;
}

html.wf-active, html.loading-delay {
visibility: visible;
}

@keyframes loading {

0% { opacity: 0; }
100% { opacity: 1; }

}


/* --------------------------------------------------------------------------------------------------
Reset
-------------------------------------------------------------------------------------------------- */

html, body, div, span, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, code, del, dfn, em, img, ins,
small, strong, sub, sup, b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
margin: 0;
padding: 0;
}
html {
overflow-x: hidden;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote::before, blockquote::after,
q::before, q::after {
content: '';
content: none;
}
table, table th, table td {
border-collapse: collapse;
border-spacing: 0;
border: none;
}
a {
text-decoration: none;
outline: none;
}
img {
vertical-align: bottom;
}
hr {
display: none;
}
address {
font-style: normal;
}
figure {
margin: 0;
}


/* --------------------------------------------------------------------------------------------------
Default
-------------------------------------------------------------------------------------------------- */

:root {
--color_black: #060608;
--color_white: #fff;
--color_bg: #EFEFEF;
--color_border: #9F9898;
--link_text: #49494D;
--link_border: #7E7E7E;
--headline_font: "fot-tsukubrdgothic-std", sans-serif;
--headline_font_en: "josefin-sans", sans-serif;
--body_font: "toppan-bunkyu-mincho-pr6n", sans-serif;
--body_font_en: "garamond-premier-pro-display", serif;
--label_font: "josefin-sans", sans-serif;
--label_font_mix: "josefin-sans", "fot-tsukubrdgothic-std", sans-serif;
--font_weight: 400;
--font_weight_light: 300;
--body_font_size: clamp(0.875rem, 0.221vw + 0.823rem, 1rem);
--body_font_size_en: clamp(1rem, 0.221vw + 0.948rem, 1.125rem);
}

body {
background: var(--color_bg);
font-style: normal;
font-weight: var(--font_weight);
color: var(--color_black);
}

html[lang="ja"] body {
font-family: var(--body_font);
font-size: var(--body_font_size);
line-height: 2;
}

html[lang="en-US"] body {
font-family: var(--body_font_en);
font-size: var(--body_font_size_en);
line-height: 1.8;
}

html[lang="ja"] :where(h1, h2, h3, h4, h5, h6) {
font-family: var(--headline_font);
font-weight: var(--font_weight);
line-height: 1.5;
}

html[lang="en-US"] :where(h1, h2, h3, h4, h5, h6) {
font-family: var(--headline_font_en);
font-weight: var(--font_weight_light);
line-height: 1.5;
}

.section-title {
font-size: clamp(1.75rem, 0.221vw + 1.698rem, 1.875rem);
text-align: center;
letter-spacing: 0.07em;
margin-bottom: calc(clamp(3.124rem, 5.46875vw, 4.375rem) - (clamp(1.75rem, 0.221vw + 1.698rem, 1.875rem) * 0.25));
}

.section-title:not(:nth-child(1)) {
margin-top: calc(clamp(7.5rem, 11.71875vw, 9.375rem) - (clamp(1.75rem, 0.221vw + 1.698rem, 1.875rem) * 0.25));
}

html[lang="ja"] .section-title {
margin-bottom: calc(clamp(3.125rem, 5.46875vw, 4.375rem) - (clamp(1.75rem, 0.221vw + 1.698rem, 1.875rem) * 0.25) - (clamp(0.875rem, 0.221vw + 0.823rem, 1rem) * 0.5));
}

html[lang="ja"] .section-title:not(:nth-child(1)) {
margin-top: calc(clamp(7.5rem, 11.71875vw, 9.375rem) - (clamp(1.75rem, 0.221vw + 1.698rem, 1.875rem) * 0.25) - (clamp(0.875rem, 0.221vw + 0.823rem, 1rem) * 0.5));
}

html[lang="en-US"] .section-title {
margin-bottom: calc(clamp(3.125rem, 5.46875vw, 4.375rem) - (clamp(1.75rem, 0.221vw + 1.698rem, 1.875rem) * 0.25) - (clamp(1rem, 0.221vw + 0.948rem, 1.125rem) * 0.4));
}

html[lang="en-US"] .section-title:not(:nth-child(1)) {
margin-top: calc(clamp(7.5rem, 11.71875vw, 9.375rem) - (clamp(1.75rem, 0.221vw + 1.698rem, 1.875rem) * 0.25) - (clamp(1rem, 0.221vw + 0.948rem, 1.125rem) * 0.4));
}

#home .section-title {
font-family: var(--headline_font_en);
font-weight: var(--font_weight_light);
}

#home .mizuhiki-works-section .section-title {
font-size: 1.625rem;
margin-bottom: clamp(1.875rem, 3.59375vw, 2.875rem);
}

#home .main-section .section-title {
font-size: clamp(1.625rem, 0.773vw + 1.444rem, 2.063rem);
line-height: 1;
margin-bottom: 0;
position: absolute;
}

.term-label {
font-size: clamp(1.25rem, 1.105vw + 0.991rem, 1.875rem);
text-align: center;
margin-top: calc(clamp(6.25rem, 15.625vw, 12.5rem) - (clamp(1.25rem, 1.105vw + 0.991rem, 1.875rem) * 0.25));
margin-bottom: calc(3.125rem - (clamp(1.25rem, 1.105vw + 0.991rem, 1.875rem) * 0.25));
}

html[lang="ja"] .term-label {
font-family: var(--label_font);
font-weight: var(--font_weight_light);
}

.results-label {
font-size: clamp(1.25rem, 1.105vw + 0.991rem, 1.875rem);
text-align: center;
margin-bottom: calc(3.125rem - (clamp(1.25rem, 1.105vw + 0.991rem, 1.875rem) * 0.25));
}

p {
letter-spacing: 0.05em;
margin-top: 1.8em;
}

html[lang="ja"] p {
margin-top: 2em;
}

:where(h2, h3, h4, h5, h6):nth-child(1), 
:where(h2, h3, h4, h5, h6) + p, :where(h2, h3, h4, h5, h6) + ul, 
:where(h2, h3, h4, h5, h6) + ol, :where(h2, h3, h4, h5, h6) + dl, 
:where(h2, h3, h4, h5, h6) + table, :where(h2, h3, h4, h5, h6) + figure, 
:where(p, ul, ol dl, table, figure):nth-child(1), 
html[lang="ja"] :where(h2, h3, h4, h5, h6) + p, html[lang="ja"] :where(h2, h3, h4, h5, h6) + ul, 
html[lang="ja"] :where(h2, h3, h4, h5, h6) + ol, html[lang="ja"] :where(h2, h3, h4, h5, h6) + dl, 
html[lang="ja"] :where(h2, h3, h4, h5, h6) + table, html[lang="ja"] :where(h2, h3, h4, h5, h6) + figure, 
html[lang="ja"] :where(p, ul, ol dl, table, figure):nth-child(1) { 
margin-top: 0;
}

a {
color: var(--color_black);
transition: all .25s ease;
}

a:hover {
opacity: 0.8;
}

a .pic {
overflow: hidden;
}

a .pic img {
transform: scale(1);
transition: transform .5s ease;
}

a:hover .pic img {
transform: scale(1.05);
}

a:has(.pic):hover {
opacity: 1;
}

img {
width: 100%;
height: auto;
vertical-align: bottom;
}

svg {
vertical-align: bottom;
}

.br {
display: block;
}

.br-inline {
display: inline-block;
}

/**
 * splide
 */
 
.splide__pagination {
gap: 1.25rem;
bottom: calc((1.5rem + 8px) * -1);
}

.splide__pagination li {
display: inline-flex;
}

.splide__pagination__page {
background: transparent;
border: 1px solid var(--color_border);
margin: 0;
opacity: 1;
}

.splide__pagination__page.is-active {
background: var(--color_border);
transform: none;
}

.splide.is-focus-in .splide__pagination__page:focus {
outline: none;
}


/* --------------------------------------------------------------------------------------------------
Layout
-------------------------------------------------------------------------------------------------- */

/**
 * common
 */

.container {
width: 84.8%;
max-width: 1000px;
margin: 0 auto;
}

.container-sm {
width: 84.8%;
max-width: 640px;
margin: 0 auto;
}

/**
 * header
 */

#site-name {
width: auto;
height: 3.375rem;
}

#site-name svg {
width: auto;
height: 100%;
}

#site-name svg path {
fill: var(--link_text);
}

#main-header-mobile-menu {
display: none;
}

.bogo-language-switcher {
display: flex;
flex-direction: row-reverse;
font-family: var(--label_font);
font-size: 0.875rem;
font-weight: var(--font_weight);
color: var(--link_border);
letter-spacing: 0.05em;
line-height: 1;
}

.bogo-language-switcher li {
display: flex;
}

.bogo-language-switcher li:not(:nth-child(1))::after {
content: "/";
color: var(--link_text);
padding: 0 0.5em;
}

.bogo-language-switcher a {
color: var(--link_border);
}

.bogo-language-switcher .current {
color: var(--link_text);
}

.bogoflags, .bogoflags-before::before {
display: none;
}

/**
 * hero(home)
 */

.home #hero {
width: 100%;
padding-bottom: calc(1.5rem + 8px);
}

#home-hero img {
aspect-ratio: 683 / 384;
}

/**
 * main(home)
 */

.home #main {
padding: clamp(5rem, 7.8125vw, 6.25rem) 0 6.25rem;
}

.home .main-section {
width: 98%;
max-width: 1246px;
margin: 6.25rem auto 0;
position: relative;
}

/**
 * mizuhiki-works(home)
 */

.mizuhiki-works-section {
width: 98%;
max-width: 1346px;
margin: 0 auto;
}

.mizuhiki-works-section ul {
display: flex;
flex-wrap: wrap;
gap: 13px;
}

.mizuhiki-works-section ul li {
width: calc((100% - 26px) / 3);
text-align: center;
}

.mizuhiki-works-section ul li .pic img{
aspect-ratio: 1 / 1;
object-fit: cover;
object-position: center center;
}

.mizuhiki-works-section ul li .text {
font-family: var(--label_font);
font-size: clamp(0.938rem, 0.552vw + 0.808rem, 1.25rem);
line-height: 1;
margin-top: 0.625rem;
}

/**
 * bnr(home)
 */

.bnr-section {
width: 98%;
max-width: 1346px;
margin: 0 auto;
}

.bnr-section ul {
display: flex;
flex-wrap: wrap;
gap: 13px;
}

.bnr-section ul li {
aspect-ratio: 11 / 5;
width: calc((100% - 26px) / 3);
font-family: var(--label_font_mix);
font-size: 1.5rem;
font-weight: var(--font_weight_light);
letter-spacing: 0.07em;
}

.bnr-section ul li a {
background: #E5E5E5;
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}

/**
 * footer
 */

#footer {
text-align: center;
padding: 12.5rem 0 3.125rem;
}

.sns-icon-group {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 1.875rem;
}

.sns-icon-group img {
width: auto;
height: 1.875rem;
}

#copyright {
font-family: var(--label_font);
font-size: 0.875rem;
font-weight: var(--font_weight_light);
letter-spacing: 0;
margin-top: 1.875rem;
}

/**
 * bottom
 */

.hero-section-header {
text-align: center;
padding: clamp(5.25rem, 9.375vw, 7.5rem) 0 6.25rem;
position: relative;
}

#profile .hero-section-header, #story .hero-section-header {
padding: 0;
}

.hero-section-header h1 {
font-family: var(--label_font);
font-size: max(1.75rem, 2.578125vw);
font-weight: var(--font_weight);
color: var(--link_text);
letter-spacing: 0.05em;
line-height: 1;
}

#profile .hero-section-header h1, #story .hero-section-header h1 {
color: var(--color_white);
position: absolute;
top: max(2.5rem, 3.75vw);
left: 50%;
transform: translateX(-50%);
}

.bottom .main-section .container-sm {
padding: calc(clamp(6.25rem, 9.375vw, 7.5rem) - (clamp(1.75rem, 0.221vw + 1.698rem, 1.875rem) * 0.25)) 0;
}

.bottom .main-section .container-sm:nth-last-of-type(1) {
padding-bottom: 0;
}

/**
 * mizuhiki-works(archive)
 */

#mizuhiki-works .container {
width: 98%;
}

.mizuhiki-works .hero-section-header, .exhibitions .hero-section-header {
text-align: center;
margin-top: 0;
/*padding-bottom: clamp(3.125rem, 5.46875vw, 4.375rem);*/
}

.mizuhiki-works-top-section ul {
display: flex;
flex-wrap: wrap;
gap: clamp(3.125rem, 8.4375vw, 6.75rem);
}

.mizuhiki-works-top-section ul li a {
display: flex;
flex-direction: column-reverse;
align-items: center;
}

.mizuhiki-works-top-section ul li h2 {
font-family: var(--label_font);
font-size: clamp(0.938rem, 0.11vw + 0.912rem, 1rem);
font-weight: var(--font_weight);
letter-spacing: 0.07em;
line-height: 1;
margin-top: clamp(0.625rem, 1.875vw, 1.5rem);
}

.mizuhiki-works-top-section ul li .pic img {
aspect-ratio: 25 / 11;
object-fit: cover;
}

/**
 * mizuhiki-works(tax) / exhibitions(tax)
 */

.post-item-link {
display: flex;
flex-direction: column-reverse;
}

.post-item-link .post-item-title {
font-size: clamp(0.75rem, 0.442vw + 0.646rem, 1rem);
}

.post-item-link .pic {
margin-bottom: calc(clamp(0.9375rem, 1.875vw, 1.5rem) - (clamp(0.75rem, 0.442vw + 0.646rem, 1rem) * 0.25));
}

.post-item-link .pic img {
aspect-ratio: 4 / 3;
object-fit: cover;
}

p.no-post {
text-align: center;
}

/**
 * mizuhiki-works(single) / exhibitions(single)
 */

article header.hero-section-header {
text-align: center;
padding: clamp(5.25rem, 9.375vw, 7.5rem) 0 clamp(3.125rem, 5.46875vw, 4.375rem);
}

article header.hero-section-header h1 {
line-height: 1.5;
margin-bottom: 3.125rem;
}

html[lang="ja"] article header.hero-section-header h1 {
font-family: var(--headline_font);
}

html[lang="en-US"] article header.hero-section-header h1 {
font-family: var(--headline_font_en);
font-weight: var(--font_weight_light);
}

article header.hero-section-header figure img {
aspect-ratio: 5 / 3;
object-fit: cover;
}

article section .post-content {
max-width: 640px;
margin-right: auto;
margin-left: auto;
}

.btn-cta-section, .wp-block-buttons {
text-align: center;
margin-top: 3.125rem;
}

.post-content .wp-block-button {
text-align: center;
margin-right: auto;
margin-left: auto;
}

.btn-cta-section a, .wp-block-button a {
border: 1px solid var(--color_border);
background: transparent;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--link_text);
line-height: 1;
}

.post-content .wp-block-button a.wp-block-button__link {
min-width: 8.1875rem !important;
width: inherit;
}

html[lang="ja"] .btn-cta-section a, 
html[lang="ja"] .btn-cta-section a.wp-block-button__link, 
html[lang="ja"] .wp-block-button a.wp-block-button__link {
font-family: var(--headline_font);
font-size: 0.875rem !important;
padding: 0.75em 1em;
}

html[lang="en-US"] .btn-cta-section a, 
html[lang="en-US"] .btn-cta-section a.wp-block-button__link, 
html[lang="en-US"] .wp-block-button a.wp-block-button__link {
font-family: var(--headline_font_en);
font-size: 1rem !important;
font-weight: var(--font_weight_light);
padding: 0.59375em 1.125em;
}

.post-gallery {
/*width: 100vw;
max-width: 1056px;
position: relative;
left: 50%;
transform: translateX(-50%);*/
margin-top: clamp(3.125rem, 5.46875vw, 4.375rem);
}

.post-gallery ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(0.625rem, 1.5625vw, 1.25rem);
}

.post-gallery ul li img {
aspect-ratio: 1.6375 / 1;
object-fit: cover;
}

.nav-back-page {
text-align: center;
line-height: 1;
margin-top: clamp(5.25rem, 9.375vw, 7.5rem);
}

.nav-back-page a {
/*border-bottom: 1px solid var(--color_border);*/
display: inline-flex;
justify-content: center;
width: 11rem;
font-family: var(--label_font);
font-size: 1rem;
font-weight: var(--font_weight_light);
letter-spacing: 0.07em;
line-height: 1;
padding-bottom: 0.625rem;
position: relative;
}

.nav-back-page a::after {
background: var(--color_border);
content: "";
width: 100%;
height: 1px;
margin-right: auto;
margin-left: auto;
position: absolute;
right: 0;
bottom: 0;
left: 0;
transition: all 0.25s ease;
}

.nav-back-page a:hover::after {
right: inherit;
left: -0.625rem;
}

/**
 * contact
 */

.contact-section {
width: 84.8%;
max-width: 500px;
margin-right: auto;
margin-left: auto;
}

.contact-section .container {
width: 100%;
}

.wp-block-snow-monkey-forms-item:not(:nth-child(1)) {
margin-top: 3.125rem;
}

.smf-item__col--label {
line-height: 1;
margin-bottom: 0.625rem;
}

html[lang="ja"] .smf-item__col--label {
font-family: var(--headline_font);
}

html[lang="en-US"] .smf-item__col--label {
font-family: var(--label_font);
font-weight: var(--font_weight_light);
}

.smf-form .smf-text-control__control, .smf-form .smf-textarea-control__control {
border: 1px solid var(--color_border);
border-radius: 0;
box-sizing: border-box;
box-shadow: none;
width: 100%;
vertical-align: bottom;
margin: 0;
padding: 0.5625rem 0.625rem;
}

.smf-action {
text-align: center;
margin-top: 5rem;
}

.smf-action .smf-button-control__control[data-action="confirm"], .smf-action .smf-button-control__control[data-action="back"], 
.smf-action .smf-button-control__control[data-action="complete"] {
appearance: none;
background: none;
border: 1px solid var(--color_border);
border-radius: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
width: 12em;
height: 2.5em;
font-size: 1.25rem;
color: var(--link_text);
outline: none;
margin: 0;
padding: 0;
}

html[lang="ja"] .smf-action .smf-button-control__control[data-action="confirm"], 
html[lang="ja"] .smf-action .smf-button-control__control[data-action="back"], 
html[lang="ja"] .smf-action .smf-button-control__control[data-action="complete"], 
html[lang="ja"] .smf-error-messages {
font-family: var(--headline_font);
}

html[lang="en-US"] .smf-action .smf-button-control__control[data-action="confirm"], 
html[lang="en-US"] .smf-action .smf-button-control__control[data-action="back"], 
html[lang="en-US"] .smf-action .smf-button-control__control[data-action="complete"],
html[lang="en-US"] .smf-error-messages {
font-family: var(--headline_font_en);
font-weight: var(--font_weight_light);
}

.smf-item:has([data-validations~="required"]) .smf-item__label__text::after {
content: "*";
margin-left: 0.25em;
}

.smf-error-messages {
font-size: 0.875em;
}

.smf-action .smf-button-control__control .smf-sending {
right: 10px;
}

.smf-sending::before {
border: 1px solid var(--color_border);
border-top-color: var(--color_border);
}

/**
 * 404
 */

.error404 .main-section {
width: 84.8%;
max-width: 640px;
margin-right: auto;
margin-left: auto;
}

p.not-found-message {
text-align: center;
}


/* --------------------------------------------------------------------------------------------------
Media Queries (min-width: 601px)
-------------------------------------------------------------------------------------------------- */

@media only screen and (min-width: 601px) {

.post-gallery button {
appearance: none;
border: 0;
cursor: pointer;
padding: 0;
}

.gallery-modal-slider {
position: relative;
}

.gallery-modal {
display: none;
}

.gallery-modal.is-open {
display: block;
}

.gallery-modal .splide {
visibility: hidden;
}

.gallery-modal.is-open .splide.is-initialized {
visibility: visible;
}

.gallery-overlay {
background: var(--color_bg);
display: flex;
justify-content: center;
align-items: center;
overflow-y: auto;
overscroll-behavior-y: none;
scrollbar-width: none;
padding: 0;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
}

.gallery-container {
width: 84.8%;
max-width: 1000px;
margin: auto;
position: relative;
}

.gallery-content-modal-slider {
padding: 5%;
position: relative;
}

.gallery-modal-slider .splide__slide {
transform: translate3d(0, 0, 0);
display: grid;
place-items: center;
}

.gallery-modal-slider .splide__slide img {
aspect-ratio: 1.6375 / 1;
box-sizing: border-box;
width: 100%;
object-fit: cover;
}

.splide__arrow {
background-color: none;
width: 2.5rem;
height: 2.5rem;
}

.splide__arrow--prev {
background: url("assets/img/common/chevron-left.svg") no-repeat left center / auto 2.5rem;
}

.splide__arrow--next {
background: url("assets/img/common/chevron-right.svg") no-repeat right center / auto 2.5rem;
}

.gallery-container .splide__arrow--prev {
left: calc((5% - 2.5rem) / 2);
}

.gallery-container .splide__arrow--next {
right: calc((5% - 2.5rem) / 2);
}

.gallery-container .splide__pagination {
/*gap: 8px;*/
/*bottom: calc((clamp(2rem, 4.21875vw, 3.375rem) - 8px) / 2);*/
bottom: 0;
}

.gallery-container .splide__pagination li {
display: inline-flex;
}

.gallery-container .splide__toggle {
appearance: none;
background: none;
border: 0;
outline: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 8px;
height: 8px;
padding: 0;
}

.gallery-container .splide.is-focus-in .splide__arrow:focus, 
.gallery-container .splide__arrow:focus-visible {
outline: none;
outline-offset: inherit;
}

.gallery-close-btn {
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
background: none;
border: none;
cursor: pointer;
outline: none;
width: 1.625rem;
height: 1.625rem;
padding: 0;
position: absolute;
top: 0;
right: 5%;
z-index: 10;
}

.gallery-close-btn::before, .gallery-close-btn::after {
background: var(--link_text);
border-radius: 0.5px;
display: block;
content: "";
width: 100%;
height: 1px;
position: absolute;
/*top: 0;
left: 0;*/
}

.gallery-close-btn::before {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.gallery-close-btn::after {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

.gallery-modal[aria-hidden="false"] .gallery-overlay {
-webkit-animation: mmfadeIn 0.5s cubic-bezier(0, 0, 0.2, 1);
animation: mmfadeIn 0.5s cubic-bezier(0, 0, 0.2, 1);
}

.gallery-modal[aria-hidden="false"] .gallery-container {
-webkit-animation: mmslideIn 0.5s cubic-bezier(0, 0, 0.2, 1);
animation: mmslideIn 0.5s cubic-bezier(0, 0, 0.2, 1);
}

.gallery-modal[aria-hidden="true"] .gallery-overlay {
-webkit-animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.gallery-modal[aria-hidden="true"] .gallery-container {
-webkit-animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.gallery-overlay, .gallery-container {
will-change: transform;
}

@-webkit-keyframes mmfadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@keyframes mmfadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@-webkit-keyframes mmfadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}

@keyframes mmfadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}

@-webkit-keyframes mmslideIn {
from {
transform: translateY(15%);
}
to {
transform: translateY(0);
}
}

@keyframes mmslideIn {
from {
transform: translateY(15%);
}
to {
transform: translateY(0);
}
}

@-webkit-keyframes mmslideOut {
from {
transform: translateY(0);
}
to {
transform: translateY(15%);
}
}

@keyframes mmslideOut {
from {
transform: translateY(0);
}
to {
transform: translateY(15%);
}
}

}


/* --------------------------------------------------------------------------------------------------
Media Queries (min-width: 768px)
-------------------------------------------------------------------------------------------------- */

@media only screen and (min-width: 768px), screen and (orientation: landscape) {

/**
 * story(home)
 */

.home .story-section .section-title {
color: var(--color_white);
top: 68.37%;
right: 18.46%;
}

/**
 * profile(home)
 */

.home .profile-section .section-title {
top: 22.04%;
left: 11.08%;
}

/**
 * exhibitions(home)
 */

.home .exhibitions-section .section-title {
color: var(--color_white);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

/**
 * mizuhiki-works(tax) / exhibitions(tax)
 */

.post-list-content {
max-width: 880px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(3.125rem, 6.25vw, 5rem);
}

.post-list-content article {
width: 100%;
}

.post-list-content article:only-child {
grid-column: 1 / -1;
justify-self: center;
max-width: calc((100% - clamp(3.125rem, 6.25vw, 5rem)) / 2);
}

}


/* --------------------------------------------------------------------------------------------------
Media Queries (min-width: 1025px)
-------------------------------------------------------------------------------------------------- */

@media only screen and (min-width: 1025px) {

.toggle-button-wrapper, #nav-overlay {
display: none;
}

#header {
background-color: transparent;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
width: 100%;
padding: 1.875rem 0;
position: sticky;
transition: padding 0.25s ease, background-color 0.25s ease;
z-index: 99;
}

.home #header {
position: absolute;
top: 0;
}

#header.is-active {
background-color: rgba(239, 239, 239, 0.5);
padding: 1.25rem 0;
top: 0;
}

.home #header.is-active {
position: fixed;
}

#site-name {
margin-left: 2.5rem;
/*transition: height 0.25s ease;*/
}

.home #site-name svg path {
fill: var(--color_white);
}

#header.is-active #site-name {
height: 2.375rem;
}

.home #header.is-active #site-name svg path {
fill: var(--link_text);
}

/*#main-header-menu {
display: block;
}

#main-header-mobile-menu {
display: none;
}*/

#nav-menu {
/*justify-self: center;*/
position: absolute;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
}

#main-header-menu .global-nav {
display: flex;
/*flex-wrap: wrap;*/
justify-content: center;
gap: min(3.125vw, 2.75rem);
font-family: var(--label_font);
font-size: 0.875rem;
letter-spacing: 0.05em;
padding-bottom: 1.125rem;
}

#main-header-menu .global-nav li {
position: relative;
}

#main-header-menu .global-nav a {
color: var(--link_text);
}

#main-header-menu .global-nav ul.sub-menu {
background: var(--white);
box-sizing: border-box;
display: flex;
flex-direction: column;
width: 100%;
margin: 0;
text-align: center;
-webkit-transition: all .25s ease;
transition: all .25s ease;
visibility: hidden;
opacity: 0;
padding: 1rem;
position: absolute;
top: 1.5em;
/*left: 0;*/
z-index: 10;
}

#main-header-menu .global-nav li.menu-item-has-children:hover ul.sub-menu {
visibility: visible;
opacity: 1;
}

#sub-header-menu {
display: flex;
align-items: center;
gap: 0.9375rem;
justify-self: end;
margin-right: 1.5rem;
padding-bottom: 1.125rem;
position: relative;
z-index: 100;
}

#sub-header-menu .site-search {
position: relative;
/*z-index: 5;*/
}

#sub-header-menu .site-search input[type="text"] {
appearance: none;
background: url("assets/img/common/icon-search-bk.svg") no-repeat left 0.3125rem center;
background-size: 1.125rem auto;
box-sizing: border-box;
border-radius: 0;
border: none;
border-bottom: 1px solid var(--link_border);
cursor: pointer;
width: 1.875rem;
height: 1.875rem;
font-size: 1rem;
padding: 0.4375rem;
transition: all 0.5s;
outline: none;
}

#sub-header-menu .site-search input[type="text"]:focus {
width: 12.5rem;
padding: 0.4375rem 0.5rem 0.4375rem calc(0.4375rem + 1.25rem + 0.4375rem);
}

.home #main-header-menu .global-nav a, .home .bogo-language-switcher a {
color: var(--color_white);
}

.home #sub-header-menu .site-search input[type="text"] {
background-image: url("assets/img/common/icon-search-wh.svg");
border-bottom-color: var(--color_white);
color: var(--color_white);
transition: all 0.25s ease;
}

.home .bogo-language-switcher li:not(:nth-child(1))::after {
color: var(--color_white);
}

#header.is-active #main-header-menu .global-nav, #header.is-active #sub-header-menu {
padding-bottom: 0;
}

.home #header.is-active #main-header-menu .global-nav a {
color: var(--link_text);
}

.home #header.is-active .bogo-language-switcher a {
color: var(--link_border);
}

.home #header.is-active .bogo-language-switcher .current a, 
.home #header.is-active .bogo-language-switcher li:not(:nth-child(1))::after {
color: var(--link_text);
}

.home #header.is-active #sub-header-menu .site-search input[type="text"] {
background-image: url("assets/img/common/icon-search-bk.svg");
border-bottom-color: var(--link_text);
color: var(--color_black);
}

}


/* --------------------------------------------------------------------------------------------------
Media Queries (min-width: 1025px) and (max-width: 1179px)
-------------------------------------------------------------------------------------------------- */

@media screen and (min-width: 1025px) and (max-width: 1179px) {

#sub-header-menu .site-search input[type="text"]:focus {
background-color: rgba(239, 239, 239, 0.8);
}

.home #sub-header-menu .site-search input[type="text"]:focus {
background-color: rgba(239, 239, 239, 0.8);
background-image: url("assets/img/common/icon-search-bk.svg");
border-bottom-color: var(--color_black);
color: var(--color_black);
}

.home #header.is-active #sub-header-menu .site-search input[type="text"]:focus {
background-color: rgba(239, 239, 239, 0.8);
}

}


/* --------------------------------------------------------------------------------------------------
Media Queries (max-width: 1024px)
-------------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 1024px) {

#header {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 0.9375rem 0;
position: relative;
}

.home #header {
padding-top: 5.5rem;
padding-bottom: 3.125rem;
}

#site-name {
height: 2.375rem;
}

.home #site-name {
height: 3.375rem;
}

#sub-header-menu {
position: fixed;
top: 0.9375rem;
right: 0.75rem;
z-index: 50;
}

#sub-header-menu .site-search {
display: none;
}

#main-header-menu {
display: none;
}

/**
 * hamburger(menu)
 */

.toggle-button-wrapper {
position: fixed;
top: 0.78125rem;
left: 0.90625rem;
z-index: 100;
}

.hamburger-menu {
appearance: none;
background: none;
border: none;
box-sizing: border-box;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
width: 1.625rem;
height: 1.625rem;
outline: 0;
padding: 0;
-webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
pointer-events: all;
}

.hamburger-menu:hover {
cursor: pointer;
}

.hamburger-menu-icon {
position: relative;
display: block;
}

.hamburger-menu-icon, .hamburger-menu-icon::before, .hamburger-menu-icon::after {
background-color: var(--link_text);
border-radius: 0.5px;
width: 100%;
height: 1px;
-webkit-transition: all .5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
transition: all .5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

.hamburger-menu-icon::before, .hamburger-menu-icon::after {
width: 100%;
}

.hamburger-menu-icon::before, .hamburger-menu-icon::after {
content: "";
position: absolute;
top: -10px;
left: 0;
}

.hamburger-menu-icon::after {
top: 10px;
}

.hamburger-menu[aria-expanded="true"] .hamburger-menu-icon {
background-color: transparent;
}

.hamburger-menu[aria-expanded="true"] .hamburger-menu-icon::before,
.hamburger-menu[aria-expanded="true"] .hamburger-menu-icon::after {
top: 0;
}

.hamburger-menu[aria-expanded="true"] .hamburger-menu-icon::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

.hamburger-menu[aria-expanded="true"] .hamburger-menu-icon::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}

/**
 * hamburger(modal)
 */

#nav-overlay {
background: transparent;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
visibility: hidden;
z-index: 10;
}

#nav-overlay.active {
visibility: visible;
}

.nav-menu-container {
background: var(--color_bg);
box-sizing: border-box;
width: 100%;
height: 100%;
opacity: 0;
padding: 0.875rem 1.875rem 1.75rem;
position: fixed;
top: 0;
left: 0;
z-index: 98;
/*transition: top .25s ease-in-out;*/
transition: opacity .25s, visibility .25s;
visibility: hidden;
pointer-events: none;
}

.nav-menu-container.is-open, 
.nav-menu-container[aria-hidden="false"] {
overflow-y: scroll;
opacity: 1;
visibility: visible;
pointer-events: auto;
/*top: 0;*/
/*transition: top .25s ease-in-out;*/
}

#nav-menu.is-open #main-header-mobile-menu,
#nav-menu[aria-hidden="false"] #main-header-mobile-menu {
display: block;
}

#main-header-mobile-menu .site-search {
width: 63%;
margin: 0 auto 1.875rem;
}

#main-header-mobile-menu .site-search input[type="text"] {
appearance: none;
background: var(--color_white) url("assets/img/common/icon-search.svg") no-repeat left 0.5rem center;
background-size: 1rem auto;
border: none;
box-sizing: border-box;
border-radius: 0.3125rem;
cursor: pointer;
width: 100%;
height: 1.875rem;
font-size: 1rem;
line-height: 1;
padding: 0.4375rem 0.5rem 0.4375rem 2rem;
outline: none;
}

#main-header-mobile-menu .global-nav, .sub-nav, .aside-sns-group {
font-family: var(--label_font_mix);
font-size: 1rem;
font-weight: var(--font_weight_light);
}

#main-header-mobile-menu .global-nav li > a, .sub-nav li > a, .aside-sns-group li > a {
display: block;
line-height: 1;
padding: 1.375rem 0;
position: relative;
}

.mobile-menu-dropdown > a::before, .mobile-menu-dropdown > a::after {
background: var(--color_black);
border-radius: 0.5px;
display: block;
content: "";
width: 14px;
height: 1px;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
transition: all .25s;
}

.mobile-menu-dropdown > a::before {
transform: rotate(0);
}

.mobile-menu-dropdown > a::after {
transform: rotate(90deg);
}

.mobile-menu-dropdown > a.close::before {
transform: rotate(45deg);
}

.mobile-menu-dropdown > a.close::after {
transform: rotate(135deg);
}

#main-header-mobile-menu .sub-menu {
overflow: hidden;
height: 0;
transition: height 0.25s ease;
}

#main-header-mobile-menu .sub-menu li > a {
font-size: 0.875rem;
padding: 1.125rem 1.25rem;
}

.sub-nav, .aside-sns-group {
border-top: 1px solid var(--color_border);
margin-top: 0.625rem;
padding-top: 0.625rem;
}

}


/* --------------------------------------------------------------------------------------------------
Media Queries (max-width: 960px)
-------------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 960px) {

.post-gallery ul {
grid-template-columns: repeat(2, 1fr);
}

}


/* --------------------------------------------------------------------------------------------------
Media Queries (max-width: 767px)
-------------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {

#profile .hero-section-header, #story .hero-section-header {
margin-top: 17vw;
}

}


/* --------------------------------------------------------------------------------------------------
Media Queries (max-width: 767px) and (orientation: portrait)
-------------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 767px) and (orientation: portrait) {

/**
 * hero
 */

#home-hero img {
aspect-ratio: 375 / 428;
}

/**
 * mizuhiki-works(home) / bnr
 */

.mizuhiki-works-section ul {
flex-direction: column;
gap: 3.125rem;
}

.mizuhiki-works-section ul li {
width: 100%;
}

/**
 * story(home)
 */

.home .story-section .section-title {
color: var(--color_white);
top: 25%;
left: 50%;
transform: translateX(-50%);
}

/**
 * profile(home)
 */

.home .profile-section .section-title {
top: 25%;
left: 50%;
transform: translateX(-50%);
}

/**
 * exhibitions(home)
 */

.home .exhibitions-section .section-title {
color: var(--color_white);
top: 25%;
left: 50%;
transform: translateX(-50%);
}

/**
 * bnr
 */

.bnr-section ul {
flex-direction: column;
}

.bnr-section ul li {
aspect-ratio: 367 / 160;
width: 100%;
}

/**
 * mizuhiki-works(archive)
 */

.mizuhiki-works-top-section ul li .pic img {
aspect-ratio: 367 / 250;
}

/**
 * mizuhiki-works(tax) / exhibitions(tax)
 */

.post-list-content {
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(3.125vw, 6.25vw, 5rem);
}

.post-list-content article {
width: 100%;
max-width: 400px;
}

/**
 * mizuhiki-works(single) / exhibitions(single)
 */
 
article {
overflow-x: hidden;
}

article header.hero-section-header figure img {
aspect-ratio: 4 / 3;
width: 100vw;
position: relative;
left: 50%;
transform: translateX(-50%);
}

}


/* --------------------------------------------------------------------------------------------------
Media Queries (max-width: 600px)
-------------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 600px) {

.post-gallery ul {
grid-template-columns: repeat(1, 1fr);
}

.post-gallery button {
appearance: none;
border: 0;
cursor: pointer;
padding: 0;
pointer-events: none;
}

.gallery-modal {
display: none;
}

}


/* --------------------------------------------------------------------------------------------------
Media Queries (max-width: 480px)
-------------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 480px) {

.post-gallery {
width: 100vw;
position: relative;
left: 50%;
transform: translateX(-50%);
}

}


/* --------------------------------------------------------------------------------------------------
Media Queries (orientation: landscape) and (min-aspect-ratio) and (max-width: 960px)
-------------------------------------------------------------------------------------------------- */

@media screen and (orientation: landscape) and (min-aspect-ratio: 16 / 9) and (min-width: 601px), 
screen and (orientation: landscape) and (min-aspect-ratio: 17 / 9) and (min-width: 601px) {

/*.gallery-content-modal-slider {
padding-right: 7.5%;
padding-left: 7.5%;
}*/

}