.js-camera,
.js-analysis {
  transition:opacity .5s;
}
.js-camera.is-hidden,
.js-analysis:not(.is-show) {
  opacity:0;
  pointer-events: none;
}
body:has(.js-analysis.is-show) .ols__header > .header__main__container {
  transform: translateY(-100%);
}

.photo-container {
  display: grid;

  grid-template-rows: 1fr auto 1fr;
  place-items: center;
}
@media (min-width: 744px) {
  .photo-container {
    align-content: start;

    grid-template-rows: unset;
    row-gap: 32px;
  }
}
.photo-container > .txt {
  color: var(--color-text);
  font-size: 6.4vw;
  font-weight: 500;
  line-height: 1.5;
}
@media (min-width: 744px) {
  .photo-container > .txt {
    font-size: 24px;
  }
}
.photo-container > .photo-box {
  width: 100%;
}
@media (min-width: 744px) {
  .photo-container > .photo-box {
    width: 560px;
  }
}
.photo-container .photo-box {
  display: grid;
  position: relative;
}
.photo-container .photo-box > * {
  grid-area: 1/1;
}
.photo-container .photo-box > .photo-grid {
  position: absolute;
  top: 7.5187969925%;
  left: 26.4%;
  width: 22.1333333333%;
}
.photo-container .photo-grid {
  display: grid;
}
.photo-container .photo-grid > * {
  grid-area: 1/1;
}
.photo-container .photo-grid > .gradient {
  mix-blend-mode: overlay;
}
.photo-container .photo-grid > .points {
  fill: var(--color-white);
  stroke-width: 0;
}
.photo-container .photo-grid > .line,
.photo-container .photo-grid > .points {
  will-change: filter;
  filter: drop-shadow(0 0 0.2666666667vw #fff);
}
@media (min-width: 744px) {
  .photo-container .photo-grid > .line,
  .photo-container .photo-grid > .points {
    filter: drop-shadow(0 0 2px #fff);
  }
}
.photo-container .photo-shine {
  position: relative;
}
.photo-container .photo-shine > .shine {
  position: absolute;
  border: solid 0.2666666667vw currentcolor;
  border-radius: 50%;
  background-color: var(--color-white);
  color: var(--color-white);

  aspect-ratio: 1;
  filter: drop-shadow(0 0 0.2666666667vw currentcolor) drop-shadow(0 0 0.5333333333vw currentcolor);
  will-change: filter;
}
@media (min-width: 744px) {
  .photo-container .photo-shine > .shine {
    border-width: 1.5px;

    filter: drop-shadow(0 0 1.5px currentcolor) drop-shadow(0 0 3px currentcolor);
  }
}
.photo-container .photo-shine > .shine.-pink {
  color: var(--color-pale-pink);
}
.photo-container .photo-shine > .shine.-yellow {
  color: var(--color-pale-yellow);
}
.photo-container .photo-shine > .shine.-blue {
  color: var(--color-pale-blue);
}
.photo-container .photo-shine.-first > .shine:nth-child(1) {
  top: 15.4135338346%;
  left: 61.3333333333%;
  width: 0.8%;
}
.photo-container .photo-shine.-first > .shine:nth-child(2) {
  top: 29.6992481203%;
  left: 28%;
  width: 0.8%;
}
.photo-container .photo-shine.-first > .shine:nth-child(3) {
  top: 47.7443609023%;
  left: 39.4666666667%;
  width: 0.5333333333%;
}
.photo-container .photo-shine.-first > .shine:nth-child(4) {
  top: 54.5112781955%;
  left: 65.0666666667%;
  width: 0.5333333333%;
}
.photo-container .photo-shine.-first > .shine:nth-child(5) {
  top: 77.8195488722%;
  left: 52.5333333333%;
  width: 0.2666666667%;
}
.photo-container .photo-shine.-second > .shine:nth-child(1) {
  top: 12.030075188%;
  left: 35.2%;
  width: 0.2666666667%;
}
.photo-container .photo-shine.-second > .shine:nth-child(2) {
  top: 18.4210526316%;
  left: 58.6666666667%;
  width: 0.5333333333%;
}
.photo-container .photo-shine.-second > .shine:nth-child(3) {
  top: 31.954887218%;
  left: 48.5333333333%;
  width: 1.0666666667%;
}
.photo-container .photo-shine.-second > .shine:nth-child(4) {
  top: 48.8721804511%;
  left: 59.2%;
  width: 0.2666666667%;
}
.photo-container .photo-shine.-second > .shine:nth-child(5) {
  top: 60.5263157895%;
  left: 35.7333333333%;
  width: 0.5333333333%;
}
.photo-container .photo-shine.-second > .shine:nth-child(6) {
  top: 75.5639097744%;
  left: 54.9333333333%;
  width: 0.8%;
}
.photo-container .photo-shine.-third > .shine:nth-child(1) {
  opacity: 0.7;
  top: 9.022556391%;
  left: 16.8%;
  width: 1.3333333333%;
}
.photo-container .photo-shine.-third > .shine:nth-child(2) {
  opacity: 0.5;
  top: 56.3909774436%;
  left: 20.8%;
  width: 1.3333333333%;
}
.photo-container .photo-shine.-third > .shine:nth-child(3) {
  opacity: 0.5;
  top: 77.8195488722%;
  right: 24%;
  width: 1.4666666667%;
}
.photo-container .photo-shine.-fourth > .shine:nth-child(1) {
  opacity: 0.5;
  top: 36.8421052632%;
  right: 16.2666666667%;
  width: 1.2%;
}
.photo-container .photo-shine.-fourth > .shine:nth-child(2) {
  opacity: 0.4;
  top: 72.5563909774%;
  right: 9.0666666667%;
  width: 1.2%;
}
.photo-container .photo-shine.-fourth > .shine:nth-child(3) {
  opacity: 0.6;
  top: 80.4511278195%;
  left: 19.4666666667%;
  width: 1.0666666667%;
}
.photo-container .photo-shine.-fifth > .shine:nth-child(1) {
  opacity: 0.6;
  top: 18.4210526316%;
  left: 4.8%;
  width: 1.4666666667%;
}
.photo-container .photo-shine.-fifth > .shine:nth-child(2) {
  opacity: 0.7;
  top: 36.8421052632%;
  left: 23.4666666667%;
  width: 1.3333333333%;
}
.photo-container .photo-shine.-fifth > .shine:nth-child(3) {
  opacity: 0.5;
  top: 83.8345864662%;
  left: 5.3333333333%;
  width: 1.4666666667%;
}
.photo-container .photo-shine.-sixth > .shine:nth-child(1) {
  opacity: 0.7;
  top: 6.3909774436%;
  right: 10.6666666667%;
  width: 1.4666666667%;
}
.photo-container .photo-shine.-sixth > .shine:nth-child(2) {
  opacity: 0.5;
  top: 15.4135338346%;
  right: 20%;
  width: 1.0666666667%;
}
.photo-container .photo-shine.-sixth > .shine:nth-child(3) {
  opacity: 0.5;
  top: 42.1052631579%;
  left: 16.5333333333%;
  width: 1.0666666667%;
}

/*
* analysis.css
*
*/
/* --------------------------------
  analysis
-------------------------------- */
.anime-container {
  display: grid;
  position: fixed;
  z-index: 1000;
  background-color: var(--color-bg);

  inset: 0;
}
.anime-container > .mask {
  position: relative;
  z-index: 1;
  background-color: var(--color-bg);

  grid-area: 1/1;
}
.anime-container > .photo-container {
  height: 100%;

  grid-area: 1/1;
}
@media (min-width: 744px) {
  .anime-container > .photo-container {
    padding-top: 7.7333333333%;
  }
}