:root {
  --color_black: #000;
  --color_white: #fff;
}

html { font-size: clamp(14px, 1.1vw, 16px); scrollbar-width: none; }
::-webkit-scrollbar { display: none; }

body {
  font-family: helvetica-neue-lt-pro, "Noto Sans JP", sans-serif;
  font-feature-settings: 'palt';
  font-weight: 300; line-height: 1.5em; letter-spacing: .03em;
  background: var(--color_white); color: var(--color_black);
  overflow-wrap: break-word; font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  opacity: 0; will-change: opacity;
}
body.is-ready { animation: fadeIn 1s ease forwards; }
@keyframes fadeIn { to { opacity: 1; } }

img { vertical-align: bottom; width: 100%; height: auto; }
::selection { background: var(--color_black); color: var(--color_white); }
.site a { color: var(--color_black); text-decoration: none; }

.site { padding: 0 1.75rem 1.75rem; }

.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 777; padding: 1.75rem; background: var(--color_white); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); mask-image: linear-gradient(to right, white, white 10%, rgba(0, 0, 0, .85) 50%, white 90%, white); -webkit-mask-image: linear-gradient(to right, white, white 10%, rgba(0, 0, 0, .85) 50%, white 90%, white); will-change: transform; }
.site-header.is-hidden { pointer-events: none; }
.site-header__inner { display: flex; justify-content: space-between; }
.site-header__inner h1 img { width: 10.25rem; }
.site-header__mark img { width: 2.15rem; }

.site-main { padding-top: 8rem; }

.site-notice { font-size: 2rem; line-height: 1.4; font-weight: 200; margin:0.75em 0; }
.site-notice br { display:none; }

.gallery { display: flex; flex-direction: column; gap: 1.75rem; }
.gallery.is-active .gallery__item { opacity: 0; transition: opacity .6s ease; }
.gallery.is-active .gallery__item.is-visible { opacity: 1; }

.site-footer { margin-top: 10rem; }
.site-footer__inner { display: flex; justify-content: space-between; padding: 0 .25rem; }
.site-footer__logo img { width: 10.5rem; }
.site-footer__mark img { width: 2.4rem; }
.site-footer__nav ul { display: flex; justify-content: flex-end; align-items: center; }
.site-footer__nav ul li { font-size: 3rem; line-height: 1; }
.site-footer__nav ul li a { text-decoration: underline; text-decoration-thickness: .15rem; text-underline-offset: .25rem; }
.site-footer__nav ul li:not(:last-child)::after { content: "/"; padding: 0 .35em; }
.site-footer__nav ul li.nav-instagram img { width: auto; height: .8em; margin-bottom: .08em; }

/* cursor bubble */
.cursor-bubble { position: fixed; top: 0; left: 0; z-index: 9999; padding: .7em 1em; background: var(--color_black); color: var(--color_white); font-size: .95rem; font-weight: 500; letter-spacing: .05em; line-height: 1; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.cursor-bubble.is-active { opacity: 1; }

@media screen and (max-width: 600px) {
  html { font-size: clamp(0px, 3.6vw, 100px); }
  .site { padding: 2rem .5rem; }
  .site-header { padding: 1rem .5rem; }
  .site-header__inner h1 img { width: 10rem; }
  .site-header__mark img { width: 2.1rem; }
  .site-main { padding-top: 6rem; }
  .gallery { gap: .5rem; }
  .site-notice { font-size: 1.25rem; margin: 1em 0; }
  .site-notice br { display:block; }
  .site-footer { position: relative; padding-top: 3rem; }
  .site-footer__logo img { width: 10rem; }
  .site-footer__mark img { width: 2.1rem; }
  .site-footer__nav { position: absolute; bottom: 6rem; left: 0; width: 100%; padding: 0 .35rem; }
  .site-footer__nav ul { justify-content: space-between; }
  .site-footer__nav ul li { font-size: 2.85rem; }
  .site-footer__nav ul li.nav-instagram img { height: .9em; margin-bottom: .05em; }
  .site-footer__nav ul li a { text-decoration-thickness: .1rem; }
}