@charset "UTF-8";
/* --------------------------------
  color
-------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap");
/* --------------------------------
  reset
-------------------------------- */
html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
}

*, :after, :before {
  background-repeat: no-repeat;
  box-sizing: inherit;
}

:after, :before {
  text-decoration: inherit;
  vertical-align: inherit;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

hr {
  overflow: visible;
}

article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
  display: block;
}

summary {
  display: list-item;
}

small {
  font-size: 80%;
}

[hidden], template {
  display: none;
}

abbr[title] {
  border-bottom: 1px dotted;
  text-decoration: none;
}

a {
  color: inherit;
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

a:active, a:hover {
  outline-width: 0;
}

code, kbd, pre, samp {
  font-family: monospace, monospace;
}

b, strong {
  font-weight: bolder;
}

dfn {
  font-style: italic;
}

mark {
  background-color: #ff0;
  color: #000;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

input {
  border-radius: 0;
}

[role=button], [type=button], [type=reset], [type=submit], button {
  cursor: pointer;
}

[disabled] {
  cursor: default;
}

[type=number] {
  width: auto;
}

[type=search][type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

textarea {
  overflow: auto;
  resize: vertical;
}

button, input, optgroup, select, textarea {
  font: inherit;
}

optgroup {
  font-weight: 700;
}

button {
  overflow: visible;
}

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
  border-style: 0;
  padding: 0;
}

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button:-moz-focusring {
  outline: 1px dotted;
}

[type=reset], [type=submit], button, html [type=button] button, select {
  text-transform: none;
}

button, input, select, textarea {
  background-color: transparent;
  border-style: none;
  color: inherit;
}

select::-ms-expand {
  display: none;
}

select::-ms-value {
  color: currentColor;
}

legend {
  border: 0;
  color: inherit;
  display: table;
  max-width: 100%;
  white-space: normal;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

[type=search] img {
  border-style: none;
  vertical-align: bottom;
}

progress {
  vertical-align: baseline;
}

svg:not(:root) {
  overflow: hidden;
}

audio, canvas, progress, video {
  display: inline-block;
}

@media screen {
  [hidden~=screen] {
    display: inherit;
  }
  [hidden~=screen]:not(:active):not(:focus):not(:target) {
    position: absolute !important;
    clip: rect(0 0 0 0) !important;
  }
}
[aria-busy=true] {
  cursor: progress;
}

[aria-controls] {
  cursor: pointer;
}

[aria-disabled] {
  cursor: default;
}

::-moz-selection {
  background-color: #b3d4fc;
  color: #000;
  text-shadow: none;
}

::selection {
  background-color: #b3d4fc;
  color: #000;
  text-shadow: none;
}

ul, ol {
  list-style: none;
}

a {
  text-decoration: none;
}

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

body {
  font-size: 16px;
  line-height: 1;
  color: #333;
}

img, svg, embed, object, iframe {
  vertical-align: bottom;
  max-width: 100%;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

button, input, optgroup, select, textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  border-radius: 0;
  text-align: inherit;
}

/* --------------------------------
  font
-------------------------------- */
/* --------------------------------
  break point
-------------------------------- */
/* --------------------------------
  value
-------------------------------- */
/* --------------------------------
  mixin definition
-------------------------------- */
/* --------------------------------
  dark mode definition
-------------------------------- */
/* --------------------------------
  common setting - general
-------------------------------- */
html {
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-padding-top: 125px;
  font-size: 10px;
}
@media (max-width: 960px) {
  html {
    scroll-padding-top: 100px;
    font-size: 9px;
  }
}
@media (max-width: 720px) {
  html {
    scroll-padding-top: 120px;
    font-size: 8px;
  }
}
@media (max-width: 480px) {
  html {
    scroll-padding-top: 40px;
    font-size: 9px;
  }
}

body {
  position: relative;
  line-height: 1.8;
  font-family: "hiragino-kaku-gothic-pron", sans-serif;
  font-weight: normal;
  font-size: 1rem;
  color: #382f2a;
  background-color: #eeece8;
  transition: all 800ms 0ms ease;
}
body.dark-mode {
  color: #eeece8;
  background-color: #382f2a;
}
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  z-index: -3;
  width: 100%;
  height: 100vh;
  background-image: url(../img/bg_noise.png);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  mix-blend-mode: multiply;
  transform: scale(1, -1);
  opacity: 0.5;
}
@media (max-width: 480px) {
  body {
    line-height: 2.2;
  }
}

img {
  background-color: #ccc7c4;
}

.mont {
  font-family: "Montserrat", sans-serif;
}

.thick {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.thin {
  text-transform: uppercase;
  letter-spacing: -0.03em;
  font-weight: 300;
}

.descriptive {
  color: #645d58;
}
.descriptive:where(body.dark-mode *) {
  color: #b6b0ad;
}
@media (max-width: 480px) {
  #sec-message .descriptive, #sec-skills .descriptive {
    color: #a09996;
  }
}

.leading-link {
  transition: all 200ms 0ms ease;
}
.leading-link:hover {
  color: rgba(56, 47, 42, 0.7);
}

.inline-link {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  color: #5494de;
  transition: all 100ms 0ms ease;
}
.inline-link:hover {
  color: #80b6f3;
}
.inline-link:where(body.dark-mode *) {
  color: #6aa5e9;
}
.inline-link:where(body.dark-mode *):hover {
  color: #5085c3;
}

* ::-moz-selection {
  color: #eeece8;
  background-color: rgba(84, 148, 222, 0.5);
}

* ::selection {
  color: #eeece8;
  background-color: rgba(84, 148, 222, 0.5);
}

.inline-link::-moz-selection {
  color: rgba(56, 47, 42, 0.5);
}

.inline-link::selection {
  color: rgba(56, 47, 42, 0.5);
}
.inline-link::-moz-selection:where(body.dark-mode *) {
  color: #eeece8;
}
.inline-link::selection:where(body.dark-mode *) {
  color: #eeece8;
}

/* --------------------------------
  common setting - specific
-------------------------------- */
.container {
  margin: 0 48px;
}
.container > section {
  margin-block: 200px;
}
.container > section:where(body#top-page *), .container > section:where(body#err-page *) {
  display: grid;
  grid-template-columns: 120px 1fr;
  -moz-column-gap: 60px;
       column-gap: 60px;
}
.container > section .outer-num {
  grid-column: 1/2;
  position: sticky;
  top: 120px;
  z-index: 1;
  width: 120px;
  height: 106px;
  padding: 0;
}
.container > section .outer-num::before {
  content: attr(data-sec-num);
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 100vw;
  height: 100%;
  padding-bottom: 6px;
  line-height: 1;
  text-align: right;
  font-family: "Montserrat", sans-serif;
  font-size: 10em;
  font-weight: 400;
  color: #d3cecb;
  border-bottom: 3px solid #d3cecb;
}
.container > section .outer-num::before:where(body.dark-mode *) {
  color: #b6b0ad;
  border-color: #b6b0ad;
}
.container > section .outer-num::after {
  content: attr(data-sec-title);
  position: absolute;
  top: 104%;
  right: 0;
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  padding-right: 4px;
  text-align: right;
  font-family: "Montserrat", sans-serif;
  font-size: 3.4rem;
  font-weight: 600;
  color: #ccc7c4;
}
.container > section .outer-num::after:where(body.dark-mode *) {
  color: #b6b0ad;
}
.container > section .outer {
  grid-column: 2/3;
  margin: 0 40px;
}
.container > section .outer .sec-heading {
  margin-bottom: 20px;
  padding-bottom: 12px;
  line-height: 1.4;
  font-size: 2.5rem;
  font-weight: 700;
  border-bottom: 1px solid #ccc7c4;
}
.container > section:not(:where(body#top-page *)) .wrapper, .container > section:not(:where(body#err-page *)) .wrapper {
  font-size: 1.6rem;
  color: rgba(56, 47, 42, 0.7);
}
.container > section:not(:where(body#top-page *)) .attribution-list, .container > section:not(:where(body#err-page *)) .attribution-list {
  display: grid;
  grid-template-columns: auto 1fr;
  -moz-column-gap: 1em;
       column-gap: 1em;
  font-size: 1.4rem;
}
.container > section:not(:where(body#top-page *)) .attribution-list:where(body.dark-mode *), .container > section:not(:where(body#err-page *)) .attribution-list:where(body.dark-mode *) {
  color: #b6b0ad;
}
.container > section:not(:where(body#top-page *)) .attribution-list .attribution-heading::after, .container > section:not(:where(body#err-page *)) .attribution-list .attribution-heading::after {
  content: "：";
}
.container > section:not(:where(body#top-page *)) .attribution-list .attribution-desc ul li, .container > section:not(:where(body#err-page *)) .attribution-list .attribution-desc ul li {
  display: inline-block;
}
.container > section:not(:where(body#top-page *)) .attribution-list .attribution-desc ul li:not(:last-of-type)::after, .container > section:not(:where(body#err-page *)) .attribution-list .attribution-desc ul li:not(:last-of-type)::after {
  content: "/";
  margin-inline: 0.5em;
}
.container > section:not(:where(body#top-page *)) .concept, .container > section:not(:where(body#err-page *)) .concept {
  margin-bottom: 20px;
  padding-bottom: 12px;
  line-height: 1.4;
  font-size: 2.5rem;
  font-weight: 700;
  color: #382f2a;
}
@media (max-width: 960px) {
  .container > section {
    grid-template-columns: 110px 1fr;
    -moz-column-gap: 40px;
         column-gap: 40px;
    margin-block: 180px;
  }
  .container > section .outer-num {
    width: 110px;
    height: 96px;
    margin-bottom: 45px;
  }
}
@media (max-width: 720px) {
  .container {
    margin: 0 36px;
  }
  .container > section {
    grid-template-columns: 100px 1fr;
    -moz-column-gap: 28px;
         column-gap: 28px;
    margin-block: 120px;
  }
  .container > section .outer-num {
    width: 100px;
    height: 90px;
    margin-bottom: 40px;
  }
  .container > section .outer {
    margin: 0 32px;
  }
}
@media (max-width: 480px) {
  .container {
    margin: 0;
  }
  .container > section {
    position: relative;
    grid-template-columns: 1fr;
    -moz-column-gap: 0;
         column-gap: 0;
    margin-block: 40px;
  }
  .container > section#sec-message {
    margin-top: 100vh;
    padding: 80px 36px;
  }
  .container > section#sec-works, .container > section#sec-skills, .container > section#sec-profile {
    padding: 80px 20px;
  }
  .container > section .outer-num {
    grid-column: 1/2;
    grid-row: 1/2;
    position: absolute;
    top: 0;
    bottom: 0;
    left: auto;
    right: 0;
    z-index: 0;
    width: 100%;
    height: 100vh;
    text-align: left;
  }
  .container > section .outer-num::before {
    display: none;
  }
  .container > section .outer-num::after {
    position: relative;
    width: 100vw;
    top: -40px;
    bottom: 0;
    left: -32px;
    text-align: left;
    letter-spacing: -0.02em;
    line-height: 0.8;
    font-size: min(31vw, 13.5em);
    opacity: 0.4;
  }
  .container > section .outer {
    grid-column: 1/2;
    grid-row: 2/3;
    padding-top: 120px;
  }
  .container > section#sec-message, .container > section#sec-skills {
    color: #eeece8;
    background-color: #382f2a;
  }
  .container > section#sec-message .outer-num::before, .container > section#sec-skills .outer-num::before {
    color: rgba(238, 236, 232, 0.15);
    border-color: rgba(238, 236, 232, 0.15);
  }
  .container > section#sec-message .outer-num::after, .container > section#sec-skills .outer-num::after {
    color: rgba(238, 236, 232, 0.25);
    border-color: rgba(238, 236, 232, 0.25);
  }
  .container > section#sec-message .outer .sec-heading, .container > section#sec-skills .outer .sec-heading {
    border-color: #645d58;
  }
}

.arrow {
  position: relative;
}
.arrow::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: transparent url(../img/arrow_slate.svg) no-repeat center/cover;
  transition: opacity 200ms 0ms ease;
  scale: 100%;
}
@media (max-width: 960px) {
  .arrow::before {
    scale: 90%;
  }
}
@media (max-width: 720px) {
  .arrow::before {
    scale: 80%;
  }
}
@media (max-width: 480px) {
  .arrow::before {
    scale: 80%;
  }
}
.arrow:hover::before {
  opacity: 0.7;
}
.arrow.up::before {
  rotate: 0deg;
}
.arrow.up-left::before {
  rotate: 315deg;
}
.arrow.left::before {
  rotate: 270deg;
}
.arrow.down-left::before {
  rotate: 225deg;
}
.arrow.down::before {
  rotate: 180deg;
}
.arrow.down-right::before {
  rotate: 135deg;
}
.arrow.right::before {
  rotate: 90deg;
}
.arrow.up-right::before {
  rotate: 45deg;
}
.arrow:where(body.dark-mode *)::before {
  background-image: url(../img/arrow_ash.svg);
}

/* --------------------------------
  loading animation
-------------------------------- */
@keyframes loading-blur {
  0% {
    filter: blur(1em) opacity(0);
  }
  100% {
    filter: blur(0) opacity(1);
  }
}
@keyframes loading-slideup {
  0% {
    transform: translateY(15%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes page-transition-enter {
  0% {
    filter: blur(10px) opacity(0) brightness(1.5) contrast(0);
    transform: translateY(-20px);
  }
  100% {
    filter: blur(0) opacity(1) brightness(1) contrast(1);
    transform: translateY(0);
  }
}
@keyframes page-transition-leave {
  0% {
    filter: blur(0) opacity(1) brightness(1) contrast(1);
    transform: translateY(0);
  }
  100% {
    filter: blur(10px) opacity(0) brightness(1.5) contrast(0);
    transform: translateY(-20px);
  }
}
@keyframes page-transition {
  0% {
    filter: blur(10px) opacity(0) brightness(1.5) contrast(0);
    transform: translateY(-20px);
  }
  100% {
    filter: blur(0) opacity(1) brightness(1) contrast(1);
    transform: translateY(0);
  }
}
/* --------------------------------
  first visual
-------------------------------- */
#fv-bg {
  position: fixed;
  inset: 0;
  margin: auto;
  z-index: -3;
  width: 100%;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  filter: opacity(0);
  animation: loading-blur 1500ms 2500ms ease forwards;
}
#fv-bg #fv-slider {
  grid-column: 1/6;
  height: 100vh;
}
#fv-bg #fv-slider .slider-item img {
  width: 100%;
  height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
  filter: saturate(0);
  opacity: 0.3;
}
#fv-bg #fv-slider .slider-item img:where(body#err-page *) {
  background-image: linear-gradient(25deg, rgba(238, 236, 232, 0.5), rgba(204, 199, 196, 0.5)), linear-gradient(70deg, rgba(204, 199, 196, 0.2), rgba(238, 236, 232, 0.7));
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
#fv-bg #fv-slider .slider-item.slide-animation {
  animation: fadezoom 3s 0s forwards;
}
@keyframes fadezoom {
  0% {
    transform: scale(110%) translateY(-10px);
    filter: blur(12px) brightness(1.6);
  }
  80% {
    filter: blur(0) brightness(1);
  }
  100% {
    transform: scale(100%) translateY(0);
  }
}
@media (max-width: 720px) {
  #fv-bg #fv-slider {
    grid-column: 1/8;
  }
}

/* --------------------------------
  header
-------------------------------- */
#header {
  position: fixed;
  top: 0;
  z-index: 3;
  width: 100%;
  padding: 18px 48px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 1;
  background-color: rgba(238, 236, 232, 0);
  transition: all 800ms 0ms ease;
  filter: opacity(0);
  animation: loading-blur 1500ms 2500ms ease forwards;
}
#header:where(body.dark-mode *) {
  color: #eeece8;
  background-color: rgba(56, 47, 42, 0);
}
#header h1.site-title {
  order: 0;
  font-size: 32px;
  opacity: 0;
  transition: all 800ms 0ms ease;
}
#header h1.site-title .thick {
  font-weight: 700;
}
#header .g-nav-btn {
  order: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  text-align: center;
  outline: none;
  border: none;
  cursor: pointer;
  transition: all 150ms 0ms ease;
  display: none;
}
#header .g-nav-btn:hover {
  opacity: 0.7;
}
#header .g-nav-btn .burger-bar {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 2px;
  background-color: #382f2a;
  transition: all 200ms 0ms ease;
}
#header .g-nav-btn .burger-bar:where(body.dark-mode *) {
  background-color: #eeece8;
}
#header .g-nav-btn .burger-bar::before, #header .g-nav-btn .burger-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  display: inline-block;
  width: 30px;
  height: 2px;
  background-color: #382f2a;
  transition: all 200ms 0ms ease;
}
#header .g-nav-btn .burger-bar::before:where(body.dark-mode *), #header .g-nav-btn .burger-bar::after:where(body.dark-mode *) {
  background-color: #eeece8;
}
#header .g-nav-btn .burger-bar::before {
  translate: 0 -8px;
  rotate: 0;
}
#header .g-nav-btn .burger-bar::after {
  translate: 0 8px;
  rotate: 0;
}
#header .g-nav-btn.is-active .burger-bar {
  background-color: rgba(56, 47, 42, 0);
}
#header .g-nav-btn.is-active .burger-bar:where(body.dark-mode *) {
  background-color: rgba(238, 236, 232, 0);
}
#header .g-nav-btn.is-active .burger-bar::before {
  translate: 0 0;
  rotate: -45deg;
}
#header .g-nav-btn.is-active .burger-bar::after {
  translate: 0 0;
  rotate: 45deg;
}
#header .g-nav {
  order: 1;
}
#header .g-nav .nav-list {
  display: flex;
  -moz-column-gap: 4rem;
       column-gap: 4rem;
  text-align: center;
  font-size: 16px;
}
#header .g-nav .nav-list .nav-item {
  position: relative;
  padding: 8px;
  font-weight: 500;
  cursor: pointer;
}
#header .g-nav .nav-list .nav-item::after {
  content: attr(data-hover-txt);
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: -1;
  display: grid;
  place-items: center;
  font-family: "hiragino-kaku-gothic-pron", sans-serif;
  color: #382f2a;
  opacity: 0;
  visibility: hidden;
  transition: all 200ms 0ms ease;
}
#header .g-nav .nav-list .nav-item:hover {
  color: rgba(56, 47, 42, 0);
}
#header .g-nav .nav-list .nav-item:hover::after {
  color: rgba(56, 47, 42, 0.7);
  opacity: 1;
  visibility: visible;
}
#header .g-nav .nav-list .nav-item:where(body.dark-mode *):hover {
  color: rgba(238, 236, 232, 0);
  background-color: rgba(238, 236, 232, 0);
}
#header .g-nav .nav-list .nav-item:where(body.dark-mode *):hover::after {
  color: rgba(238, 236, 232, 0.7);
}
#header.is-active {
  background-color: rgba(238, 236, 232, 0.95);
}
#header.is-active:where(body.dark-mode *) {
  background-color: rgba(56, 47, 42, 0.95);
}
#header.is-active h1.site-title {
  opacity: 1;
}
#header.is-active h1.site-title:hover {
  opacity: 0.7;
}
@media (max-width: 960px) {
  #header {
    padding: 18px 36px 24px;
  }
  #header h1.site-title {
    font-size: 3.2rem;
  }
  #header .g-nav .nav-list {
    font-size: 1.6rem;
  }
}
@media (max-width: 720px) {
  #header .g-nav-btn {
    display: block;
  }
  #header .g-nav-btn + .g-nav .nav-list {
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    height: 100vh;
    padding: 40px 60px 80px;
    display: block;
    text-align: right;
    font-size: 2.5rem;
    background-color: rgba(238, 236, 232, 0.95);
    opacity: 0;
    visibility: hidden;
    transition: all 200ms 100ms ease;
  }
  #header .g-nav-btn + .g-nav .nav-list:where(body.dark-mode *) {
    background-color: rgba(56, 47, 42, 0.95);
  }
  #header .g-nav-btn + .g-nav .nav-list .nav-item {
    position: relative;
    padding: 40px 0;
    font-weight: 500;
    transition: all 200ms 0ms ease;
    cursor: pointer;
  }
  #header .g-nav-btn + .g-nav .nav-list .nav-item::after {
    display: inline-block;
    padding: 40px 0;
    color: #382f2a;
  }
  #header .g-nav-btn.is-active + .g-nav .nav-list {
    opacity: 1;
    visibility: visible;
  }
}
@media (max-width: 480px) {
  #header {
    padding: 4px 20px 8px 24px;
  }
  #header h1.site-title {
    font-size: 2.8rem;
  }
  #header .g-nav-btn {
    width: 44px;
    height: 44px;
  }
}

/* --------------------------------
  fv section
-------------------------------- */
#fv {
  position: absolute;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100dvh;
  margin: 0;
  display: grid;
  grid-template-columns: 2fr 660px 160px 1fr;
  grid-template-rows: 45vh 1fr;
}
#fv .wrapper.name {
  grid-column: 2/3;
  grid-row: 2/3;
  width: 660px;
  height: 220px;
  padding-right: 20px;
  text-align: right;
  border-right: 2px solid #382f2a;
  filter: opacity(0);
  animation: loading-slideup 1500ms 500ms ease forwards, loading-blur 2000ms 800ms ease forwards;
}
#fv .wrapper.name:where(body.dark-mode *) {
  border-color: #eeece8;
}
#fv .wrapper.name .en-name {
  margin-top: 10px;
  margin-right: -2px;
  line-height: 0.95;
  font-size: 8rem;
}
#fv .wrapper.name .en-name .thin {
  font-weight: 200;
}
#fv .wrapper.name .ja-name {
  margin: 8px 0 32px;
  line-height: 1;
  font-weight: 300;
  font-size: 2.85rem;
}
#fv .wrapper.name .school {
  line-height: 1.5;
  font-size: 1.2rem;
}
#fv .wrapper.leading {
  grid-column: 3/4;
  grid-row: 2/3;
  width: 160px;
  height: 220px;
  padding: 8px 24px;
  display: grid;
  row-gap: 24px;
  align-content: end;
  line-height: 1.3;
  font-size: 1.6rem;
  font-weight: 500;
  filter: opacity(0);
  animation: loading-blur 1500ms 2500ms ease forwards;
}
#fv .wrapper.leading .leading-link {
  width: 120px;
  padding: 4px 0;
  border-bottom: 1px solid #382f2a;
}
#fv .wrapper.leading .leading-link::before {
  scale: 90%;
}
#fv .wrapper.leading .leading-link:first-of-type::before {
  translate: 0 3px;
}
#fv .wrapper.leading .leading-link .link {
  display: block;
}
#fv .wrapper.leading .leading-link:where(body.dark-mode *) {
  border-color: #eeece8;
}
#fv .wrapper.leading .leading-link:where(body.dark-mode *)::before {
  background-image: url(../img/arrow_ash.svg);
}
#fv .wrapper.leading .leading-link:where(body.dark-mode *):hover {
  color: #b6b0ad;
  border-color: #b6b0ad;
}
@media (max-width: 960px) {
  #fv {
    grid-template-columns: 1fr 660px 1fr;
    grid-template-rows: 40vh 200px 1fr;
  }
  #fv .wrapper.name {
    width: auto;
    height: 200px;
  }
  #fv .wrapper.name .ja-name {
    margin: 8px 0 28px;
  }
  #fv .wrapper.leading {
    grid-column: 2/3;
    grid-row: 3/4;
    width: -moz-fit-content;
    width: fit-content;
    height: -moz-fit-content;
    height: fit-content;
    margin-top: 52px;
    margin-left: auto;
    padding: 0;
    display: flex;
  }
  #fv .wrapper.leading .leading-link {
    width: 120px;
    padding: 0 8px 2px;
    border-bottom: none;
    border-left: 1px solid #382f2a;
  }
  #fv .wrapper.leading .leading-link:where(body.dark-mode *) {
    border-color: #eeece8;
  }
  #fv .wrapper.leading .leading-link.profile {
    display: none;
  }
}
@media (max-width: 720px) {
  #fv {
    grid-template-columns: 3fr 300px 1fr;
    grid-template-rows: 35vh 1fr 1fr;
    align-items: center;
  }
  #fv .wrapper.name {
    width: 300px;
    margin-left: auto;
    margin-right: 10vw;
    height: auto;
  }
  #fv .wrapper.name .en-name {
    height: auto;
    margin-top: 4px;
  }
  #fv .wrapper.name .en-name .thin {
    margin-right: 4px;
    font-size: 0.95em;
  }
  #fv .wrapper.name .ja-name {
    margin: 16px 0 32px;
  }
  #fv .wrapper.name .school {
    margin-bottom: 4px;
  }
  #fv .wrapper.leading {
    margin-top: 40px;
    padding: 0;
    display: block;
  }
  #fv .wrapper.leading .leading-link {
    width: 108px;
  }
  #fv .wrapper.leading .leading-link.profile {
    position: absolute;
    top: 220vh;
    right: 32px;
    z-index: 3;
  }
}
@media (max-width: 480px) {
  #fv {
    translate: 0 -100vh;
    grid-template-columns: 1fr;
    grid-template-rows: 4fr 2fr 1fr;
    align-items: end;
  }
  #fv .wrapper.name {
    grid-column: 1/2;
    width: auto;
    margin: 0 auto;
    padding-right: 32px;
    border-right: none;
  }
  #fv .wrapper.name .en-name {
    font-size: 7rem;
  }
  #fv .wrapper.name .ja-name {
    margin: 8px 0 24px;
    font-size: 2.5rem;
  }
  #fv .wrapper.name .school {
    margin-right: 2px;
    font-size: 1rem;
  }
  #fv .wrapper.leading {
    grid-column: 1/2;
    align-self: self-end;
    padding-right: 32px;
    padding-bottom: 32px;
  }
  #fv .wrapper.leading .leading-link.works::before {
    translate: 0 -2px;
  }
}

/* --------------------------------
  message section
-------------------------------- */
#sec-message {
  display: grid;
  grid-template-columns: 1.61fr 1fr;
  -moz-column-gap: 4vw;
       column-gap: 4vw;
  height: -moz-fit-content;
  height: fit-content;
  margin-top: 0;
  padding: 100vh 20px 0;
  transition: color 150ms 0ms ease;
}
#sec-message > .wrapper.text {
  grid-column: 1/2;
  grid-row: 1/2;
  margin: 12px 0;
}
#sec-message > .wrapper.text:where(body.dark-mode *) {
  color: #eeece8;
}
#sec-message > .wrapper.text .en-message {
  margin-left: -2px;
  line-height: 1.2;
  font-size: 6rem;
}
#sec-message > .wrapper.text .en-message .thin {
  text-transform: none;
  font-size: 0.92em;
}
#sec-message > .wrapper.text .en-message .thick {
  text-transform: capitalize;
}
#sec-message > .wrapper.text .ja-message {
  margin: 40px 0 4px;
  font-size: 2.2rem;
  font-weight: 500;
}
#sec-message > .wrapper.text .ja-message br {
  display: none;
}
#sec-message > .wrapper.text .sub-message {
  font-size: 1.6rem;
}
#sec-message > .wrapper.text .leading-link {
  width: 120px;
  height: -moz-fit-content;
  height: fit-content;
  padding: 2px 8px 4px;
  margin-top: 28px;
  margin-left: auto;
  margin-right: 4px;
  text-align: right;
  line-height: 1.5;
  font-size: 1.6rem;
  font-weight: 500;
  border-right: 1px solid #382f2a;
  display: none;
}
#sec-message > .wrapper.text .leading-link:where(body.dark-mode *) {
  border-color: #eeece8;
}
#sec-message > .wrapper.text .leading-link:where(body.dark-mode *)::before {
  background-image: url(../img/arrow_ash.svg);
}
#sec-message > .wrapper.text .leading-link:where(body.dark-mode *):hover {
  color: #b6b0ad;
  border-color: #b6b0ad;
}
#sec-message > .wrapper.text .leading-link::before {
  right: auto;
}
#sec-message > .wrapper.text .leading-link .link {
  display: block;
}
#sec-message > .wrapper.img {
  grid-column: 2/3;
  grid-row: 1/2;
  max-height: 80vh;
  aspect-ratio: 1/1.618;
  position: relative;
}
#sec-message > .wrapper.img::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #382f2a;
  mix-blend-mode: color-dodge;
  filter: saturate(0.4);
}
#sec-message > .wrapper.img img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  scale: -1 1;
  filter: contrast(0.8) brightness(0.9);
}
#sec-message > .wrapper.img:where(body.dark-mode *)::after {
  background-color: #e6e3df;
  mix-blend-mode: color-burn;
}
#sec-message > .wrapper.img:where(body.dark-mode *) img {
  filter: contrast(0.8) brightness(1.1);
}
@media (max-width: 720px) {
  #sec-message {
    grid-template-columns: 1fr;
  }
  #sec-message > .wrapper.text {
    grid-column: 1/2;
    grid-row: 1/2;
    margin-bottom: 52px;
  }
  #sec-message > .wrapper.text .ja-message {
    margin: 40px 8px 4px;
    text-align: right;
    font-size: 2.4rem;
  }
  #sec-message > .wrapper.text .sub-message {
    text-align: right;
  }
  #sec-message > .wrapper.text .leading-link {
    display: block;
  }
  #sec-message > .wrapper.img {
    grid-column: 1/2;
    grid-row: 2/3;
    margin: 0 15vw;
  }
}
@media (max-width: 480px) {
  #sec-message {
    margin: 0;
    margin-top: 50dvh;
    padding-top: 200dvh;
  }
  #sec-message > .wrapper.text {
    margin: 8px 0 52px;
  }
  #sec-message > .wrapper.text .en-message {
    margin-left: 4vw;
    font-size: 4.2rem;
  }
  #sec-message > .wrapper.text .ja-message {
    margin: 32px 4vw 4px 0;
    font-size: 1.6rem;
  }
  #sec-message > .wrapper.text .ja-message br {
    display: inline;
  }
  #sec-message > .wrapper.text .sub-message {
    width: 240px;
    margin-right: calc(4vw - 6px);
    margin-left: auto;
    font-size: 1.45rem;
    text-align: left;
  }
  #sec-message > .wrapper.text .sub-message br {
    display: none;
  }
  #sec-message > .wrapper.text .leading-link {
    width: 130px;
    margin-right: 16px;
    padding-right: 12px;
    border-color: #eeece8;
  }
  #sec-message > .wrapper.text .leading-link::before {
    background-image: url(../img/arrow_ash.svg);
  }
  #sec-message > .wrapper.text .leading-link:hover {
    color: rgba(238, 236, 232, 0.7);
  }
  #sec-message > .wrapper.img {
    margin: 0 10vw;
  }
}

/* --------------------------------
  works section
-------------------------------- */
#sec-works .outer-num {
  margin-top: -8px;
  margin-bottom: 44px;
}
#sec-works .outer .sec-heading {
  margin-bottom: 28px;
}
#sec-works .outer .sec-heading:not(:first-of-type) {
  margin-top: 40px;
}
#sec-works .outer .work-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  -moz-column-gap: 7.5%;
       column-gap: 7.5%;
  row-gap: 40px;
}
#sec-works .outer .work-list .work-item {
  position: relative;
  width: 100%;
}
#sec-works .outer .work-list .work-item .item-link {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  aspect-ratio: 640/480;
  transition: all 150ms 0ms ease;
}
#sec-works .outer .work-list .work-item .item-link .item-img {
  position: absolute;
  top: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
}
#sec-works .outer .work-list .work-item .item-link .item-inner {
  position: absolute;
  top: 0;
  z-index: 2;
  display: grid;
  justify-content: start;
  align-items: self-end;
  width: 100%;
  height: 100%;
  background-color: rgba(56, 47, 42, 0.85);
  opacity: 0;
  visibility: hidden;
  transition: all 150ms 0ms ease;
}
#sec-works .outer .work-list .work-item .item-link .item-inner .leading-link {
  width: 136px;
  height: 60px;
  margin: 28px 28px 0;
  padding: 0 8px 2px;
  line-height: 1.3;
  font-size: 1.6rem;
  font-weight: 500;
  color: #eeece8;
  border-left: 1px solid #eeece8;
}
#sec-works .outer .work-list .work-item .item-link .item-inner .leading-link::before {
  background-image: url(../img/arrow_ash.svg);
  translate: 0 0;
}
#sec-works .outer .work-list .work-item .item-link:hover .item-inner {
  opacity: 1;
  visibility: visible;
}
#sec-works .outer .work-list .work-item .item-link:hover .leading-link::before {
  opacity: 1;
}
#sec-works .outer .work-list .work-item .item-title {
  margin: 8px 2px 0;
  font-size: 1.6rem;
}
#sec-works .outer .work-list.website .work-item .item-link .item-img {
  -o-object-position: 40% center;
     object-position: 40% center;
  scale: 130%;
  translate: 2.5% 7%;
}
#sec-works .outer .work-list.banner .work-item .item-link .item-img {
  -o-object-position: center 35%;
     object-position: center 35%;
  scale: 200%;
  translate: -5% 15%;
}
#sec-works .outer .work-list.others .work-item .item-link .item-img {
  -o-object-position: center top;
     object-position: center top;
  scale: 160%;
}
@media (max-width: 960px) {
  #sec-works .outer .work-list {
    grid-template-columns: repeat(2, 1fr);
    -moz-column-gap: 10%;
         column-gap: 10%;
  }
  #sec-works .outer .work-list .item-inner .leading-link::before {
    translate: -8px -4px;
  }
}
@media (max-width: 720px) {
  #sec-works .outer .work-list {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    row-gap: 36px;
  }
  #sec-works .outer .work-list .work-item .item-link .item-inner .leading-link::before {
    translate: -20px -5px;
  }
}
@media (max-width: 480px) {
  #sec-works .outer .work-list {
    grid-template-columns: 1fr;
    row-gap: 48px;
  }
  #sec-works .outer .work-list .work-item {
    aspect-ratio: 1/1;
  }
  #sec-works .outer .work-list .work-item .item-link .item-inner {
    opacity: 0;
    visibility: hidden;
    transition: all 150ms 0ms ease;
  }
  #sec-works .outer .work-list .work-item .item-link .item-inner .leading-link {
    width: 130px;
  }
  #sec-works .outer .work-list .work-item .item-link .item-inner .leading-link::before {
    translate: -4px -4px;
  }
}

/* --------------------------------
  skills section
-------------------------------- */
#sec-skills {
  scroll-padding-top: 52px;
}
#sec-skills .outer-num {
  margin-top: -12px;
  margin-bottom: 44px;
}
#sec-skills .outer {
  font-size: 1.6rem;
}
#sec-skills .outer > * {
  position: relative;
  z-index: 1;
}
#sec-skills .outer .skill-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  -moz-column-gap: 80px;
       column-gap: 80px;
  row-gap: 0;
}
#sec-skills .outer .skill-list .skill-item:not(:nth-of-type(-n + 2)) {
  margin-top: 80px;
}
#sec-skills .outer .skill-list .sec-heading {
  letter-spacing: 0.02em;
}
@media (max-width: 960px) {
  #sec-skills .outer-num {
    margin-top: 40px;
  }
  #sec-skills .outer {
    padding-top: 48px;
  }
  #sec-skills .outer .skill-list {
    grid-template-columns: 1fr;
  }
  #sec-skills .outer .skill-list .skill-item:first-of-type {
    margin-top: 0;
  }
  #sec-skills .outer .skill-list .skill-item:not(:first-of-type) {
    margin-top: 80px;
  }
}
@media (max-width: 480px) {
  #sec-skills .outer {
    padding-top: 160px;
  }
}

/* --------------------------------
  profile section
-------------------------------- */
#sec-profile .outer-num {
  margin-bottom: 44px;
}
#sec-profile .outer {
  display: grid;
  grid-template: "heading heading" auto "cv cv" auto "vision like" auto "strength strength" auto "contact contact" auto/2fr 1fr;
  -moz-column-gap: 80px;
       column-gap: 80px;
  row-gap: 0;
  font-size: 1.6rem;
}
#sec-profile .outer .name {
  position: relative;
  grid-area: heading;
  margin-top: -4px;
  font-weight: 300;
  font-size: 4.5rem;
  border-bottom: none;
}
#sec-profile .outer .name .en-name {
  position: relative;
  display: inline-block;
  margin-inline-start: 0.75em;
  padding-inline-start: 1em;
  font-size: 2.5rem;
  font-weight: 400;
  color: #ccc7c4;
  translate: 0 1.3em;
}
#sec-profile .outer .name .en-name::before {
  content: "";
  position: absolute;
  top: -110%;
  left: 0;
  width: 1px;
  height: 9.5445rem;
  background-color: #ccc7c4;
  rotate: 35deg;
}
#sec-profile .outer .name > br {
  display: none;
}
#sec-profile .outer .wrapper .sec-heading {
  margin-top: 80px;
  transition: color 150ms 0ms ease;
}
#sec-profile .outer .wrapper .sec-heading:where(body.dark-mode *) {
  color: #eeece8;
}
#sec-profile .outer .wrapper.cv {
  grid-area: cv;
}
#sec-profile .outer .wrapper.cv .cv-list {
  position: relative;
  padding-bottom: 40px;
  padding-left: 4px;
}
#sec-profile .outer .wrapper.cv .cv-list::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 4.85em;
  width: 4px;
  height: 100%;
  background-image: linear-gradient(to bottom, #918a86 82%, rgba(204, 199, 196, 0) 95%);
}
#sec-profile .outer .wrapper.cv .cv-list::before:where(body.dark-mode *) {
  background-image: linear-gradient(to bottom, #a09996 82%, rgba(56, 47, 42, 0) 95%);
}
#sec-profile .outer .wrapper.cv .cv-list .cv-item {
  position: relative;
  margin: 28px 0;
  padding-left: calc(6em + 14px);
  text-indent: calc(-6em - 14px);
}
#sec-profile .outer .wrapper.cv .cv-list .cv-item:where(body.dark-mode *) {
  text-indent: calc(-6em - 14px - 4px);
}
#sec-profile .outer .wrapper.cv .cv-list .cv-item .year {
  padding-inline-end: 4em;
}
#sec-profile .outer .wrapper.cv .cv-list .cv-item .year:where(body.dark-mode *) {
  font-weight: 700;
  color: #eeece8;
}
#sec-profile .outer .wrapper.cv .cv-list .cv-item::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: calc(4.85em - 6px - 2px);
  width: 12px;
  aspect-ratio: 1/1;
  background-color: #eeece8;
  border: 2px solid #918a86;
  border-radius: calc(infinity * 1px);
}
#sec-profile .outer .wrapper.cv .cv-list .cv-item::before:where(body.dark-mode *) {
  background-color: #382f2a;
  border-color: #a09996;
}
#sec-profile .outer .wrapper.vision {
  grid-area: vision;
}
#sec-profile .outer .wrapper.like {
  grid-area: like;
}
#sec-profile .outer .wrapper.strength {
  grid-area: strength;
}
#sec-profile .outer .wrapper.strength .strength-list .strength-item {
  margin: 28px 0 48px;
}
#sec-profile .outer .wrapper.strength .strength-list .strength-item:last-of-type {
  margin-bottom: 0;
}
#sec-profile .outer .wrapper.strength .strength-list .strength-item .strength-heading {
  display: flex;
  transition: color 150ms 0ms ease;
}
#sec-profile .outer .wrapper.strength .strength-list .strength-item .strength-heading:where(body.dark-mode *) {
  color: #eeece8;
}
#sec-profile .outer .wrapper.strength .strength-list .strength-item .strength-heading .keyword {
  display: grid;
  place-items: center;
  width: 120px;
  aspect-ratio: 1/1;
  text-align: center;
  line-height: 1.3;
  font-size: 1.2em;
  border: 1px solid #b6b0ad;
  border-radius: calc(infinity * 1px);
}
#sec-profile .outer .wrapper.strength .strength-list .strength-item .strength-heading .keyword:where(body.dark-mode *) {
  border-color: #736c68;
}
#sec-profile .outer .wrapper.strength .strength-list .strength-item .strength-heading .desc {
  display: grid;
  justify-content: start;
  align-items: center;
  height: 120px;
  margin-left: -1em;
}
#sec-profile .outer .wrapper.strength .strength-list .strength-item .strength-desc {
  margin-top: -44px;
  margin-left: 9.8em;
}
#sec-profile .outer .wrapper.contact {
  grid-area: contact;
}
@media (max-width: 960px) {
  #sec-profile .outer {
    grid-template: "heading" auto "cv" auto "vision" auto "like" auto "strength" auto "contact" auto/1fr;
  }
  #sec-profile .outer .wrapper.cv .cv-list .cv-item br {
    display: none;
  }
  #sec-profile .outer .wrapper.like .like-list li {
    display: inline;
  }
  #sec-profile .outer .wrapper.like .like-list li:not(:last-of-type)::after {
    content: "、";
  }
  #sec-profile .outer .wrapper.strength .strength-list .strength-item .strength-heading .keyword {
    width: 105px;
  }
  #sec-profile .outer .wrapper.strength .strength-list .strength-item .strength-heading .desc {
    height: 105px;
  }
  #sec-profile .outer .wrapper.strength .strength-list .strength-item .strength-desc {
    margin-top: -39px;
    margin-left: 9.57em;
  }
}
@media (max-width: 720px) {
  #sec-profile .outer .name {
    position: relative;
    margin-top: 10px;
    line-height: 0.9;
  }
  #sec-profile .outer .name .en-name {
    position: static;
    display: inline;
    margin-inline-start: 0;
    padding-inline-start: 0;
    font-size: 2.6rem;
    color: #b6b0ad;
    translate: 0 0;
  }
  #sec-profile .outer .name .en-name::before {
    display: none;
  }
  #sec-profile .outer .name > br {
    display: inline;
  }
  #sec-profile .outer .wrapper .sec-heading:first-of-type {
    margin-top: 100px;
  }
  #sec-profile .outer .wrapper .sec-heading:nth-of-type(-n + 2) {
    margin-top: 72px;
  }
  #sec-profile .outer .wrapper.cv .cv-list::before {
    left: 7.5px;
  }
  #sec-profile .outer .wrapper.cv .cv-list .cv-item {
    padding-left: 2em;
    text-indent: 0;
  }
  #sec-profile .outer .wrapper.cv .cv-list .cv-item .year {
    display: inline-block;
    width: 100%;
    font-weight: 700;
    color: #382f2a;
  }
  #sec-profile .outer .wrapper.cv .cv-list .cv-item .year:where(body.dark-mode *) {
    color: #eeece8;
  }
  #sec-profile .outer .wrapper.cv .cv-list .cv-item::before {
    left: 0;
  }
  #sec-profile .outer .wrapper.strength .strength-list .strength-item .strength-heading {
    display: block;
  }
  #sec-profile .outer .wrapper.strength .strength-list .strength-item .strength-heading .keyword {
    display: inline;
    border: none;
    width: auto;
    height: auto;
    aspect-ratio: 0;
    padding: 0;
    text-align: left;
    font-size: 1em;
  }
  #sec-profile .outer .wrapper.strength .strength-list .strength-item .strength-heading .keyword br {
    display: none;
  }
  #sec-profile .outer .wrapper.strength .strength-list .strength-item .strength-heading .desc {
    display: inline;
    margin-left: 0.4em;
    height: auto;
  }
  #sec-profile .outer .wrapper.strength .strength-list .strength-item .strength-desc {
    margin-top: 12px;
    margin-left: 0;
  }
}
@media (max-width: 480px) {
  #sec-profile .outer .wrapper.like .like-list li {
    display: block;
  }
  #sec-profile .outer .wrapper.like .like-list li::after {
    display: none;
  }
}

/* --------------------------------
  To-top
-------------------------------- */
#to-top.leading-link {
  position: sticky;
  bottom: 0;
  right: 0;
  width: 116px;
  height: -moz-fit-content;
  height: fit-content;
  margin-right: auto;
  padding: 54px 12px 40px;
  display: flex;
  justify-content: end;
  align-items: end;
  text-align: right;
  line-height: 1.3;
  font-size: 1.6rem;
  font-weight: 500;
  color: #ccc7c4;
  border-right: 1px solid #ccc7c4;
  opacity: 0;
  visibility: hidden;
}
#to-top.leading-link .link {
  display: block;
}
#to-top.leading-link .link::before {
  top: auto;
  bottom: 110%;
  opacity: 0.25;
}
#to-top.leading-link .link::before:where(body.dark-mode *) {
  opacity: 0.7;
  background-image: url(../img/arrow_ash.svg);
}
#to-top.leading-link.is-active {
  opacity: 1;
  visibility: visible;
}
#to-top.leading-link:hover {
  color: #382f2a;
  border-right: 1px solid #382f2a;
}
#to-top.leading-link:hover .link::before {
  opacity: 1;
}
#to-top.leading-link:hover:where(body.dark-mode *) {
  color: #eeece8;
  border-color: #eeece8;
}
@media (max-width: 960px) {
  #to-top.leading-link {
    width: 107px;
    padding-right: 10px;
  }
}
@media (max-width: 720px) {
  #to-top.leading-link {
    width: 98px;
    padding-right: 8px;
  }
}
@media (max-width: 480px) {
  #to-top.leading-link {
    display: none;
  }
}

/* --------------------------------
  footer
-------------------------------- */
#footer {
  font-size: 1.6rem;
  color: #eeece8;
  background-color: #382f2a;
  font-family: "hiragino-kaku-gothic-pron", sans-serif;
}
#footer:where(body.dark-mode *) {
  background-color: #473e39;
}
#footer > .container {
  margin: 0;
  padding: 28px 48px;
}
#footer > .container > .wrapper.name {
  text-align: left;
  padding: 40px 0 4px;
}
#footer > .container > .wrapper.name .en-name {
  line-height: 1.4;
  font-size: 4.5rem;
}
#footer > .container > .wrapper.name .ja-name {
  font-size: 2.1rem;
}
#footer > .container .contact {
  margin-top: 40px;
}
#footer > .container .contact .email {
  padding-inline: 0.5em;
}
#footer > .container .copyright {
  margin: 40px 0 0;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 400;
  color: #a09996;
}
#footer > .container .copyright:where(body.dark-mode *) {
  color: #d6d2cf;
}
#footer > .container br {
  display: none;
}
@media (max-width: 960px) {
  #footer > .container {
    padding: 28px 36px;
  }
}
@media (max-width: 480px) {
  #footer > .container {
    padding: 28px 28px;
  }
  #footer > .container .wrapper.name .en-name {
    line-height: 1.2;
  }
  #footer > .container .wrapper.name .ja-name {
    margin-top: 20px;
    line-height: 1.6;
  }
  #footer > .container .contact {
    line-height: 1.8;
  }
  #footer > .container br {
    display: inline;
  }
}

/* --------------------------------
  page transition
-------------------------------- */
body.is-entered {
  animation: page-transition 1500ms 0ms ease normal forwards;
}
body.is-leaving {
  animation: page-transition 1500ms 0ms ease reverse forwards;
}/*# sourceMappingURL=style.css.map */