html, body, div, p, ul, ol, li, h1, h2, h3, h4, pre, form, p, button, img, a img, figure { border: 0 none; margin: 0; padding: 0; }
ul, li { list-style-type: none; }
* { box-sizing: border-box; }
mark { background: transparent; }

body { font-family: 'Buenard', Georgia, Times, serif; background: #fff; color: #444; line-height: 1.25em; }
a { color: inherit; text-decoration: none; }

/* zero outline on focus */
a:active, a:focus { outline: 0; border: none; -moz-outline-style: none; }
a:visited { outline: none; }
a:active, a:focus { box-shadow: none; }

img { color: #aaa; font-size: 10px; }
::selection { background: #444; color: #fff; }

/* no higlight on selection */
.link_button::selection, .wp-block-gallery::selection, img::selection { background: transparent; color: #444; }

h1, h2, h3, h4 { font-size: 1em; font-weight: normal; line-height: 1.75em; }
a { text-underline-offset: 4px;  }
h1, h2 { margin-bottom: 4em }

.font1, body { font-size: 20px; transition: font-size 0.5s } /* basic font */

.menu_switch { display: none; }

.mainframe { display: flex; padding: 2rem; }

.menu { width: 20em; margin-right: 2em; min-width: 180px; line-height: 1.25em; }
.menu .current-menu-item a { text-decoration: underline; }
.menu a { display: inline-block; }
.menu a:hover, .link_button:hover { text-decoration: underline; }
.menu li { margin-bottom: 0.1em }
.menu li ul { margin-left: 1em; }

.content { width: 100%; padding-right: 3em; max-width: 1920px; }
.content p, .content ul, .content ol { margin-bottom: 1em; max-width: 800px }
.content p a, .content ul a, .content ol a { text-decoration: underline; }
.content ul li { list-style-type: disc; margin-left: 2em; }

.content.content_body h2 { margin-bottom: 1em; margin-left: 2em; }
.content.content_body h3 { margin-bottom: 1em; margin-left: 2em; }
.content.content_body h4 { margin-bottom: 1em; font-style: oblique; }

footer { margin-bottom: 5em; }

/* general caption */

.wp-element-caption { font-size: 0.7em; line-height: 1.25em; margin-top: 0.1em; opacity: 0.5; transition: opacity 0.25s; }

/* standalone images */

.wp-block-image { max-width: 800px; }
.wp-block-image img{ margin-bottom: 0.25em }
.wp-block-image img { width: auto; max-width: 100%; height: auto; }
.wp-block-image:hover .wp-element-caption { opacity: 1; }
.wp-block-image + p { padding-top: 1em }

/* images in gallery */

.content figure { width: 100%; }
.wp-block-gallery { display: flex; flex-wrap: wrap; }
.wp-block-gallery .column { flex: 25%; max-width: 33%; }
.wp-block-gallery .wp-block-image { width: 100%; padding: 0 2vw 2vw 0; cursor: pointer; max-width: none; }
.wp-block-gallery .wp-block-image img { width: 100%; height: auto; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); }
.wp-block-gallery .wp-block-image:hover .wp-element-caption { opacity: 1; }

/* lightbox */

p + .wp-block-gallery { margin-top: 2em }
.wp-block-gallery .wp-block-image.lightbox { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background: #fff; z-index: 10; cursor: default; }
.wp-block-gallery .wp-block-image.lightbox img { width: 80vw; height: 80vh; max-width: 100%; max-height: 100%; position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -55%, 0px); object-fit: contain; box-shadow: none; opacity: 0; animation-name: fade01; animation-duration: 0.5s; animation-fill-mode: forwards; animation-delay: 0.25s }
.wp-block-gallery .wp-block-image.lightbox .wp-element-caption { position: absolute; left: 50%; bottom: 3em; transform: translateX(-50%); font-size: 1.25rem; text-align: center; opacity: 1; text-shadow: 1px 1px 1px #fff}

.close_button { position: fixed; top: 1.5rem; right: 1rem; width: 4vw; min-width: 4em; display: none; z-index: 100; cursor: pointer; opacity: 0.25; transition: opacity 0.25s; }
.close_button:hover { opacity: 1; display: none; }

.arrows { position: fixed; top: 42%; transform: translateY(-50%); width: 4vw; min-width: 5em; display: none; z-index: 100; cursor: pointer; opacity: 0.25; transition: opacity 0.25s; }
.arrows.arrow_prev { left: 2rem; }
.arrows.arrow_next { right: 1rem; }
.arrows:hover { opacity: 1; display: none; }

/* video */

.wp-block-embed.is-type-video, .wp-block-video { margin-bottom: 1em; width: 100%; max-width: 800px; }
.wp-block-embed.is-type-video iframe { width: 100%; height: 30rem; }
.wp-block-video video { object-fit: contain; width: 100%; height: auto; }
.wp-block-video:hover .wp-element-caption { opacity: 1; }

/* files */

.wp-block-file { margin-bottom: 1em }
.wp-block-file object.wp-block-file__embed { display: block; height: 75vh !important; width: 100%; margin-bottom: 0.5em; max-width: 50vw; }
.wp-block-file .wp-block-file__button { text-decoration: underline; margin-left: 0.5em; }

/* underline */

a, .link_button,
.menu .current-menu-item a, 
.menu a:hover, 
.link_button:hover,
.content p a, .content ul a, .content ol a,
.wp-block-file .wp-block-file__button
{ text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* page fade-in */

.content { opacity: 0 }
.content { animation: fade01; animation-iteration-count: 1; animation-duration: 0.5s; animation-delay: 0.25s;  animation-fill-mode: forwards; }
.content.fade-out { opacity: 1; animation: fadeout; animation-iteration-count: 1; animation-duration: 0.25s; animation-delay: 0s;  animation-fill-mode: forwards; }

/* image fade out */

.wp-block-gallery .wp-block-image.lightbox img.image-fadeout { opacity: 1; animation-name: fadeout; animation-duration: 0.25s; animation-delay: 0s }

/* animation */

@keyframes fade01 { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade02 { from { opacity: 0; } to { opacity: 0.5; } }
@keyframes fadeout { from { opacity: 1; } to { opacity: 0; } }

/* responsivity */

@media only screen and (max-width: 1220px) {
.content p, .content ul, .content ol { max-width: 600px }
.wp-block-image { max-width: 600px; }
.wp-element-caption { font-size: 14px; }
.font1, body { font-size: 18px; letter-spacing: -0.2px; }
.wp-block-embed.is-type-video iframe { height: 21rem; }
.wp-block-embed.is-type-video, .wp-block-video { max-width: 600px }
}

@media only screen and (max-width: 980px) {
.font1, body { font-size: 16px; letter-spacing: -0.2px; }
.content p, .content ul, .content ol { max-width: 460px }
.wp-block-gallery .column { flex: 100%; max-width: 100%; }
.wp-block-image { width: 100%; max-width: 460px }
.wp-block-gallery .wp-element-caption { font-size: 12px; }
.wp-block-gallery .wp-block-image.lightbox .wp-element-caption { font-size: 1rem; }
.wp-block-embed.is-type-video iframe { height: 16rem; }
.wp-block-embed.is-type-video, .wp-block-video { max-width: 460px }
}

@media only screen and (max-height: 980px) {
.wp-block-gallery .wp-block-image.lightbox img { height: 75vh; transform: translate3d(-50%, -60%, 0px); }
}