@charset "UTF-8";
:root {
  --js-blur: 0px; /* ぼかし 0px以上 */
  --js-brightness: 100%; /* 明るさ */
  --js-contrast: 100%; /* コントラスト */
  --js-grayscale: 0%; /* グレースケール */
  --js-hue_rotate: 0deg; /* 色相 */
  --js-invert: 0%; /* 反転 */
  --js-opacity: 100%; /* 透明度 */
  --js-saturate: 100%; /* 彩度 */
  --js-sepia: 0%; /* セピア */
}

.main {
  width: 100%;
}

.setting {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.setting input[type=range] {
  display: block;
  width: 100%;
}

.setting div {
  min-width: 33.3333333333%;
  background: var(--bg0-color);
}

.img_popup {
  display: none;
}
.img_popup + .fileUpload {
  display: none;
}
.img_popup + .fileUpload > .file {
  display: block;
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  border: 1px solid var(--main-text-color);
  background: var(--bg2-color);
  cursor: pointer;
}
.img_popup:checked + .fileUpload {
  display: block;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(128, 128, 128, 0.4);
}

.popup_btn {
  background-color: var(--bg2-color);
  padding: 0 6px;
  border-radius: 12px;
  line-height: 24px;
  display: inline-block;
  cursor: pointer;
}
.popup_btn:hover {
  background-color: var(--bg2-hover);
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  height: 600px;
}

.container__item {
  padding: 10px;
}

.container__item div {
  box-shadow: 0 0 4px var(--main-text-color);
  display: flex;
  width: 256px;
  /* height: 256px; */
  overflow: hidden;
  pointer-events: none;
}

.container__item div img {
  width: 256px;
  pointer-events: none;
  /* height: 256px; */
}

.custom_img {
  filter: var(--filter);
  pointer-events: none;
  /* filter: blur(var(--js-blur)) brightness(var(--js-brightness)) contrast(var(--js-contrast)) grayscale(var(--js-grayscale)) hue-rotate(var(--js-hue_rotate)) invert(var(--js-invert)) opacity(var(--js-opacity)) saturate(var(--js-saturate)) sepia(var(--js-sepia)); */
  /* transform: translate(0, 50px); */
}

input[type=number] {
  width: 40px;
} /*# sourceMappingURL=caracter.css.map */
.kawaii {
  display: none;
}

.kawaiibtn {
  display: inline-block;
  transform: scale(0.2);
}

#kawaii {
  display: none;
}

#kawaii:checked + .kawaii {
  display: inline;
}

@media screen and (max-width: 572px) {
  .container__item {
    position: absolute;
    margin: 0 auto;
    opacity: 1;
    transition: 0.3s;
  }
  .custom_img {
    opacity: 1;
  }
  .custom_p {
    opacity: 1;
  }
  .original_img {
    opacity: 0;
  }
  .original_p {
    opacity: 0;
  }
  .container:active .custom_img {
    opacity: 0;
  }
  .container:active .custom_p {
    opacity: 0;
  }
  .container:active .original_img {
    opacity: 1;
  }
  .container:active .original_p {
    opacity: 1;
  }
}
@media screen and (max-width: 467px) {
  .setting div {
    min-width: 50%;
  }
}/*# sourceMappingURL=caracter.css.map */