@charset "UTF-8";
body {
  /*background: linear-gradient(0deg, #b3b3b3 0%, #cecece 40%);*/
  background-color: #c2c2c2;
}
.bg-noise { z-index: -1; }
#works-scroll {
  position: absolute;
  height: 100vh;
  height: 100dvh;
  left: auto;
  right: 32px;
  opacity: 0;
}
#works-scroll #sc-wrap {
  display: grid;
  place-items: center;
  gap: 10px;
  margin: -8px auto 0;
  position: fixed;
  top: auto;
  bottom: 48px;
}
#works-scroll #sc-line {
  position: relative;
  width: 1px;
  height: 24px;
  background-color: #eaf2a5;
  overflow: hidden;
}
#works-scroll p {
  font-size: 10px;
  line-height: 1.3;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-orientation: sideways;
}
#works-scroll #sc-line::before {
  content: "";
  position: absolute;
  top: -50%;
  width: 1px;
  height: 100%;
  background-color: #ffffff;
  animation: sclineanim 1.2s linear infinite;
}
@keyframes sclineanim {
  0% { top: -50%; }
  20% { top: 30%; height: 70%; }
  100% { top: 100%; height: 100%; }
}
#aboutwrap {
  position: relative;
  width: 100%;
  height: 100dvh;
}
#inner-wrap {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  overflow: visible;
}
#prof {
  width: 27%;
  height: 100%;
  display: flex;
  align-items: end;
  position: sticky;
}
#proftxtbox {
  width: 100%;
  padding: 0 44px 64px 48px;
  opacity: 0;
}
#prof p {
  font-size: 11.5px;
  line-height: 2em;
  letter-spacing: 0.04em;
}
#prof p::selection, h1::selection, h2::selection, .item-txt p::selection { background-color: #222222; }
.lr {
  width: auto;
  height: 100%;
  position: relative;
  display: block;
}
.vr {
  width: 1px;
  height: 100%;
  background-color: #aaaaaa;
  box-shadow: 0.4px 0px 0px 0px #eeeeee;
  position: absolute;
  top: 0;
  left: auto;
  right: 0;
}
#worksbox {
  position: relative;
  height: 100%;
  width: 73%;
  margin: 0 auto;
  text-align: center;
  overflow-y: visible;
  min-height: 0;
}
#aboutttl {
  position: fixed;
  width: 72%;
  margin-top: 4px;
  left: auto;
  right: 0;
  z-index: -1;
}
h1 {
  font-family: "fleur",sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 296px;
  text-align: right;
  line-height: 0.6;
  opacity: 0;
}
h1 .ch {
  text-align: center;
  display: inline-block;
  filter: drop-shadow(0 0 80px #ffffff);
  color: #ffffff;
  backface-visibility: hidden;
  /*animation: var(--anim,smoky-sub) 1s var(--delay,0.3s) both;*/
  animation: var(--anim,smoky-sub) var(--dur, 2.6s) calc(var(--delay,0.04s) + var(--group-delay,0s)) both;
  will-change: transform, filter, opacity;
}
h1:first-child {
  opacity: 0;
  --group-delay: 0s;
}
h1:last-child {
  opacity: 0;
  --group-delay: 0.4s;
}
h1:nth-of-type(1) .ch:nth-of-type(1) {
  width: 160px;
  margin-right: -28px;
}
h1:nth-of-type(2) .ch:nth-of-type(1) {
  width: 264px;
  margin-right: -36px;
}
@keyframes smoky-sub {
  0% {
    transform: translate3d(8rem,-40rem,0) rotate(-20deg) skewX(20deg) scale(2);
    filter: blur(30px) drop-shadow(0 0 80px #ffffff);
    color: #ffffff;
    opacity: 0;
  }
  82% {
    filter: blur(20px) drop-shadow(0 0 80px #ffffff);
    color: #ffffff;
    opacity: 0.4;
  }
  100% {
    filter: blur(0px) drop-shadow(0 0 0 #ffffff);
    color: #fcffd9;
    opacity: 0.4;
  }
}
@keyframes smoky-mirror-sub {
  0% {
    transform: translate3d(8rem,-40rem,0) rotate(-20deg) skewX(20deg) scale(2);
    filter: blur(30px) drop-shadow(0 0 80px #ffffff);
    color: #ffffff;
    opacity: 0;
  }
  82% {
    filter: blur(20px) drop-shadow(0 0 80px #ffffff);
    color: #ffffff;
    opacity: 0.4;
  }
  100% {
    filter: blur(0px) drop-shadow(0 0 0 #ffffff);
    color: #fcffd9;
    opacity: 0.4;
  }
}
#scrollwrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  z-index: 1;
}
#worksgp {
  position: relative;
  width: 100%;
  padding: 232px 64px 64px;
}
#worksgp ul {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 80px 0;
}
#worksgp ul li {
  position: relative;
  list-style-type: none;
  text-align: left;
  overflow: hidden;
}
#worksgp ul li .thumb-img {
  width: 100%;
  height: auto;
  /*background-color: #c2c2c2;*/
  will-change: transform, opacity;
  overflow: hidden;
  opacity: 0;
}
#worksgp .thumb-img .reveal-cover{
  position:absolute; inset:0; background:#fff;
  transform-origin:0% 50%;
  will-change:transform;
  pointer-events:none;
  z-index:1;
  transition:none !important;
}
#worksgp ul li .thumb-img img, #worksgp ul li .thumb-img video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: translateZ(0);
}
.thumb-b-port { width: 28%; height: auto; }
/*.thumb-b-port .thumb-img { aspect-ratio: 70/99; }*/
.thumb-b-port .thumb-img { aspect-ratio: 3/4; }
.thumb-s-port { width: 18%; height: auto; }
.thumb-s-port .thumb-img { aspect-ratio: 70/99; }
.thumb-b-squ { width: 28%; height: auto; }
.thumb-b-squ .thumb-img { aspect-ratio: 1/1; }
.thumb-s-squ { width: 18%; height: auto; }
.thumb-s-squ .thumb-img { aspect-ratio: 1/1; }
.thumb-vr-c { align-self: center; }
.thumb-vr-b { align-self: flex-end; }
.item-txt {
  display: block;
  padding: 16px 0 0 8px;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: normal;
  opacity: 0;
}
h2.work-ttl { font-size: 12px; }
.excerpt { padding: 1px 0 0; }
.excerpt p { font-size: 9px; letter-spacing: 0.1em; line-height: 1.3; }
#txt-other {
  position: relative;
  left: auto;
  right: 0px;
}
#txt-other p {
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-align: right;
}

@media screen and (max-width: 1140px) {
  #works-scroll #sc-wrap {
    top: 48px;
    bottom: auto;
  }
  #aboutwrap {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    min-height: 0;
  }
  #inner-wrap {
    height: 100%;
    display: block;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    min-height: 0;
  }
  #prof {
    width: 100%;
    height: auto;
    display: block;
    position: static;
    overflow: visible
  }
  #proftxtbox { width: 65%; padding: 136px 44px 32px 48px; }
  .lr { width: 100%; height: auto; }
  .vr {
    width: 100%;
    height: 1px;
    box-shadow: 0px 0.4px 0px 0px #eeeeee;
    left: 0;
  }
  #worksbox { height: auto; width: 100%; }
  #aboutttl {
    width: 100%;
    top: auto;
    bottom: 0;
    pointer-events: none;
  }
  #scrollwrap {
    height: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: auto;
  }
  #worksgp { padding: 0px 48px 200px; margin-top: -8px; }
  #worksgp ul { margin: 80px 0; }
  .reveal-cover{
    will-change: clip-path, opacity, transform;
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }
}
@media screen and (max-width: 800px) {
  h1 { font-size: 264px; }
  h1:nth-of-type(1) .ch:nth-of-type(1) {
    width: 143px;
    margin-right: -24px;
  }
  h1:nth-of-type(2) .ch:nth-of-type(1) {
    width: 235px;
    margin-right: -32px;
  }
}
@media screen and (max-width: 720px) {
  #works-scroll p { font-size: 9px; }
  #proftxtbox {
    position: relative;
    width: 100%;
    padding: 160px 44px 32px 48px;
    left: 50%;
    transform: translateX(-50%);
  }
  h1 { font-size: 184px; }
  h1:nth-of-type(1) .ch:nth-of-type(1) {
    width: 100px;
    margin-right: -17px;
  }
  h1:nth-of-type(2) .ch:nth-of-type(1) {
    width: 164px;
    margin-right: -22px;
  }
  .item-txt { padding: 16px 0 0 0; }
  h2.work-ttl { font-size: 11.5px; }
  .excerpt p { font-size: 8px; }
}
@media screen and (max-width: 540px) {
  #works-scroll { right: 20px; }
  #works-scroll #sc-wrap { top: 32px; }
  #proftxtbox { padding: 152px 18px 32px 20px; }
  #prof p { font-size: 11px; line-height: 1.8; }
  h1 { font-size: 136px; }
  h1:nth-of-type(1) .ch:nth-of-type(1) {
    width: 74px;
    margin-right: -12px;
  }
  h1:nth-of-type(2) .ch:nth-of-type(1) {
    width: 121px;
    margin-right: -16px;
  }
  #worksgp { padding: 24px 20px 136px; }
  #worksgp ul {
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 40px 24px;
    margin: 40px 0;
  }
  h2.work-ttl { font-size: 11px; }
  .thumb-b-port { width: 45%; }
  .thumb-b-squ { width: 45%; }
  .thumb-s-squ { width: 27%; }
  .item-txt { padding: 12px 0 0 0; }
}
@media screen and (max-width: 370px) {
  h1 { font-size: 116px; }
  h1:nth-of-type(1) .ch:nth-of-type(1) {
    width: 63px;
    margin-right: -10px;
  }
  h1:nth-of-type(2) .ch:nth-of-type(1) {
    width: 103px;
    margin-right: -14px;
  }
  h2.work-ttl { font-size: 10.5px; }
}