:root {
  --tiffany-blue: #81d8d0;
  --ink: #121816;
  --panel: rgba(249, 251, 250, .91);
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  color: var(--ink);
  font-family: Arial, "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

.chiyori-page {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background-color: #eef2f1;
  background-image: var(--page-image);
  background-position: right bottom;
  background-size: cover;
}

.chiyori-page::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, .08), transparent 34%);
}

.menu-panel {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 4;
  width: 29%;
  padding: clamp(24px, 3vw, 54px) clamp(26px, 3.6vw, 66px) clamp(22px, 2.8vw, 46px);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-right: 1px solid rgba(129, 216, 208, .20);
  backdrop-filter: blur(8px);
  transform: translateX(-102%);
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}

.is-panel-visible .menu-panel { transform: translateX(0); }

.brand {
  display: block;
  width: clamp(132px, 8.1vw, 150px);
  line-height: 0;
  text-decoration: none;
}

.brand-logo { display: block; width: 100%; height: auto; }

.navigation {
  margin-top: auto;
  margin-bottom: clamp(48px, 5.1vw, 82px);
}

.navigation-list {
  display: grid;
  gap: clamp(21px, 2vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.navigation-link {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  width: fit-content;
  color: var(--ink);
  text-decoration: none;
  font-size: clamp(14px, 1.02vw, 18px);
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: .08em;
}

.navigation-link[aria-current="page"] { color: rgba(18, 24, 22, .62); }

.menu-square {
  width: 7px;
  height: 7px;
  flex: none;
  background: var(--tiffany-blue);
}

.navigation-link:hover .menu-square,
.navigation-link:focus-visible .menu-square { animation: menu-square-bounce .58s ease-out; }

@keyframes menu-square-bounce {
  0%, 100% { transform: translateY(0); }
  22% { transform: translateY(-5px); }
  40% { transform: translateY(0); }
  65% { transform: translateY(-3px); }
  82% { transform: translateY(0); }
}

.navigation-list li {
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity .42s ease, transform .42s cubic-bezier(.22, 1, .36, 1);
}

.is-panel-visible .navigation-list li,
.is-menu-open .navigation-list li { opacity: 1; transform: translateX(0); }
.is-panel-visible .navigation-list li:nth-child(1), .is-menu-open .navigation-list li:nth-child(1) { transition-delay: .28s; }
.is-panel-visible .navigation-list li:nth-child(2), .is-menu-open .navigation-list li:nth-child(2) { transition-delay: .38s; }
.is-panel-visible .navigation-list li:nth-child(3), .is-menu-open .navigation-list li:nth-child(3) { transition-delay: .48s; }

.copyright {
  color: rgba(18, 24, 22, .68);
  font-size: 11px;
  line-height: 1;
  letter-spacing: .14em;
  white-space: nowrap;
}

.copyright .inc { font-size: .72em; letter-spacing: .08em; }

.menu-toggle,
.menu-backdrop { display: none; }

@media (max-width: 700px) {
  .chiyori-page { background-position: 66% center; }
  .chiyori-page::after { background: linear-gradient(180deg, rgba(255,255,255,.16), transparent 30%); }

  .menu-toggle {
    position: fixed;
    top: max(18px, env(safe-area-inset-top));
    right: 18px;
    z-index: 8;
    display: grid;
    place-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid rgba(18, 24, 22, .16);
    border-radius: 50%;
    background: rgba(249, 251, 250, .9);
    box-shadow: 0 5px 22px rgba(18, 24, 22, .08);
    cursor: pointer;
  }

  .menu-toggle span {
    display: block;
    width: 19px;
    height: 1px;
    background: var(--ink);
    transition: transform .3s ease, opacity .2s ease;
  }

  .is-menu-open .menu-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .is-menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
  .is-menu-open .menu-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 3;
    display: block;
    padding: 0;
    border: 0;
    background: rgba(18, 24, 22, .16);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s ease;
  }

  .is-menu-open .menu-backdrop { opacity: 1; visibility: visible; }

  .menu-panel {
    position: fixed;
    width: min(84%, 340px);
    padding: max(30px, env(safe-area-inset-top)) 30px max(28px, env(safe-area-inset-bottom));
    border-right-color: rgba(129, 216, 208, .32);
    transform: translateX(-102%);
  }

  .is-panel-visible .menu-panel { transform: translateX(-102%); }
  .is-menu-open .menu-panel { transform: translateX(0); }
  .brand { width: 142px; }
  .navigation { margin-bottom: 54px; }
  .navigation-list { gap: 26px; }
  .navigation-link { font-size: 16px; gap: 12px; }
  .copyright { font-size: 10px; }
}

@supports (height: 100dvh) {
  .chiyori-page { height: 100dvh; min-height: 100dvh; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-panel,
  .navigation-list li,
  .menu-toggle span,
  .menu-backdrop { transition: none; }
  .navigation-link:hover .menu-square,
  .navigation-link:focus-visible .menu-square { animation: none; }
}