@font-face {
    font-family: "Nacelle";
    src: url("fonts/Nacelle/Nacelle-Black.otf");
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: "Nacelle";
    src: url("fonts/Nacelle/Nacelle-Heavy.otf");
    font-weight: bolder;
    font-style: normal;
}
@font-face {
    font-family: "Nacelle";
    src: url("fonts/Nacelle/Nacelle-Bold.otf");
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: "Nacelle";
    src: url("fonts/Nacelle/Nacelle-SemiBold.otf");
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: "Nacelle";
    src: url("fonts/Nacelle/Nacelle-Regular.otf");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Nacelle";
    src: url("fonts/Nacelle/Nacelle-Light.otf");
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: "Nacelle";
    src: url("fonts/Nacelle/Nacelle-Thin.otf");
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: "Nacelle";
    src: url("fonts/Nacelle/Nacelle-UltraLight.otf");
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: "Nacelle";
    src: url("fonts/Nacelle/Nacelle-BlackItalic.otf");
    font-weight: 900;
    font-style: italic;
}
@font-face {
    font-family: "Nacelle";
    src: url("fonts/Nacelle/Nacelle-HeavyItalic.otf");
    font-weight: 800;
    font-style: italic;
}
@font-face {
    font-family: "Nacelle";
    src: url("fonts/Nacelle/Nacelle-BoldItalic.otf");
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: "Nacelle";
    src: url("fonts/Nacelle/Nacelle-SemiBoldItalic.otf");
    font-weight: 500;
    font-style: italic;
}
@font-face {
    font-family: "Nacelle";
    src: url("fonts/Nacelle/Nacelle-Italic.otf");
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: "Nacelle";
    src: url("fonts/Nacelle/Nacelle-LightItalic.otf");
    font-weight: 300;
    font-style: italic;
}
@font-face {
    font-family: "Nacelle";
    src: url("fonts/Nacelle/Nacelle-ThinItalic.otf");
    font-weight: 200;
    font-style: italic;
}
@font-face {
    font-family: "Nacelle";
    src: url("fonts/Nacelle/Nacelle-UltraLightItalic.otf");
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: "Playfair";
    src: url("fonts/PlayfairRomanVF.ttf");
    font-style: normal;
}

@font-face {
    font-family: "Playfair";
    src: url("fonts/PlayfairItalicVF.ttf");
    font-style: italic;
}

:root {
    --serif: Playfair, Cambria, "Times New Roman", serif;
    --sans: Nacelle, Poppins, "Open Sans", Helvetica, Arial, sans-serif;
    --color_red: #c42;
    --color_turq: #3db;
    --color_beige: #eda;
    --color_blue: #008;
    --color_dark: #111;

    --angle: 3deg;
    --padding: calc( tan(var(--angle)) * 100vmin * 2 );

    font-size: 16px;
}

body {
    margin: 0;
    background-color: white;
}

header {
    --white: white;

    position: relative;
    top: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: var(--white);
    padding: 2rem 2rem 1rem 2rem;
    margin: 0;
    z-index: 20;
    animation-duration: 200ms;
    transition-duration: 200ms;

    font-size: 16px; /* IMPORTANT! */
}

header.scroll {
    position: sticky;
    animation-name: header-appear;
}

@keyframes header-appear {
    from    {   transform: translateY(-100%)    }
    to      {   transform: translateY(0);   }
}

@keyframes header-disappear {
    from    {   transform: translateY(0)    }
    to      {   transform: translateY(-100%);   }
}

header.inverse {
    --white: #111;
    --color_dark: white;
    --color_beige: #008;
    --color_red: #3db;
}

header::before {
    content: '';
    position: absolute;
    background: var(--color_dark);
    height: calc( 100% + ( tan(var(--angle)) * 100vw ) );
    width: 100%;
    top: 0;
    left: 0;
    margin: 0;
    transition-duration: 200ms;

    transform-origin: top right;
    transform: skewY(var(--angle));
}

nav {
    position: relative;
    box-sizing: border-box;
    padding-left: 1rem;
    z-index: 0;
}

nav ul {
    font-family: var(--sans);
    font-size: 0.75em;
    font-weight: bolder;
    text-transform: uppercase;
    letter-spacing: 0.25em;
}

nav ul#main-nav {
    display: flex;
    flex-direction: row;
    gap: calc(1rem + 1em);
    position: relative;
    justify-content: end;
    list-style-type: none;
    margin: 0;
    padding: 0 0 0 0;
    width: auto;
    /* max-width: 50rem; */
    z-index: 3;
}

nav ul#main-nav li {
    display: inline-block;
    margin-top: 0;
}
/* 
nav ul#main-nav li:has(#nav-highlight) {
    z-index: 1;
} */

nav ul#main-nav li:nth-child(1) {grid-area: "gallery";}
nav ul#main-nav li:nth-child(2) {grid-area: "projects";}
nav ul#main-nav li:nth-child(3) {grid-area: "cv";}
nav ul#main-nav li:nth-child(4) {grid-area: "who";}
nav ul#main-nav li:nth-child(5) {grid-area: "contact-cta";}
nav ul#main-nav li:nth-child(6) {grid-area: "contact-list";}

nav ul li a {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    text-decoration: none;
    color: var(--white);
    text-align: start;
    /* padding: 0 0.5rem; */
    transition-duration: 200ms;
}

nav ul:is(#main-nav, #lang-nav) li a::before {
    content: "";
    position: absolute;
    inset: 0.65em -0.5em -0.35em -0.5em;
    background-color: var(--color_red);
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    rotate: var(--angle);
    transition-duration: 200ms;
    z-index: -1;
}

nav ul:is(#main-nav, #lang-nav) li a:is(:hover, :focus, :active)::before {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

nav ul#main-nav li a#nav-highlight {
    margin: 0 0.75em;
}

nav ul#main-nav li:is(:has(#nav-highlight), :last-of-type) a::before {
    inset: -0.5em -1.5em;
}

nav ul#main-nav li:is(:has(#nav-highlight), :last-of-type) a::after {
    content: "";
    position: absolute;
    inset: -1em;
    border: solid var(--white) 2px;
    /* border-radius: calc( ( 2em + 0.75em ) / 2); */
    transition-duration: 200ms;
}

nav ul#main-nav li#nav-hidden {
    display: none;
}

nav ul#main-nav li:last-of-type {
    display: none;
    position: relative;
    margin-right: 0;
    z-index: 1;
}

nav ul#main-nav li:last-of-type a {
    position: relative;
    text-transform: none;
    
    margin: 0 2em 0 0.75em;
}

nav ul#main-nav li a span { 
    display: block;
    position: relative;
    margin-right: 2ch !important;
}

nav ul#main-nav li a span::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: -2ch;
    background: var(--white);
    width: 1ch;
    height: 1ch;
    /* margin-left: 1ch; */
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transition-duration: 300ms;
}

nav ul#main-nav li:last-of-type a:is(:hover, :focus, :active) span::after {
    transform: translateY(0.25em);
}

nav ul#hamburger-nav {
    pointer-events: none;

    position: absolute;
    box-sizing: border-box;
    top: calc(100% - 2rem);
    right: 0;
    max-width: 100%;
    background: var(--color_dark);
    margin: -3em 0 0 0;
    padding: 4em 1em 1em 1em;
    list-style: none;
    text-align: center;

    transition: 200ms, clip-path 200ms ease-in-out, opacity 100ms linear;
    transform-origin: top right;
    transform: rotate(var(--angle));
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);

    z-index: 2;
}

nav:has(
    ul#main-nav li:last-of-type a:is(:hover, :focus, :focus-visible, :active)
) ul#hamburger-nav,
ul#hamburger-nav:is(
    :hover,
    :focus,
    :focus-within,
    :target
) {
    pointer-events: auto;
    clip-path: polygon(0 calc(0% + 3em), 100% 0, 100% 100%, 0 100%);
}

nav ul#hamburger-nav li {
    box-sizing: border-box;
    transition-duration: 200ms;
}

nav ul#hamburger-nav li a {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 0.75em;
    transform: rotate( calc( 0deg - var(--angle) ) );
}

nav ul#hamburger-nav li a:is(:hover, :focus) {
    color: var(--color_dark);
}

nav ul#hamburger-nav li:has(a:hover, a:focus) {
    background: var(--white);
}

nav ul#lang-nav {
    position: absolute;
    top: calc(100% - 1vh);
    right: 0;
    list-style: none;
    padding: 0;
    text-transform: none;
    transform-origin: top right;
    rotate: var(--angle);

    z-index: 1;
}

nav ul#lang-nav li a::before {
    rotate: calc(0deg - var(--angle));
}

nav ul#lang-nav li {
    display: inline-block;
    margin-left: 1em;
}

#header-logo {
    /* flex-basis: content; */
    /* flex-grow: 1; */
    display: flex;
    flex-direction: row;
    transform-origin: left;
    transform: translateY(-1em);
    text-decoration: none;
}

#header-logo svg {
    display: inline-block;
    height: 4em;
    width: auto;
    margin-bottom: -0.5em;
    margin-right: 0.75em;
    transform: scale(1.2);
    fill: none;
}

#header-logo svg #LOGO_path {
    fill: var(--color_beige);
    transition-duration: 200ms;
}

#header-logo:is(:hover, :focus) svg #LOGO_path {
    fill: var(--white);
}

h1, h2, h3, h4 {
    font-family: var(--serif);
    line-height: 0.75;
}

h1 {
    display: inline-block;
    align-self: flex-end;
    font-size: 3em;
    font-weight: normal;
    font-stretch: semi-condensed;
    color: var(--color_beige);
    margin: 0;
    transition-duration: 200ms;
}

#header-logo:is(:hover, :focus) h1 {
    color: var(--white);
}

h2 {
    font-size: 10rem;
}

h3 {
    font-size: 4rem;
}

h4 {
    font-size: 3rem;
}

p {
    font-family: var(--sans);
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: 0.1rem;
    line-height: 1.5;
    max-width: 60ch;
}

section {
    max-width: 100%;
    padding: var(--padding) 5rem;
}

section:not(#welcome) a:not(:has(img)) {
    color: inherit;
    text-decoration: solid underline var(--color_red) 15%;
}

section:not(#welcome) a:not(:has(img)):visited {
    text-decoration-color: var(--color_turq);
}

section:not(#welcome) a:not(:has(img)):is(:hover, :focus) {
    text-decoration-color: var(--color_beige);
}

/* ----- WELCOME ----- */

#welcome {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: "first first first portrait portrait";
    /* grid-template-areas: 
    "first first first . ."
    "first first first portrait portrait"
    "first first first portrait portrait"
    "first first first portrait portrait"
    "first first first portrait portrait"; */
    gap: 0;
    position: relative;
    min-height: min(60vh, 600px);
    max-height: max(80vh, 800px);
    padding: var(--padding) 2rem 3rem var(--padding);
    margin-top: -1px;
    margin-bottom: calc(0px - var(--padding));
    overflow-y: hidden;
    color: white;
    background:
        /* linear-gradient(calc( 90deg + var(--angle) ),
        var(--color_beige) 2rem,
        transparent 2rem 2.5rem,
        var(--color_beige) 2.5rem 2.75rem,
        transparent 2.75rem 3.25rem,
        var(--color_beige) 3.25rem 3.5rem,
        transparent 3.5rem), */
        linear-gradient(calc( 90deg + var(--angle) ),
        var(--color_dark) 3.5rem,
        transparent 3.5rem),

/*         radial-gradient(40rem 32rem at 16rem 10rem,
        var(--color_blue) 50%,
        transparent), */

        radial-gradient(circle 55rem at 20rem 5rem,
        var(--color_blue) 50%,
        transparent 50%),
        
        /* linear-gradient(calc( 90deg + var(--angle) ),
        #b22, var(--color_red),
        var(--color_red)) */
        
        var(--color_red);
    z-index: 8;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc( 100% - 100vw * tan(var(--angle)) ) );
    overflow-x: hidden;
}

#welcome::before {
    content: "";
    position: absolute;
    inset: calc( 100% - 4rem - 100vw * tan(var(--angle)) + 1px ) calc( 100% - 4rem ) calc( 100vw * tan(var(--angle)) - 1px ) 0;
    background: white;
    transform-origin: top left;
    transform: rotate( var(--angle) );
    z-index: -1;
}

#welcome * {
    box-sizing: border-box;
}

#welcome-first {
    grid-area: first;
    z-index: 7;
    padding: 0 2rem 1rem 0;
    transform: rotate(var(--angle));
    align-items: start;
}

#welcome-first h2 {
    font-size: 5rem;
    color: white;
    line-height: normal;
    max-width: min(40ch, 80vw);
    margin: 0 2rem 1.5rem 0;
    font-optical-sizing: 100;
}

:lang(jp) #welcome-first h2 {
    font-size: 3rem;
}

#welcome-first h2 em {
    display: inline-block;
    position: relative;
    font-style: normal;
    color: var(--color_dark);
    margin: auto 1.5rem;
}

#welcome-first h2 em::before {
    content: "";
    display: block;
    position: absolute;
    --inset-top: 5rem;
    inset: calc( var(--inset-top) * -1 ) -1rem -0.5rem -1rem;
    /* background: linear-gradient(#eda, white); */
    background: linear-gradient(var(--color_beige) 0 2rem,
    transparent 2rem var(--inset-top),
    white var(--inset-top)),
    radial-gradient(circle 0.8rem at 0.4rem 0.4rem,
    var(--color_beige) 0 0.2rem,
    white 0.2rem) 0.4rem var(--inset-top)/1rem 1rem;
    border-radius: 0 0 1rem 1rem;
/*     mask-image: linear-gradient( black, white, white);
    mask-mode: luminance; */
    z-index: -1;
}

:lang(jp) #welcome-first h2 em::before {
    top: -8rem;
}

#welcome-first p {
    position: relative;
    font-size: 2rem;
    font-weight: 200;
    letter-spacing: 0.05rem;
    max-width: min(60ch, 60vw);
    margin-bottom: 0;
    text-shadow: 1px 2px 2px rgb(0, 0, 15);
}

:lang(jp) #welcome-first p {
    font-size: 1.5rem;
    line-height: 2;
}

#welcome-first p em {
    display: inline-block;
    /* font-style: normal; */
    font-weight: 300;
}

:lang(jp) #welcome-first p em {
    font-style: normal;
    text-emphasis: filled;
    text-emphasis-position: under right;
}

#welcome p::before {
    content: '';
    position: absolute;
    inset: -1rem -1rem -1rem 25%;
    background: var(--color_blue);
    /* background: linear-gradient(to right,
    var(--color_blue) 0 calc(100% - 5rem),
    transparent calc(100% - 5rem)),
    repeating-linear-gradient(transparent 0 5%,
    var(--color_blue) 5% 10%); */

    z-index: -1;
}

#welcome p::after {
    content: '';
    position: absolute;
    top: calc(100%);
    right: -1rem;
    width: 5rem;
    height: 5rem;
    background: repeating-linear-gradient(to right,
    transparent 0 5%,
    var(--color_blue) 5% 10%);
    border-bottom-left-radius: 100%;
}

#welcome-first a {
    display: inline-block;
    position: relative;
    font-style: normal;
    text-decoration: none;
    font-family: var(--sans);
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: bolder;
    letter-spacing: 0.25rem;
    color: white;
    padding: 1.5rem 1.5rem 1rem;
    /* background-color: var(--color_turq);
    box-shadow: inset -0.5rem -1rem 2rem #39a;
    border-radius: 2px 2.25rem 2px 2px; */
    border: solid white 0.2rem;
    /* text-shadow: 0 0 0 white; */
    margin-top: 2rem;
    margin-bottom: 2.5rem;
    transition-duration: 300ms;
}

#welcome-first a:is(:hover, :focus) {
    color: var(--color_blue);
    border-color: var(--color_blue);
}

#welcome-first a::before {
    content: "";
    position: absolute;
    inset: 0.25rem -1rem;
    background: var(--color_turq);
    rotate: var(--angle);
    transition-duration: 300ms;
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);

    z-index: -1;
}

#welcome-first a:is(:hover, :focus)::before {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* #welcome-first a:hover, :focus {
    background-color: white;
    box-shadow: none;
    color: var(--color_blue);
    mix-blend-mode: screen;
    padding-top: 3rem;
    margin-bottom: 0;
} */

#welcome aside {
    display: flex;
    align-items: end;
    grid-area: portrait;
    z-index: 6;
    max-height: calc(75vh - 2rem);
    margin: 0;
    margin-top: calc(-2rem + 2vw);
}
#welcome aside figure {
    position: relative;
    height: 100%;
    width: 50%;
    margin: 0;
    align-items: center;
    text-align: center;
}

#welcome aside figure svg {
    position: absolute;
    right: calc(-100% + 5vw - 4rem);
    height: 100%;
    width: auto;
}

/* ----- GALLERY ----- */

#gallery {
    position: relative;
    overflow-x: hidden;
}

#gallery::before {
    content: "";
    position: absolute;
    inset: calc( var(--padding) - 1px ) 0 calc( 100% - var(--padding) - 8rem ) calc( 100% - 8rem );
    background: conic-gradient(
        var(--color_red) 0deg 90deg,
        transparent 90deg 180deg,
        var(--color_blue) 180deg 270deg,
        transparent 270deg);
    transform-origin: bottom right;
    transform: rotate( var(--angle) );
    z-index: 9;
}

:lang(jp) #gallery h2 {
    letter-spacing: -0.25em;
}

#gallery h2 span {
    position: relative;
    margin-left: 2rem;
}

#gallery h2 span::before {
    content: '';
    position: absolute;
    /* inset: 5.8rem 3.25rem 0 -2rem; */
    inset: 0.5em 1.25em 0 -0.2em;
    rotate: var(--angle);
    backdrop-filter: invert(1);
}

#gallery h2 span::after {
    content: '';
    position: absolute;
    inset: -4rem;
    background-color: var(--color_blue);
    mix-blend-mode: screen;
}

#gallery details {
    box-sizing: border-box;
    /* border-radius: 0 1.5rem 1.5rem 1.5rem; */
    margin-bottom: 1rem;
    /* box-shadow: inset 0 0 0 2px var(--color_turq); */
    /* transform-origin: top left;
    rotate: var(--angle); */
}

#gallery details summary {
    display: block;
    position: relative;
    isolation: isolate;
    font-family: var(--sans);
    font-size: 2rem;
    text-transform: uppercase;
    color: black;
    padding: 0.5rem 1.5rem 0.5rem 0.75rem;
    /* border-left: solid 2px var(--color_blue); */
    border-bottom: solid 2px var(--color_blue);
    background: white;
    transition-duration: 500ms;
    cursor: pointer;
    overflow: hidden;
}

#gallery details summary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color_blue);
    mix-blend-mode: screen;
    z-index: 3;
}

#gallery details summary span {
    display: inline-flex;
    position: relative;
    transition-duration: inherit;
    padding-left: 3rem;
}

#gallery details summary span::before {
    content: '';
    display: inline-flex;
    align-self: center;
    position: relative;
    height: 1.333ex;
    width: 1ex;
    background-color: white;
    margin-right: 2.5rem;
    margin-left: -2.5rem;
    /* margin-bottom: -0.2rem; */
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    transition-duration: inherit;
    z-index: 2;

}

#gallery details summary span::after {
    content: '';
    position: absolute;
    inset: -0.5rem -1rem -2rem -7rem;
    transition-duration: inherit;
    rotate: var(--angle);
    transform: translate( calc(-100% + 9rem), 0.4rem );
    backdrop-filter: invert(1);
}

#gallery details[open] summary span::before,
#gallery details summary:is(:hover, :focus) span::before {
    margin-right: 1rem;
    scale: 1.2;
}

#gallery details:not([open]) summary:is(:hover, :focus) span::before {
    rotate: 90deg;
}

#gallery details[open] summary span::before {
    rotate: -90deg;
}

#gallery details[open] summary:is(:hover, :focus) span::before {
    margin-right: 1.75rem;
}

#gallery details[open] summary span::after,
#gallery details summary:is(:hover, :focus) span::after {
    transform: translate(0, -0.25rem);
}

#gallery details ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1rem;
    margin: 0;
    padding: 3rem 3rem 4rem 2rem;
    border-right: solid 2px var(--color_blue);
    border-bottom: solid 2px var(--color_blue);
    /* border-bottom-right-radius: 5rem; */
    /* background: linear-gradient(calc(225deg + var(--angle)),
    var(--color_blue) 0 2rem,
    transparent 2rem); */
}

#gallery details ul li {
    display: inline-block;
    position: relative;
    list-style: none;
    margin: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    justify-self: center;
    rotate: var(--angle);
    transition-duration: 250ms;
}

#gallery details ul li::after {
    content: '';
    position: absolute;
    inset: -0.1rem;
    pointer-events: none;
    background: linear-gradient(0deg,
        white 0 2rem,
        transparent 2rem),
        linear-gradient(90deg,
        white 0 2rem,
        transparent 2rem),
        linear-gradient(180deg,
        white 0 2rem,
        transparent 2rem),
        linear-gradient(270deg,
        white 0 2rem,
        transparent 2rem);
}

#gallery details ul li a {
    position: absolute;
    top: 0;
    text-decoration: none;
    padding: 0.5rem;
    background: white;
    cursor: pointer;
    /* z-index: 1; */
}

#gallery details ul li a::before {
    content: '';
    /* display: block; */
    position: absolute;
    inset: 1px -0.25rem -0.5rem 1px;
    background: var(--color_blue);
    z-index: -1;
    opacity: 0.9;
}

#gallery details ul li a img {
    width: 100%;
    height: auto;
    rotate: calc( 0deg - var(--angle) );
}

#gallery details[open] ul li {
    --delay: 0ms;
    animation: card-anim 500ms ease-out var(--delay) 1 backwards;
}

#gallery details[open] ul li[data-i='0'] { --delay: 0ms; }
#gallery details[open] ul li[data-i='1'] { --delay: 100ms; }
#gallery details[open] ul li[data-i='2'] { --delay: 200ms; }
#gallery details[open] ul li[data-i='3'] { --delay: 300ms; }
#gallery details[open] ul li[data-i='4'] { --delay: 400ms; }
#gallery details[open] ul li[data-i='5'] { --delay: 500ms; }
#gallery details[open] ul li[data-i='6'] { --delay: 600ms; }
#gallery details[open] ul li[data-i='7'] { --delay: 700ms; }

@keyframes card-anim {
    from {transform: translateY(-1rem) rotate(var(--angle)); opacity: 0;}
    to {transform: translateY(0) rotate(0deg); opacity: 1;}
}

#gallery details ul li:has(a:is(:hover, :focus)) {
    transform: scale(1.05) translateY(-1rem);
}

#lightbox {
    position: fixed;
    width: calc(100vw - (100vw - 100%));
    height: calc(100vh - (100vh - 100%));
    top: 0;
    left: 0;
    background-color: #00000033;
    backdrop-filter: blur(5px);
    z-index: 100;
}

#lightbox > img {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 90vmin;
    width: 90vmin;
    object-fit: scale-down;
    transform: translate(-50%, -50%);
}

#lightbox > button {
    position: absolute;
    height: 5rem;
    width: 3rem;
    top: calc(50% - 2.5rem);
    border: none;
    background: white;
    opacity: 75%;
    transition-duration: 250ms;
}

#lightbox > button:is(:hover, :focus) {
    opacity: 100%;
}

button#previous {
    left: 1rem;
    clip-path: polygon(100% 0, 100% 100%, 0 50%);
}

button#next {
    right: 1rem;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* ----- PROJECTS ----- */

#projects {
    position: relative;
    padding-bottom: var(--padding);
    margin-bottom: calc(0px - var(--padding));
    background: linear-gradient(calc(90deg + var(--angle)), white 0 3rem, transparent 3rem),
    var(--color_beige);
    clip-path: polygon(0 0, 100% calc( 100vw * tan(var(--angle)) ), 100% 100%, 0 calc( 100% - 100vw * tan(var(--angle)) ) );

    z-index: 7;
}

:lang(jp) #projects h2 {
    letter-spacing: -0.25em;
}

#projects h2 span {
    position: relative;
}

#projects h2 span::before {
    content: "";
    position: absolute;
    inset: -1.5rem -2rem -0.5rem -5rem;
    background: white;
    transform-origin: left;
    rotate: var(--angle);

    z-index: -1;
}

:lang(jp) #projects h2 span::before {
    transform: translateY(-1.5rem);
}

#projects details {
    margin-bottom: 1.5rem;
}

#projects details summary {
    display: block;
    position: relative;
    overflow: hidden;
    font-family: var(--sans);
    font-size: 2rem;
    color: var(--color_dark);
    letter-spacing: 0.2rem;
/*     border-bottom: solid var(--color_dark) 2px;
    border-left: solid var(--color_dark) 2px; */
    padding: 1.5rem 0 1.5rem 1.5rem;
    transition-duration: 500ms;
    background: radial-gradient(circle at bottom left, var(--color_dark) 0 4.25rem,
    transparent 4.25rem 200%),
    linear-gradient(calc(90deg + var(--angle)), var(--color_red) 0 15rem,
    transparent 15rem 200%),
     white;
     background-repeat: no-repeat;
     background-position-x: -1rem, -11rem, 0;
     background-position-y: 2rem, 0, 0;
}

#projects details[open] summary,
#projects details summary:is(:hover, :focus, :active) {
    /* letter-spacing: 0.3rem; */
    background-position-x: 0;
    background-position-y: 0;
}

#projects details summary::after {
    content: attr(data-year);
    position: absolute;
    top: 0.55rem;
    right: 0;
    bottom: 0.55rem;
    color: var(--color_red);
    font-size: 5rem;
    font-weight: 900;
    letter-spacing: -0.1rem;
    transform-origin: center center;
    --y: 0;
    transform: translate(0.75rem, var(--y)) rotate(var(--angle));
}

:lang(jp) #projects details summary::after {
    content: attr(data-year) "年";
    font-size: 4rem;
    --y: -0.75rem;
}

#projects details summary span {
    position: relative;
    transition-duration: inherit;
    z-index: 1;

    --arrow_margin: 2rem;
    --arrow_scale: 1;
}

#projects details summary span::before {
    content: '';
    display: inline-block;
    position: relative;
    background-color: white;
    width: 1.333ex;
    height: 1.6667ex;
    margin-right: var(--arrow_margin);
    margin-bottom: -0.5rem;
    scale: var(--arrow_scale);
    transition-duration: inherit;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

#projects details[open] summary span,
#projects details summary:is(:hover, :focus, :active) span {
    --arrow_margin: 5rem;
    --arrow_scale: 1.25;
}

#projects details[open] summary span::before {
    rotate: -90deg;
}

#projects details:not([open]) summary:is(:hover, :focus, :active) span::before {
    rotate: 90deg;
}

#projects details[open] summary:is(:hover, :focus, :active) span {
    --arrow_margin: 7rem;
}

#projects details summary span::after {
    content: "";
    position: absolute;
    inset: -0.75rem;
    left: calc( 1.333ex + var(--arrow_margin) - 1rem );
    background: white;
    rotate: var(--angle);
    transition-duration: inherit;

    z-index: -1;
}

#projects details summary span:has(> ruby)::after {
    top: -1.75rem;
}

/* #projects details[open] summary span::after,
#projects details summary:is(:hover, :focus, :active) span::after {
    left: calc( 1ex + 1.5rem + 3rem );
}

#projects details[open] summary:is(:hover, :focus, :active) span::after {
    left: calc( 1ex + 1.5rem + 5rem );
} */

#projects details article {
    display: flex;
    flex-direction: row-reverse;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.5rem 1.5rem;
    margin-top: 0 !important;
    background: radial-gradient(circle at top right, white 0 4rem,
    transparent 4rem),
    var(--color_dark);
    color: white;
    box-sizing: content-box;
    /* transition: clip-path 500ms ease-out; */
}

#projects details[open] article {
    /* clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); */
    animation: pr-open 200ms ease-out backwards;
}

@keyframes pr-open {
    from {
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }
    to {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

#projects details article p:first-of-type {
    padding-top: 1.5rem;
}

#projects details article aside {
    position: relative;
    display: block;
    width: calc( 100% / 3 - 1rem);
    max-height: 100%;
    margin: 5rem 0 1rem 1rem;
}

#projects details article aside a {
    display: block;
    max-height: 100%;
}

#projects details article aside:has(a > img) {
    max-height: 450px;
}

#projects details article aside a > img {
    display: block;
    max-height: 450px !important;
    max-width: 100% !important;
    object-fit: contain;
}

#projects details article aside:has(iframe) {
    position: relative;
    overflow: hidden;
    width: 100%;
}

#projects details article aside:has(iframe)::after {
    display: block;
    content: "";
    padding-top: 56.25%;
}

#projects details article aside > iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ----- CV ----- */

#cv {
    position: relative;
    margin-bottom: calc( 0px - var(--padding) );
    background: var(--color_dark);
    color: white;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 3rem));
    overflow-x: hidden;

    z-index: 5;
}

#cv > svg {
    position: absolute;
    top: calc( var(--padding) - 1px);
    right: 0;
    width: clamp(200px, calc( 100vw / 3 ), 25rem);
    height: auto;
    transform-origin: bottom right;
    transform: translateY(-1px) rotate(var(--angle));
}

#cv > svg .FILL {
    fill: var(--color_beige);
}

#cv :is(h2, h3, h4) {
    color: var(--color_beige);
}

#cv h2 span {
    position: relative;
    text-shadow: 0 1px var(--color_dark), 0 2px var(--color_dark), 0 3px var(--color_dark);
}

#cv h2 span::before {
    content: '';
    position: absolute;
    inset: 0.65em -0.5em 0 -5rem;
    background: linear-gradient(calc(270deg + var(--angle)),
    transparent 0 1rem,
    var(--color_red) 1rem 1.5rem,
    transparent 1.5rem 2rem,
    var(--color_red) 2rem);
    z-index: -1;
}

#cv div article {
    display: grid;
    position: relative;
    grid-template-columns: 1fr;
    gap: 2rem;
    border: solid var(--color_beige);
    border-width: 0 0 2px 2px;
    padding: 0 0 1rem 2rem;
    margin-bottom: 2rem;
    /* clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); */
}

#cv div article::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 2rem;
    height: 2rem;
    background-color: var(--color_beige);
    border-radius: 0 100% 0 0;
}

#cv div article :is(h3, h4) {
    margin: 0 0 1rem 0;
}

#cv div article h3 {
    font-size: 6rem;
    color: var(--color_dark);
    margin: 0 1rem 2rem 0;
    padding: 1rem 2.5rem 1rem 0;
    transform-origin: top left;
    /* rotate: var(--angle); */

    z-index: 1;
}

#cv div article h3 span {
    position: relative;
    inline-size: fit-content;
    display: inline-block;
}

#cv div article h3 span::before {
    content: '';
    position: absolute;
/*     top: -2rem;
    left: -3rem;
    height: calc(100% + 3rem);
    width: calc(100% + 8rem); */
    inset: -1rem -5rem -1rem -2rem;
    background: linear-gradient(calc(270deg + var(--angle)),
    var(--color_dark) 0 2.5rem,
    transparent 2.5rem 3rem,
    var(--color_dark) 3rem 3.5rem,
    transparent 3.5rem),
    var(--color_beige);

    z-index: -1;
}

#cv div article > ul:not(.row-listing) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0;
    padding: 0;
    gap: 2rem 4rem;

    z-index: 2;
}

#cv div article > ul:not(.row-listing) > li {
    display: block;
    position: relative;
    list-style-type: none;
    /* padding: 0 1rem 1rem 1rem; */
    /* box-shadow: 2px 3px 2px 0 black; */
}

/* #cv div article:not(:last-of-type) > ul > li:not(:first-of-type) {
    margin-top: 1rem;
} */

/* #cv div article:not(:last-of-type) > ul:not(.row-listing) > li:not(:last-of-type)::before {
    content: "";
    position: absolute;
    right: 0;
    top: 100%;
    width: calc(200% + 4rem);
    height: 2px;
    background: var(--color_red);
}

#cv div article:not(:last-of-type) > ul:not(.row-listing) > li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: calc(-100% - 4rem);
    top: 100%;
    height: 1rem;
    width: 2rem;
    background: var(--color_red);
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
} */

#cv div article:not(:last-of-type) > ul > li:nth-child(odd):not(:last-of-type)::before,
#cv div article:not(:last-of-type) > ul > li:nth-child(odd):not(:last-of-type)::after {
    display: none;
}

#cv div article > ul > li p {
    margin-top: 0;
    max-width: 60ch;
}

#cv div article > ul > li > ul {
    padding-left: 2ch;
    list-style-type: disc;
}

#cv div article ul.row-listing {
    display: flex;
    flex-flow: row wrap;
    gap: 1rem 3rem;
    padding: 0 0 1.5rem 0;
}

#cv div article ul.row-listing > li {
    display: block;
    white-space: nowrap;
    font-family: var(--sans);
    font-size: 1.5rem;
    line-height: 1.5;
}

#cv div article:last-of-type > ul {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

#cv div article:last-of-type > ul > li {
    font-family: var(--sans);
    font-size: 1.5rem;
    line-height: 1.5;
}

/* ----- WHO'S MAISA ----- */

#who {
    position: relative;
    background: conic-gradient(from var(--angle), transparent 0deg 270deg, var(--color_beige) 270deg),
    linear-gradient(var(--angle), white 25%, var(--color_turq) 25%);
    /* clip-path: polygon(0 0, 100% 3rem, 100% 100%, 0 100%); */
    z-index: 4;
}

#who h2 { 
    --who_h2: 10rem;
}

#who h2 > span {
    position: relative;
}

#who h2 > span::after {
    content: '';
    position: absolute;
    inset: -2rem -2rem 0 -2rem;
    background: linear-gradient(
        to right,
        var(--color_beige) 0 15vmin,
        white 15vmin calc(15vmin + var(--who_h2) + 4rem),
        var(--color_beige) calc(15vmin + var(--who_h2) + 4rem));
    transform: rotate(var(--angle));
    z-index: -1;
}

#who figure {
    position: relative;
    width: clamp(10rem, 33.333%, 1024px);
    float: right;
    margin: -3rem 1rem 3rem 3rem;
    z-index: 6;
}

/* #who figure::after {
    content: '';
    position: absolute;
    inset: -4rem;
    background-color: var(--color_turq);
    transform: rotate(var(--angle));
    z-index: -7;
} */

#who figure img {
    width: 100%;
    height: auto;
    clip-path: url("#rosemask");
    /* box-shadow:
        2rem 1rem 0 0.5rem var(--color_red),
        -3rem -7rem 0 -5rem white; */
}

#who div {
    position: relative;
    z-index: 5;
}

#who div > p > span {
    background-color: var(--color_beige);
}

#who div::after {
    content: '';
    position: absolute;
    inset: -4rem 2rem -4rem -12rem;
    background-color: var(--color_beige);
    border-top-right-radius: calc( clamp(10rem, 100vw - 10rem, 1024px) * 2 );
    transform: rotate(var(--angle));
    z-index: -8;
}

/* ----- CONTACT ----- */

#contact {
    padding-top: 0;
}

#contact address {
    font-style: normal;
}

form {
    /* display: none; */
    position: relative;
    padding: 3rem;
    background: var(--color_red);
    font-family: var(--sans);
    color: white;
}

form::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color_blue);
    transform: rotate(var(--angle)) translate(0.75rem, 0.5rem);
    z-index: -1;
}

form > * {
    display: block;
}

form > div {
    margin: 0.5rem 0 1rem 0;
}

form > div > div {
    display: inline-block;
}

form > div input {
    width: 0px;
    margin: 0;
    padding: 0;
}

form > div label {
    display: inline-block;
    font-size: 1.25rem;
    background: var(--color_red);
    padding: 1rem;
    margin: 0 0.5rem 1rem 0;
    border: 2px solid white;
    border-radius: 2px;
    cursor: pointer;
    transition: 100ms;
    transform: translateX(-6.4px);
}

form > div #inquiry:checked ~ .label-1,
form > div #commission:checked ~ .label-2,
form > div #job:checked ~ .label-3,
form > div #collaboration:checked ~ .label-4,
form > div #other:checked ~ .label-5 {
    color: var(--color_red);
    background: white;
}

form > div label:hover, form > div label:focus,
form > div #inquiry:focus ~ .label-1,
form > div #commission:focus ~ .label-2,
form > div #job:focus ~ .label-3,
form > div #collaboration:focus ~ .label-4,
form > div #other:focus ~ .label-5 {
    box-shadow: 0 0 4px 2px rgba(255, 255, 255, 0.5);
}

form > label {
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.25rem;
}

form > label:nth-child(2) {
    margin-top: -1rem;
}

form > input, form > textarea {
    box-sizing: border-box;
    width: 100%;
    font-family: var(--sans);
    color: white;
    padding: 0.5rem;
    margin-bottom: 1rem;
    background: none;
    border: solid white;
    border-width: 0 0 2px 2px;
    transition-duration: 100ms;
}

form > textarea {
    resize: vertical;
}

form > textarea::-webkit-resizer {
    background-color: white;
}

form > textarea:focus::-webkit-resizer {
    background-color: var(--color_red);
}

form > input:focus, form > textarea:focus{
    background: white;
    border: none;
    color: var(--color_dark)
}

form > input::placeholder, form > textarea::placeholder {
    color: white;
}

form button {
    box-sizing: border-box;
    width: auto;
    font-family: var(--sans);
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.25rem;
    font-weight: bold;
    text-align: left;
    color: white;
    border: none;
    background: var(--color_turq);
    box-shadow: inset -0.5rem -1rem 2rem #39a;
    padding: 1.5rem 3rem 1rem 1.5rem;
    clip-path: polygon(0 0, calc(100% - 2rem) 0, 100% 50%, calc(100% - 2rem) 100%, 0 100%);
    transition-duration: 500ms;
}

form button:hover, form button:focus {
    background: white;
    box-shadow: none;
    color: var(--color_red);
    padding-left: 20rem;
}

/* ----- FOOTER ----- */

footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
    "logo nav"
    "p nav";
    gap: 1.5rem;
    /* display: flex; */
    background-color: var(--color_dark);
    color: white;
    padding: 6rem 3rem 3rem 3rem;
    clip-path: polygon(0 0, 100% 3rem, 100% 100%, 0 100%);
}

footer svg {
    fill: none;
    height: 10rem;
    width: auto;
    grid-area: logo;
    align-self: center;
}

footer svg #LOGO_path {
    fill: white;
}

footer nav {
    grid-area: nav;
    display: flex;
    flex-flow: row-reverse;
    align-items: end;
    gap: 2rem;
    padding: 0;
    font-size: 1.25rem;
}

footer nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

footer nav ul li a {
    padding: 0.5em;
}

footer nav ul:nth-of-type(2) li a {
    text-transform: none;
}

footer nav ul li a:is(:hover, :focus) {
    background: white;
    color: var(--color_dark);
}

footer p {
    grid-area: p;
    width: 100%;
    font-size: 1rem;
    margin: 0 0 0 2.5rem;
    /* justify-self: stretch; */
    /* align-self: flex-end; */
}

/* ---------- MEDIA QUERIES ---------- */

@media only screen and (max-width: 1090px) {
    :root {
        font-size: 14px;
    }

/*     #welcome-first {
        margin-top: -2rem;
    }  */

    #gallery details ul {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media only screen and (max-width: 970px) {
/*     nav ul#main-nav {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-areas:
        "contact-cta more";
    } */

    nav ul#main-nav li:not(#nav-hidden, :last-of-type) {
        display: none;
    }

    nav ul#main-nav li:is(#nav-hidden, :last-of-type) {
        display: inline-block;
    }

    #welcome {
        grid-template-columns: 1fr;
        /* grid-template-rows: 1fr 1fr; */
        grid-template-areas:
        "first"
        "portrait"
    }

    #welcome aside {
        height: clamp(400px, 45vh, 600px);
        /* max-height: 45vh; */
        align-items: end;
        margin-left: 5vh;
    }

    #welcome aside figure {
        height: calc( 100% + 5vw);
    }

    #welcome aside figure svg {
        float: right;
    }

    #who h2 {
        --who_h2: 8rem;
        font-size: var(--who_h2);
    }
}

@media only screen and (max-width: 800px) {
/*     :root {
        font-size: 12px;
    } */

/*     header {
        font-size: 14px;
    } */

    section {
        padding: 5rem 3rem;
    }

    #welcome-first h2 {
        font-size: 4rem;
    }

    #gallery details ul {
        grid-template-columns: 1fr 1fr;
    }

    #projects details article {
        flex-direction: column;
    }

    #projects details article aside {
        max-height: 300px;
        width: calc( 100% - 4rem);
        margin: 4rem 2rem 1rem;
    }

    #cv div article > ul {
        grid-template-columns: 1fr;
    }

    #cv div article:not(:last-of-type) > ul > li:nth-child(odd):not(:last-of-type)::before,
    #cv div article:not(:last-of-type) > ul > li:nth-child(odd):not(:last-of-type)::after {
        display: block;
    }

    #cv div article:not(:last-of-type) > ul > li:not(:last-of-type)::before {
        width: 100% !important;
    }
    
    #cv div article:not(:last-of-type) > ul > li:not(:last-of-type)::after {
        left: 0 !important;
    }

    #who figure {
        /* display: block; */
        width: 100%;
        margin-left: 0;
        float: none;
        text-align: center;
    }

    #who figure img {
        width: clamp(10rem, 40%, 1024px);
    }

    #contact form > div {
        display: grid;
        grid-template-columns: max-content max-content;
    }

    /* footer {
        grid-template-columns: 1fr 1fr 2fr;
    } */
}

@media only screen and (max-width: 601px) {
    :root {
        font-size: 10px;
    }

    h2:not(#welcome h2) {
        font-size: 5rem;
    }

    h3 span{
        font-size: 3rem;
    }
    
    :lang(fi) h2:not(#welcome h2, #gallery h2) span, :lang(fi) h3 span {
        letter-spacing: -0.025em;
    }

    :lang(jp) h2:not(#welcome h2, #gallery h2) span, :lang(jp) h3 span {
        letter-spacing: -0.1em;
    }

/*     nav {
        font-size: 12px;
    } */

/*     :lang(fi) nav {
        font-size: 11px;
    } */

    :lang(fi) nav ul {
        letter-spacing: 0;
    }

    :lang(fi) h1 {
        font-size: 2.5em;
    }

    #header-logo svg {
        margin-top: -1em;
    }

    #welcome ~ section p {
        font-size: 2rem;
    }

    #cv div article:not(:last-of-type) > ul:not(.row-listing) {
        grid-template-columns: 1fr;
    }

    #who h2 {
        --who_h2: 5rem;
    }

    form > label, form div label {
        font-size: 1.5rem;
    }

    footer {
        grid-template-columns: 1fr;
        grid-template-areas: 
        "logo"
        "nav"
        "p";
    }

    footer svg {
        justify-self: center;
        height: 20rem;
        margin-top: -3rem;
    }

    footer nav {
        justify-content: center;
        align-items: center;
        margin-bottom: 3rem;
        font-size: 1.5rem;
    }

    footer p {
        margin-left: 0;
        align-self: center;
        text-align: center;
        justify-self: center;
        font-size: 1.2rem;
    }
}

@media only screen and (max-width: 489px) {
    header {
        padding: 2rem 2rem 1rem 0;
    }

    nav {
        padding-left: 0.5rem;
    }
    
    nav a{
        letter-spacing: 1px;
    }

    :lang(fi) nav #nav-hidden {
        margin-left: 0.8em;
        margin-right: -0.8em;
    }

    #header-logo {
        transform: translateY(-0.75em);
    }

    #header-logo svg {
        height: 6.8em;
        margin-bottom: -1em;
        margin-right: 0;
        /* transform: scale(1.5); */
    }

    #header-logo h1 {
        width: 5ch;
    }


    #welcome-first p {
        max-width: min(60ch, 80vw);
    }
}

@media only screen and (max-width: 401px) {
    #header-logo {
        transform: translateY(-0.75em) scale(0.8);
    }

    nav {
        padding-left: 0;
        margin-left: -2em;
    }
}

@media only screen and (min-width: 385px) and (max-width: 401px) {
    :lang(fi) nav #nav-hidden {
        margin-left: 0.4em;
        margin-right: -0.4em;
    }
}

@media only screen and (max-height: 800px) {
    #welcome {
        padding-left: calc(var(--padding) + 1rem);
    }

    #welcome h2 {
        font-size: 3.5rem;
        letter-spacing: -0.1rem;
    }

    #welcome h2 em::before {
        --inset-top: 4rem;
    }

    #welcome-first p {
        font-size: 1.75rem;
        max-width: min(60ch, 80vw);
    }
}

@media only screen and (max-height: 400px) {
    #welcome h2 em::before {
        --inset-top: 3rem;
    }
}

@supports not selector(:has(a, b)) {

    body * {display: none;}

    body::before {
        pointer-events: all;
        display: absolute;
        margin: 20px 20px 20px 20px;
        font-family: sans-serif;
        font-size: 20px;
        color: black;
    }

    :lang(en) body::before {
        content: "Your browser is outdated. For example, Internet Explorer and 2023 versions of Firefox For Android do not support all features of the website. Please update your browser application or use a newer browser."
    }

    :lang(fi) body::before {
        content: "Käyttämänne selain on vanhentunut. Esimerkiksi Internet Explorer sekä vuoden 2023 Firefox For Android eivät tue kaikkia sivuston ominaisuuksia. Olkaa hyvä ja päivittäkää selainsovellus tai käyttäkää uudempaa selainta."
    }

    :lang(jp) body::before {
        content: "使われたブラウザーは非推奨です。例えば、「Internet Explorer」、「Firefox For Android」の２０２３年役のほうが、ウェッブサイトの機能の全てをサポートしないのです。ブラウザー・アプリをアップデートか、より新しいブラウザーをお使い下さい。"
    }
}