@import 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap';
html, body {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: fixed;
  overflow: hidden;
  font-size: clamp(0px,2.492211838vw,32px);
}

[plsportrait] {
  display: none;
}
@media (orientation: landscape) {
  [plsportrait] {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: all;
    touch-action: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2666666667);
    background-image: url(./plsportrait.svg);
    -webkit-backdrop-filter: blur(100px);
            backdrop-filter: blur(100px);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 33.3333333333%;
  }
}

* {
  padding: 0;
  margin: 0;
  touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
*::-webkit-scrollbar {
  display: none;
}

#content {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background-image: url(./background.png);
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

[hide] {
  position: fixed;
  opacity: 0.01;
  transform: scale(0.01);
  z-index: 0;
  left: 0;
  top: 0;
}

[img] {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
[img] img {
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}

[btn] {
  pointer-events: all;
  cursor: pointer;
  filter: contrast(1);
}

[btn=d] {
  pointer-events: none;
  cursor: unset;
  filter: contrast(0.5);
}

[section] {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
}

[section=title] {
  display: grid;
  justify-items: center;
  justify-content: center;
  grid-template-rows: 66.9546436285% 8.6393088553% 4.8596112311% 2.6997840173% 5.7595392369% 8.2073434125% 2.3038156947%;
  grid-template-columns: 1fr;
  width: 100vw;
  height: 100%;
}
[section=title] > [item] {
  grid-column: 1;
  height: 100%;
  width: 100%;
  display: flex;
  justify-items: center;
  align-items: center;
  justify-content: center;
}
[section=title] [item=firstView] {
  grid-row: 1;
}
[section=title] [item=firstView] img {
  width: 140%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}
[section=title] [item=startbtn] {
  grid-row: 2;
}
[section=title] [item=startbtn] img {
  height: 110%;
  -o-object-fit: contain;
     object-fit: contain;
}
[section=title] [item=tosbtn] {
  grid-row: 4;
}
[section=title] [item=tosbtn] img {
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
[section=title] [item=logo] {
  grid-row: 6;
}
[section=title] [item=logo] img {
  height: 100%;
}

[section=tos] {
  background-color: rgba(0, 0, 0, 0.2666666667);
  position: fixed;
  max-width: unset;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100%;
}
[section=tos] dialog {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 84.4236760125vw;
  height: 69.4744420446vh;
  border: solid 3px #501900;
  border-radius: 4px;
  background-color: white;
  filter: drop-shadow(4px 4px 1px rgba(0, 145, 121, 0.3764705882));
  z-index: 9999;
}
[section=tos] dialog * {
  pointer-events: all;
  touch-action: initial;
  -webkit-touch-callout: initial;
}
[section=tos] dialog [item=head] {
  width: 100%;
  height: 8.2901554404%;
  background-color: #501900;
  position: relative;
}
[section=tos] dialog [item=head] [item=attention] {
  width: 100%;
  height: 40%;
  max-height: 20px;
  position: absolute;
  inset: 0;
  margin: auto;
}
[section=tos] dialog [item=head] [item=attention] img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
[section=tos] dialog [item=head] [item=closebtn] {
  height: 50%;
  width: 10%;
  position: absolute;
  inset: 0;
  left: unset;
  margin: auto 0;
  right: 1%;
}
[section=tos] dialog [item=head] [item=closebtn] svg {
  height: 100%;
  width: 100%;
  left: 0;
}
[section=tos] dialog [item=content] {
  width: 100%;
  height: 91.7098445596%;
  position: relative;
  padding: 10px;
  padding-right: 10%;
  box-sizing: border-box;
}
[section=tos] dialog [item=content] [item=gradient] {
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 100%);
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 20%;
}
[section=tos] dialog [item=content] [scroll=area] {
  width: 100%;
  height: 100%;
  overflow: scroll;
  pointer-events: all;
  touch-action: initial;
  -webkit-touch-callout: initial;
}
[section=tos] dialog [item=content] [scroll=area] img {
  width: 100%;
  height: auto;
  margin-bottom: 25vw;
}
[section=tos] dialog [item=content] [scroll=base] {
  position: absolute;
  height: 90%;
  width: 4px;
  background-color: #E6E6E6;
  border-radius: 100px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  right: 12px;
  overflow: hidden;
}
[section=tos] dialog [item=content] [scroll=base] [scroll=bar] {
  position: relative;
  width: 100%;
  height: 50%;
  background-color: #000;
  border-radius: 100px;
}

[section=howto] {
  display: grid;
  grid-template-rows: 10.7631389489% 69.2584593233% 5.7595392369% 7.9193664507% 6.2994960403%;
}
[section=howto] [item=frame] {
  width: 100%;
  height: 100%;
  grid-row: 2;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-around;
  align-content: center;
}
[section=howto] [item=frame] [item=leftbtn], [section=howto] [item=frame] [item=rightbtn] {
  max-width: 160px;
  width: 12.46105919vw;
  max-height: 160px;
  height: 12.46105919vw;
  position: relative;
}
[section=howto] [item=frame] [item=leftbtn] img, [section=howto] [item=frame] [item=rightbtn] img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  margin: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
[section=howto] [item=frame] [item=inner] {
  width: 67.2897196262vw;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  border: solid #501900 4px;
  border-radius: 4px;
  filter: drop-shadow(4px 4px 1px rgba(0, 145, 121, 0.3764705882));
  position: relative;
  display: flex;
  flex-direction: row;
}
[section=howto] [item=frame] [item=inner] [item=wrapper] {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: 100%;
  overflow: hidden;
  display: flex;
  -moz-column-gap: 20%;
       column-gap: 20%;
  touch-action: initial;
  pointer-events: all;
}
[section=howto] [item=frame] [item=inner] [page] {
  display: grid;
  grid-template-rows: 5.6994818653% 19.4300518135% 2.688172043% 55.9585492228% 17.6165803109%;
  width: 67.2897196262vw;
  height: 100%;
  flex-shrink: 0;
  justify-items: center;
}
[section=howto] [item=frame] [item=inner] [page] [item=text] {
  height: 100%;
  width: 60%;
  -o-object-fit: contain;
     object-fit: contain;
  grid-row: 2;
}
[section=howto] [item=frame] [item=inner] [page] [item=image] {
  height: 100%;
  width: 90%;
  -o-object-fit: contain;
     object-fit: contain;
  grid-row: 4;
}
[section=howto] [item=frame] [item=inner] [page] [item=static] {
  height: 100%;
  width: 50%;
  -o-object-fit: contain;
     object-fit: contain;
  grid-row: 5;
}
[section=howto] [item=frame] [item=inner]::before {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  max-width: 990px;
  width: 77.1028037383vw;
  max-height: 280px;
  height: 21.8068535826vw;
  left: -4.9065420561vw;
  transform: translateY(-50%);
  background-image: url(./howto/head.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  content: "";
}
[section=howto] [item=frameSelectbtn] {
  grid-row: 4;
  width: 100%;
  height: 100%;
  position: relative;
}
[section=howto] [item=frameSelectbtn] img {
  position: absolute;
  inset: 0;
  margin: auto;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

[section=frameSelect] {
  display: grid;
  grid-template-rows: 10.7631389489% 69.2584593233% 5.7595392369% 7.9193664507% 6.2994960403%;
}
[section=frameSelect] [item=frame] {
  width: 100%;
  height: 100%;
  grid-row: 2;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-around;
  align-content: center;
}
[section=frameSelect] [item=frame] [item=leftbtn], [section=frameSelect] [item=frame] [item=rightbtn] {
  max-width: 160px;
  width: 12.46105919vw;
  max-height: 160px;
  height: 12.46105919vw;
  position: relative;
}
[section=frameSelect] [item=frame] [item=leftbtn] img, [section=frameSelect] [item=frame] [item=rightbtn] img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  margin: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
[section=frameSelect] [item=frame] [item=inner] {
  width: 67.2897196262vw;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  border: solid #501900 4px;
  border-radius: 4px;
  filter: drop-shadow(4px 4px 1px rgba(0, 145, 121, 0.3764705882));
  position: relative;
  display: grid;
  grid-template-rows: 6.7357512953% 5.9585492228% 1.5544041451% 68.9119170984% 16.8393782383%;
  justify-items: center;
}
[section=frameSelect] [item=frame] [item=inner] [item=wrapper] {
  grid-row: 4;
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
  width: 100%;
  height: 100%;
  justify-content: center;
}
[section=frameSelect] [item=frame] [item=inner] [item=wrapper] img {
  height: 100%;
  flex-shrink: 0;
}
[section=frameSelect] [item=frame] [item=inner] [item=wrapper] img:nth-child(1) {
  transform: scale(1);
}
[section=frameSelect] [item=frame] [item=inner] [item=wrapper] img:nth-child(2) {
  transform: scale(0.9);
}
[section=frameSelect] [item=frame] [item=inner] [item=wrapper] img:nth-child(3) {
  transform: scale(0.9);
}
[section=frameSelect] [item=frame] [item=inner] [item=wrapper] img:nth-child(4) {
  transform: scale(1);
}
[section=frameSelect] [item=frame] [item=inner] [item=wrapper] img:nth-child(5) {
  transform: scale(0.9);
}
[section=frameSelect] [item=frame] [item=inner] [item=wrapper] img:nth-child(6) {
  transform: scale(0.9);
}
[section=frameSelect] [item=frame] [item=inner] [item=wrapper] img:nth-child(7) {
  transform: scale(1);
}
[section=frameSelect] [item=frame] [item=inner] [item=frameDescriptions] {
  grid-row: 2;
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
}
[section=frameSelect] [item=frame] [item=inner] [item=frameDescriptions] img {
  width: 50%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
}
[section=frameSelect] [item=frame] [item=inner] [item=text2] {
  grid-row: 5;
  height: 50%;
  width: 70%;
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
  inset: 0;
  margin: auto;
}
[section=frameSelect] [item=frame] [item=inner]::before {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  max-width: 990px;
  width: 77.1028037383vw;
  max-height: 280px;
  height: 21.8068535826vw;
  left: -4.9065420561vw;
  transform: translateY(-50%);
  background-image: url(./select/head.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  content: "";
}
[section=frameSelect] [item=photobtn] {
  grid-row: 4;
  width: 100%;
  height: 100%;
  position: relative;
}
[section=frameSelect] [item=photobtn] img {
  position: absolute;
  inset: 0;
  margin: auto;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

[section=photo] {
  display: grid;
  grid-template-rows: 82.0014398848% 17.9985601152%;
}
[section=photo] #canvas {
  grid-row: 1;
  position: relative;
  background-color: rgba(0, 0, 0, 0.2666666667);
}
[section=photo] #canvas canvas {
  inset: 0;
  position: absolute;
  margin: auto;
}
[section=photo] [item=controls] {
  grid-row: 2;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: #501900;
  background-image: url(./photo/background.png);
  background-size: cover;
}
[section=photo] [item=controls] [item=backbtn], [section=photo] [item=controls] [item=switchbtn] {
  max-width: 200px;
  width: 15.5763239875vw;
  max-height: 200px;
  height: 15.5763239875vw;
  max-height: 100%;
}
[section=photo] [item=controls] [item=shootbtn] {
  max-width: 315px;
  width: 24.5327102804vw;
  max-height: 315px;
  height: 24.5327102804vw;
  max-height: 100%;
}
[section=photo] [item=controls] img {
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

[section=result] {
  display: grid;
  grid-template-rows: 4.3196544276% 1.9798416127% 2.339812815% 43.9164866811% 10.8711303096% 12.9589632829% 3.599712023% 8.9992800576% 8.9992800576% 1fr;
  grid-template-columns: 1fr;
  justify-items: center;
  justify-content: center;
  width: 100vw;
  height: 100%;
}
[section=result] [item] {
  grid-column: 1;
  height: 100%;
}
[section=result] img {
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
[section=result] [item=attention] {
  grid-row: 2;
}
[section=result] [item=resultImage] {
  grid-row: 4;
  border: solid #501900 4px;
  box-sizing: border-box;
  border-radius: 4px;
  pointer-events: all;
  z-index: 9999;
  -webkit-touch-callout: initial;
}
[section=result] [item=share] {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  justify-items: center;
  -moz-column-gap: 10vw;
       column-gap: 10vw;
  grid-row: 5;
}
[section=result] [item=share] a {
  height: 60%;
}
[section=result] [item=text] {
  grid-row: 6;
  height: 100%;
  width: 100%;
}
[section=result] [item=text] img {
  height: 100%;
  width: 100%;
}
[section=result] [item=toFrameSelectbtn] {
  grid-row: 8;
  height: 100%;
  width: 100%;
}
[section=result] [item=toFrameSelectbtn] img {
  height: 100%;
  width: 100%;
}
[section=result] [item=toPhotobtn] {
  grid-row: 9;
  height: 100%;
  width: 100%;
}
[section=result] [item=toPhotobtn] img {
  height: 100%;
  width: 100%;
}

[item=whitescreen] {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: white;
  opacity: 0;
  pointer-events: none;
}/*# sourceMappingURL=style.css.map */