/* Figma renewal layer. The original theme files continue to own camera motion. */

html,
body,
.koma,
.koma_1 {
  background: #fff;
}

.koma_1 {
  isolation: isolate;
}

/* Keep every panel edge above artwork while preserving the original line drawing. */
.flame {
  position: relative;
  z-index: 20;
  pointer-events: none;
}

.flame .cls-1 {
  fill: none;
}

.flame .cls-1.cls-2 {
  animation: none;
}

.koma {
  animation:
    koma_1_m 1s ease 2.5s alternate forwards,
    koma_2_m 1s ease 9s alternate forwards,
    koma_3_m 1s ease 17s alternate forwards,
    koma_4_m 1s ease 26s alternate forwards,
    koma_overview_m 1.2s ease 32.5s forwards;
}

@media screen and (min-width: 761px) {
  .koma {
    --closed-index-reserve: clamp(14px, 2.333vw, 28px);
    height: calc(100dvh - var(--closed-index-reserve));
  }

  .koma_1 {
    width: min(100vw, calc(100dvh - var(--closed-index-reserve)));
    height: min(100vw, calc(100dvh - var(--closed-index-reserve)));
  }
}

@keyframes koma_overview_m {
  from {
    transform: translate(20vw, -45vh) scale(1.75, 1.75);
  }
  to {
    transform: translate(0, 0) scale(1, 1);
  }
}

@media screen and (max-width: 760px) {
  @keyframes koma_overview_m {
    from {
      transform: translate(36vw, -20vh) scale(1.7, 1.7);
    }
    to {
      transform: translate(0, 0) scale(1, 1);
    }
  }
}

.manga-panel {
  position: absolute;
  z-index: 3;
  aspect-ratio: 1;
  overflow: hidden;
  background: transparent;
  container-type: inline-size;
  opacity: 1;
}

/* Align Figma's square compositions to the edges they touch in each frame. */
.panel-1 {
  top: .1%;
  left: 52.95%;
  width: 47.05%;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 15.8% 100%);
}

.panel-1-tone {
  position: absolute;
  z-index: 1;
  top: .107%;
  left: 46.72%;
  width: 53.17%;
  height: 47.06%;
  background-color: #fff;
  background-image: radial-gradient(circle, rgba(17, 17, 17, .34) 0 max(.6px, .11vmin), transparent max(.8px, .133vmin));
  background-size: min(8px, .89vmin) min(8px, .89vmin);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 25.65% 100%);
  pointer-events: none;
  opacity: 0;
  animation: tone-in .35s ease 3s forwards;
}

.panel-2 {
  top: .1%;
  left: .1%;
  width: 47.05%;
  clip-path: polygon(0 0, 93.1% 0, 100% 24%, 100% 100%, 0 100%);
}

.panel-3 { top: 52%; left: 60.35%; width: 39.55%; overflow: visible; }
.panel-4 { top: 52.3%; left: 6.2%; width: 45%; overflow: visible; }

.panel-object {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.panel-background {
  position: absolute;
  z-index: 1;
  display: block;
  background-color: #fff;
  pointer-events: none;
  opacity: 0;
}

.panel-background > img {
  display: block;
  width: 100%;
  height: 100%;
}

.p2-background {
  top: .107%;
  left: .107%;
  width: 57.289%;
  height: 47.06%;
  background-image:
    linear-gradient(90deg, transparent 0 49.8%, rgba(17, 17, 17, .08) 50%, transparent 50.2%),
    linear-gradient(0deg, transparent 0 49.8%, rgba(17, 17, 17, .08) 50%, transparent 50.2%),
    repeating-linear-gradient(135deg, rgba(17, 17, 17, .045) 0 max(.6px, .11vmin), transparent max(.6px, .11vmin) min(18px, 2vmin));
  background-size: min(96px, 10.667vmin) min(96px, 10.667vmin), min(96px, 10.667vmin) min(96px, 10.667vmin), auto;
  clip-path: polygon(0 0, 76.25% 0, 100% 100%, 0 100%);
}

.p3-background {
  top: 49.826%;
  left: 60.35%;
  width: 39.55%;
  height: 45.34%;
  background-image: repeating-conic-gradient(
    from -7.5deg at 32% 73%,
    rgba(17, 17, 17, .07) 0deg 5deg,
    transparent 5deg 15deg
  );
}

.p1-person-before,
.p1-person-after,
.p2-person,
.p3-person,
.p4-person-left,
.p4-person-right {
  z-index: 3;
}

.p4-person-left,
.p4-person-right {
  inset: auto;
  top: -47.9%;
  left: -22%;
  width: 153.6%;
  height: 153.6%;
}

.p1-person-before,
.p1-person-after {
  inset: auto;
  top: -1%;
  left: 8%;
  width: 108%;
  height: 108%;
}

.p1-bubble {
  inset: auto;
  top: 1%;
  left: 56%;
  width: 42%;
  height: 56%;
}

.p1-bubble,
.p2-bubble,
.p3-bubble {
  z-index: 4;
}

.p2-person {
  inset: auto;
  top: 24.61%;
  left: 29.45%;
  width: 17.7%;
  height: 27.68%;
  z-index: 4;
}

.p2-bubble {
  inset: auto;
  top: 1%;
  left: 65%;
  width: 32%;
  height: 55%;
}

.p3-person {
  inset: auto;
  top: 9.1%;
  left: 0;
  width: 100%;
  height: 100%;
}

.p3-bubble {
  inset: auto;
  top: -5.497%;
  right: 0;
  left: auto;
  width: 70%;
  height: 114.607%;
}

.p3-hanamaru {
  inset: auto;
  top: -1%;
  left: 1.6%;
  width: 70.2%;
  height: 70.2%;
  z-index: 2;
}

.p2-board,
.p3-board {
  z-index: 1;
}

.concentration-lines {
  position: absolute;
  z-index: 2;
  top: 49.826%;
  left: .107%;
  display: block;
  width: 57.289%;
  height: 50.067%;
  pointer-events: none;
  opacity: 0;
}

.vertical-line {
  position: absolute;
  z-index: 5;
  margin: 0;
  color: #111;
  font-family: "ten-mincho-antique", "Noto Serif JP", "BIZ UDPMincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: var(--speech-size, 5.6cqw);
  font-weight: 400;
  font-kerning: normal;
  font-feature-settings: normal;
  font-synthesis: none;
  line-height: 1.16;
  letter-spacing: 0;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  white-space: nowrap;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.speech-copy {
  position: absolute;
  z-index: 5;
  box-sizing: border-box;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  justify-content: center;
  gap: .45em;
  padding: .5em;
  font-size: var(--speech-size);
  pointer-events: none;
}

.speech-copy .vertical-line {
  position: static;
  flex: 0 0 auto;
  font-size: inherit;
}

.p1-copy {
  top: 2.6%;
  left: 71.1%;
  width: 26%;
  height: 48.8%;
}

.p2-copy {
  top: 2.6%;
  left: 66.2%;
  width: 29.7%;
  height: 46.2%;
}

.p3-copy {
  top: -4%;
  right: 1%;
  left: auto;
  width: 32%;
  height: 95%;
  justify-content: flex-start;
  gap: .45em;
  padding: .5em;
}

.latin-vertical {
  text-orientation: upright;
}

.p1-logo-mark {
  position: relative;
  display: inline-block;
  inline-size: 6.6em;
  block-size: 1.25em;
  overflow: visible;
  vertical-align: top;
}

.p1-logo-mark img {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: auto;
  max-width: none;
  height: 6.6em;
  filter: none;
  transform: translate(-50%, -50%);
  transform-origin: center;
}

.panel-1 {
  --speech-size: 4.74cqw;
  --speech-pitch: 8cqw;
}

.panel-2 {
  --speech-size: 5.36cqw;
  --speech-pitch: 9.1cqw;
}

.panel-3 {
  --speech-size: 5.6cqw;
  --speech-pitch: 9.6cqw;
}

.panel-4 {
  --speech-size: 5.6cqw;
  --speech-pitch: 9.5cqw;
}

.p4-line-1 { top: 13.5%; left: 80%; }
.p4-line-2 { top: 13.5%; left: calc(80% - var(--speech-pitch)); }

.board-copy {
  position: absolute;
  z-index: 2;
  inset: 0;
  color: #fff;
  font-family: "Noto Sans JP", "BIZ UDPGothic", "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 5.4cqw;
  font-weight: 600;
  font-kerning: normal;
  font-feature-settings: "palt" 1;
  line-height: 1.18;
  letter-spacing: .01em;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  opacity: 0;
}

.board-copy span {
  position: absolute;
  top: calc(var(--y) / 311 * 100%);
  left: calc(var(--x) / 311 * 100%);
  white-space: nowrap;
}

.board-copy .board-small {
  font-size: 75%;
}

.p1-person-before { animation: before-bow-sequence 1.05s ease 3.55s forwards; }
.p1-person-after { animation: bow-in .42s ease 4.12s forwards; }
.p1-bubble { animation: object-pop .45s ease 4.65s forwards; }
.p1-line-1 { animation: text-in .4s ease 5.2s forwards; }
.p1-line-2 { animation: text-in .4s ease 5.75s forwards; }
.p1-line-3 { animation: text-in .4s ease 6.3s forwards; }

.p2-background { animation: background-in .55s ease 9.45s forwards; }
.p2-board { animation: board-in .5s ease 10.2s forwards; }
.panel-2 .board-copy { animation: text-in .4s ease 10.8s forwards; }
.p2-person { animation: object-rise .45s ease 11.5s forwards; }
.p2-bubble { animation: object-pop .45s ease 12.2s forwards; }
.p2-line-1 { animation: text-in .4s ease 12.9s forwards; }
.p2-line-2 { animation: text-in .4s ease 13.25s forwards; }
.p2-line-3 { animation: text-in .4s ease 13.6s forwards; }

.p3-background { animation: background-in .55s ease 17.45s forwards; }
.p3-board,
.panel-3 .board-copy { animation: object-fade .45s ease 18.2s forwards; }
.p3-person { animation: object-rise .45s ease 19s forwards; }
.p3-bubble { animation: object-pop .45s ease 19.8s forwards; }
.p3-line-1 { animation: text-in .4s ease 20.6s forwards; }
.p3-line-2 { animation: text-in .4s ease 21.1s forwards; }
.p3-line-3 { animation: text-in .4s ease 21.6s forwards; }
.p3-hanamaru { animation: hanamaru-in .6s cubic-bezier(.2, .85, .25, 1.2) 22.4s forwards; transform-origin: 50% 50%; }

.p4-line-1 { animation: text-in .4s ease 27.2s forwards; }
.p4-line-2 { animation: text-in .4s ease 28s forwards; }
.concentration-lines { animation: concentration-in .5s ease 28.8s forwards; transform-origin: 72% 46%; }
.p4-person-left { animation: person-left-in .45s ease 29.6s forwards; }
.p4-person-right { animation: person-right-in .45s ease 30.6s forwards; }

.vertical-line {
  opacity: 0;
}

@keyframes object-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes background-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes tone-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes object-rise {
  from { opacity: 0; transform: translateY(7%) scale(.97); }
  to { opacity: 1; transform: none; }
}

@keyframes before-bow-sequence {
  0% { opacity: 0; transform: translateY(3%) scale(.98); }
  22%, 62% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(4%) scaleY(.96); }
}

@keyframes bow-in {
  0% { opacity: 0; transform: translateY(-5%) scaleY(1.06); }
  68% { opacity: 1; transform: translateY(1%) scale(1.025, .985); }
  100% { opacity: 1; transform: none; }
}

@keyframes object-pop {
  from { opacity: 0; transform: scale(.92); }
  to { opacity: 1; transform: none; }
}

@keyframes board-in {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to { opacity: 1; clip-path: inset(0); }
}

@keyframes text-in {
  from { opacity: 0; transform: translateY(-.35em); }
  to { opacity: 1; transform: none; }
}

@keyframes concentration-in {
  from { opacity: 0; transform: scale(1.08); }
  to { opacity: 1; transform: none; }
}

@keyframes hanamaru-in {
  from { opacity: 0; transform: scale(.55) rotate(-8deg); }
  70% { opacity: 1; transform: scale(1.06) rotate(1deg); }
  to { opacity: 1; transform: none; }
}

@keyframes person-left-in {
  from { opacity: 0; transform: translateX(-8%); }
  to { opacity: 1; transform: none; }
}

@keyframes person-right-in {
  from { opacity: 0; transform: translateX(8%); }
  to { opacity: 1; transform: none; }
}