@charset "UTF-8";
:root {
  --color_theme_blue: rgb(195, 228, 255);
  --color_theme_exit: #fcc;
  --color_theme_text: black;
  --color_theme_label: #eee;
  --color_theme_back: white;
}

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  box-sizing: border-box;
}

body {
  background: var(--color_theme_back);
  color: var(--color_theme_text);
}

.header {
  display: flex;
  justify-content: space-between;
  background: black;
  color: white;
  margin: 0 auto;
  z-index: 10;
}
.header__back {
  display: none;
  content: "";
  position: fixed;
  background: rgba(185, 185, 185, 0.297);
  width: 100vw;
  height: 100vh;
}
.header__left {
  display: flex;
}
.header__left__ham {
  width: 50px;
  height: 30px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.header__left__ham:hover {
  background: rgba(255, 255, 255, 0.397);
}
.header__left__ham span,
.header__left__ham span::before,
.header__left__ham span::after {
  content: "";
  line-height: 100%;
  display: block;
  width: 30px;
  height: 1px;
  background: white;
  transition: 0.3s;
}
.header__left__ham span {
  position: relative;
}
.header__left__ham span::before {
  position: absolute;
  top: -6px;
}
.header__left__ham span::after {
  position: absolute;
  top: 6px;
}
.header__left__ham__js span {
  transform: rotate(30deg);
}
.header__left__ham__js span::before {
  transform: translateY(6px);
}
.header__left__ham__js span::after {
  transform: translateY(-6px) rotate(-60deg);
}
.header__right {
  cursor: pointer;
  background: linear-gradient(70deg, rgb(0, 0, 129), rgb(141, 0, 24));
  height: 26px;
  width: 100px;
  text-align: center;
  position: relative;
  border: 2px solid #c21500;
  -o-border-image: linear-gradient(7deg, #00c210 0%, #ffc500 100%);
     border-image: linear-gradient(7deg, #00c210 0%, #ffc500 100%);
  border-image-slice: 1;
  border-radius: 4px;
}
.header__right:hover {
  opacity: 0.8;
}
.header__right p {
  line-height: 26px;
  color: white;
}

.main {
  display: flex;
  overflow: hidden;
}
.main__left {
  display: none;
  z-index: 2;
  width: 240px;
  min-width: 240px;
}
.main__left__back {
  content: "";
  position: fixed;
  background: rgba(185, 185, 185, 0.297);
  width: 100vw;
  height: 100vh;
  display: none;
}
.main__left__item {
  background: linear-gradient(0deg, black, gray);
}
.main__left__item img {
  width: 40px;
}
.main__left__item p {
  font-size: 20px;
  line-height: 40px;
  color: white;
}
.main__left__item:hover {
  background: linear-gradient(0deg, rgb(58, 58, 58), rgb(180, 180, 180));
}
.main__body__news {
  border-top: 1px solid #acacac;
}
.main__body__news__back {
  width: 100%;
  display: flex;
  justify-content: center;
  cursor: pointer;
  text-align: center;
  height: 10px;
  color: white;
  overflow: hidden;
  transition: 0.2s;
  position: relative;
}
.main__body__news__back p {
  transition: 0.4s;
}
.main__body__news__back::after {
  content: "";
  height: 3px;
  width: calc(100% - 10px);
  background: white;
  transform: scale(0);
  transition: 0.5s;
  position: absolute;
  top: calc(50% - 1.5px);
}
.main__body__news__back:hover {
  background: mediumaquamarine;
  color: white;
  overflow: inherit;
}
.main__body__news__back:hover p {
  background: mediumaquamarine;
  z-index: 1;
  padding: 0 10px;
  font-weight: bold;
  position: absolute;
  top: -5px;
  transform: scale(1.2);
  animation: main__body__news__back_p 0.4s;
}
@keyframes main__body__news__back_p {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.6);
  }
}
.main__body__news__back:hover::after {
  transform: scale(1);
}
.main__body__news__item {
  display: flex;
  border-bottom: 1px solid #acacac;
}
.main__body__news__item__side {
  flex: 1;
}
.main__body__news__item__num {
  font-size: 30px;
  width: 40px;
  border: none;
  background: transparent;
}
.main__body__news__item__img {
  min-width: 100px;
  overflow: hidden;
  aspect-ratio: 16/10;
}
.main__body__news__item__img img {
  width: 100px;
  -o-object-fit: cover;
     object-fit: cover;
}
.main__body__news__item__info {
  margin: 2px;
  height: 16px;
  overflow: hidden;
}
.main__body__news__item__info__jenre {
  background: #00c210;
  color: white;
  font-size: 11px;
  line-height: 11px;
  font-weight: bold;
  padding: 2px 4px;
  border-radius: 4px;
  width: 65px;
  vertical-align: top;
  display: inline-block;
  text-align: center;
}
.main__body__news__item__info__date {
  display: inline-block;
  font-size: 10px;
  line-height: 10px;
  padding: 3px;
  width: 60px;
  background: transparent;
  border: none;
  margin-right: 5px;
  vertical-align: top;
}
.main__body__news__item__title {
  width: 100%;
  border: none;
  background: transparent;
}
.main__body__news__item__bottom {
  display: flex;
  width: 100%;
}
.main__body__news__item__bottom__text1, .main__body__news__item__bottom__text2, .main__body__news__item__bottom__text3 {
  width: 50%;
  text-align: center;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
}
.main__body__news__item__bottom__text1:hover, .main__body__news__item__bottom__text2:hover, .main__body__news__item__bottom__text3:hover {
  color: white;
}
.main__body__news__item__bottom__text1 {
  color: #47c5c1;
}
.main__body__news__item__bottom__text1:hover {
  background: mediumturquoise;
}
.main__body__news__item__bottom__text2 {
  color: #c28ec2;
}
.main__body__news__item__bottom__text2:hover {
  background: plum;
}
.main__body__news__item__bottom__text3 {
  color: #bc7a00;
}
.main__body__news__item__bottom__text3:hover {
  background: orange;
}

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

.main__body__img__item {
  width: 180px;
  margin: 1px;
  box-shadow: 0 0 1px black;
  position: relative;
}

.main__body__img__item img {
  width: 100%;
}

.main__body__img__item__icon img {
  width: 14px;
  filter: hue-rotate(120deg);
}

.main__body__img__item__icon img:hover {
  filter: hue-rotate(210deg);
}

.main__body__img__item p {
  font-weight: bold;
  font-size: 13px;
  margin: 0;
}

.main__body__img__item span {
  font-size: 11px;
  line-height: 12px;
  padding: 0;
  margin: 0;
}

/* ここから顔面の処理 */
/* .face__fuck {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: 
} */
.main__right {
  margin: 0 auto;
}

.main__right__message {
  margin: 10px 0;
  width: 350px;
  background: #00c210;
  padding: 10px;
  position: relative;
  text-align: center;
}

.main__right__message p {
  text-align: left;
}

.main__right__message__item p {
  text-align: center;
  background: white;
  padding: 10px;
}

.main__right__message::after {
  content: "";
  position: absolute;
  bottom: -15px;
  width: 30px;
  height: 30px;
  transform: translateX(-15px) rotate(45deg);
  background: #00c210;
  z-index: -1;
}

.main__right__face {
  width: 350px;
  border: 1px solid black;
  text-align: center;
  padding-top: 50px;
  border-radius: 60% 60% 100% 100%;
  margin: 50px 0;
  background: #fde6c1;
}

.main__right__face__hair {
  position: relative;
  width: 100%;
}

.main__right__face__hair__item {
  position: absolute;
  top: -70px;
  height: 100px;
  width: 1px;
  background: black;
}

.main__right__face__eyebrows {
  display: flex;
  padding: 10px;
  justify-content: space-around;
}

.main__right__face__eyebrows__left {
  width: 100px;
  height: 50px;
  border-bottom: 3px solid black;
  transform: rotate(-5deg);
}

.main__right__face__eyebrows__right {
  width: 100px;
  height: 50px;
  border-bottom: 3px solid black;
  transform: rotate(5deg);
}

.main__right__face__eye {
  display: flex;
  padding: 20px;
  justify-content: space-around;
}

.main__right__face__eye__item__left {
  background: white;
  width: 100px;
  height: 50px;
  border: 1px solid black;
  border-radius: 60px 30px 40px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.main__right__face__eye__item__left__pupil {
  width: 40px;
  height: 40px;
  border: 10px solid black;
  border-radius: 50%;
}

.main__right__face__eye__item__right {
  background: white;
  width: 100px;
  height: 50px;
  border: 1px solid black;
  border-radius: 40px 60px 20px 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.main__right__face__eye__item__right__pupil {
  width: 40px;
  height: 40px;
  border: 10px solid black;
  border-radius: 50%;
}

.main__right__face__nose {
  width: 100%;
  display: flex;
  justify-content: center;
}

.main__right__face__nose__item {
  content: "";
  width: 3px;
  height: 10px;
  background: black;
}

.footer {
  background: #262626;
}

.footer__card {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 20px 0;
}

.footer__card__item {
  text-align: center;
  margin: 5px 0;
  width: 300px;
  border: 5px solid white;
  padding: 10px;
  background: gray;
  display: inline-block;
}

.footer__card__item p {
  font-size: 14px;
  color: black;
  color: white;
}

.footer__link {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}

.footer__link__item {
  width: 150px;
}

.footer__link__item h3 {
  font-size: 15px;
  padding: 10px 0;
  color: white;
}

.footer__link__item li {
  list-style: none;
}

.footer__link__item p {
  color: white;
  font-size: 11px;
  line-height: 25px;
}

.footer__link__item p:hover {
  background: rgba(0, 0, 0, 0.437);
}

.footer__copyright {
  color: white;
  text-align: center;
  padding: 40px;
}

.form__upload__sel {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.form__upload__sel input[type=radio] {
  display: none;
}

/* #sel1:checked ~.sel1,
#sel2:checked ~.sel2,
#sel4:checked ~.sel4,
#sel5:checked ~.sel5,
#sel3:checked ~.sel3 {
  background: rgb(143, 211, 250);
} */
.form__upload__sel label {
  display: block;
  border: 1px solid black;
  background: white;
  font-size: 16px;
  min-width: 100px;
  max-width: 150px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.form__upload__sel label:hover {
  background: rgba(0, 0, 0, 0.206);
}

.form__upload__sel label p {
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding: 0;
}

.form__upload__sel label p::-webkit-scrollbar {
  display: none;
}

.form__upload__sel label p small {
  display: inline-block;
}

.form__upload__sel__copy {
  position: absolute;
  display: inline-block;
  top: 0;
  left: 0;
  background: #a1c56a;
  transform: translateY(-25px);
  transition: 0.3s;
  color: white;
  cursor: pointer;
}

.form__upload__sel__copy:hover {
  background: #b6d28b;
}

.form__upload__sel__delete {
  position: absolute;
  top: 0;
  right: 0;
  transform: translateY(-25px);
  transition: 0.3s;
  background: #ae5b5b;
  color: white;
  cursor: pointer;
}

.form__upload__sel__delete:hover {
  background: #cc8282;
}

#file {
  display: block;
  width: 100%;
  padding: 30px 20px;
  border: 1px solid blue;
  cursor: pointer;
}

.file__submit {
  width: 100%;
  padding: 15px;
  display: block;
  cursor: pointer;
}

.file__reload {
  width: 100%;
  padding: 15px;
  display: block;
  text-align: center;
  cursor: pointer;
  color: black;
  background: rgb(143, 211, 250);
}

.file__reload:hover {
  opacity: 0.8;
}

.main__db__message {
  padding: 10px;
  margin: 10px;
  max-width: calc(100vw - 20px);
  border: 1px solid black;
  background: rgba(0, 0, 0, 0.1);
}
.main__db__message div {
  max-height: 20vh;
  overflow: scroll;
  background: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  line-height: 200%;
}
.main__db__message label {
  display: inline-block;
  width: auto;
  background: white;
  cursor: pointer;
}
.main__db__message label:hover {
  background: transparent;
}
.main__db__message input[type=checkbox] {
  display: none;
}
.main__db__message input[type=checkbox]:checked ~ div {
  max-height: none;
}
.main__db__message input[type=checkbox]:checked ~ label {
  font-size: 0;
}
.main__db__message input[type=checkbox]:checked ~ label::before {
  font-size: 16px;
  content: "縮小する";
}
.main__db__message__success {
  background: rgba(229, 254, 192, 0.676);
  color: green;
  border: 1px solid green;
}
.main__db__message__error {
  background: rgba(255, 209, 209, 0.6980392157);
  color: red;
  border: 1px solid red;
}


.chk {
  display: none;
}
.chk:checked + header > .header > .header__left > .header__left__ham span {
  transform: rotate(30deg);
}
.chk:checked + header > .header > .header__left > .header__left__ham span::before {
  transform: translateY(6px);
}
.chk:checked + header > .header > .header__left > .header__left__ham span::after {
  transform: translateY(-6px) rotate(-60deg);
}
.chk:checked ~ main > .main > .main__left {
  display: block;
}

.main__body {
  width: 100%;
}
.main__body__wrap {
  width: 100%;
  display: flex;
}
.main__body__left {
  flex: 1;
}
.main__body__left__title {
  display: flex;
  justify-content: space-between;
  height: 40px;
  align-items: center;
}
.main__body__left__title__btns > button {
  font-size: 14px;
  line-height: 30px;
  padding: 0 10px;
  background: var(--color_theme_back);
  color: var(--color_theme_text);
  border: 1px solid var(--color_theme_text);
  cursor: pointer;
}
.main__body__left__title__btns > button:hover {
  filter: invert(1);
}
.main__body__right {
  display: none;
  flex: 1;
  margin: 8px;
  border: 1px solid var(--color_theme_blue);
  border-radius: 8px;
  position: relative;
  background: var(--color_theme_back);
  overflow: hidden;
}
.main__body__right > input[type=checkbox] {
  display: none;
}
.main__body__right p {
  font-size: 12px;
  color: #aaa;
}
.main__body__right__header {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  padding: 8px;
  background: var(--color_theme_blue);
  display: flex;
  z-index: 1;
}
.main__body__right__header__left__btns {
  display: flex;
}
.main__body__right__header__left__btns input[type=text], .main__body__right__header__left__btns button {
  font-size: 14px;
  line-height: 30px;
  width: 40px;
  background: var(--color_theme_back);
  border: none;
  margin-right: 2px;
}
.main__body__right__header__left__btns button {
  font-size: 10px;
  background: #eee;
  cursor: pointer;
}
.main__body__right__header__left__btns button:hover {
  filter: brightness(110%);
}
.main__body__right__header__right {
  display: flex;
  justify-content: right;
  width: 100%;
}
.main__body__right__header__right button {
  height: 24px;
  padding: 0 8px;
  color: var(--color_theme_text);
  background: var(--color_theme_exit);
  border: none;
  cursor: pointer;
}
.main__body__right__header__right button:hover {
  filter: brightness(110%);
}
.main__body__right__form {
  margin-top: 64px;
}
.main__body__right__wrap {
  padding: 8px;
  max-height: calc(100vh - 30px - 20px);
  overflow-y: scroll;
}
.main__body__right__wrap section {
  width: 100%;
  display: inline-block;
  padding-bottom: 20px;
}
.main__body__right__wrap section select {
  font-size: 14px;
  border: none;
  padding: 8px 0;
  background: var(--color_theme_label);
  color: var(--color_theme_text);
  border-bottom: 2px solid var(--color_theme_blue);
}
.main__body__right__wrap section input[type=text], .main__body__right__wrap section input[type=url], .main__body__right__wrap section input[type=date] {
  width: 100%;
  font-size: 14px;
  line-height: 30px;
  border: none;
  background: var(--color_theme_label);
  color: var(--color_theme_text);
  border-bottom: 2px solid var(--color_theme_blue);
  margin: 2px;
}
.main__body__right__wrap section input[type=url] {
  font-size: 12px;
  line-height: 30px;
}
.main__body__right__wrap section > .main__body__right__wrap__img {
  justify-content: center;
}
.main__body__right__wrap section > .main__body__right__wrap__img div {
  flex: 1;
  padding: 2px;
}
.main__body__right__wrap section > .main__body__right__wrap__img div img {
  width: 100%;
}
.main__body__right__wrap section > div {
  display: flex;
}
.main__body__right__wrap section > div input[type=url] {
  width: auto;
  flex: 1;
}
.main__body__right__wrap section > div button {
  font-size: 12px;
  line-height: 30px;
  padding: 0 10px;
  background: var(--color_theme_blue);
  border: none;
  cursor: pointer;
  margin: 2px 0;
}
.main__body__right__wrap section > div button:hover {
  filter: brightness(110%);
}
.main__body__right__wrap section textarea {
  display: inline-block;
  width: 100%;
  font-size: 14px;
  line-height: 20px;
  border: none;
  color: var(--color_theme_text);
  background: var(--color_theme_label);
  border-bottom: 2px solid var(--color_theme_blue);
}
.main__body__right__wrap__lbl2 {
  width: 49% !important;
}
.main__body__right__wrap__chk label {
  border-bottom: 2px solid var(--color_theme_blue);
  padding: 5px;
  background: var(--color_theme_label);
}
.main__body__right__wrap button {
  font-size: 16px;
  line-height: 34px;
  padding: 0 10px;
  border: none;
  margin: 2px 0;
}
.main__body__right__wrap button#btnUpdate {
  background: #eee;
  color: #999;
}
.main__body__right__wrap button#btnDelete {
  background: var(--color_theme_exit);
  color: var(--color_theme_text);
  cursor: pointer;
}
.main__body__right__wrap button#btnDelete:hover {
  filter: brightness(110%);
}
.main__body__right-chk {
  display: none;
}
.main__body__right-chk:checked + .main__body__right {
  display: inline-block;
}
.main__body__right > #chk_wait {
  transform: translateY(100px);
}
.main__body__right > #chk_wait:checked ~ .main__body__right__wrap {
  filter: blur(2px);
}
.main__body__right > #chk_wait:checked ~ .main__body__right__wait {
  display: flex;
}
.main__body__right__wait {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.437);
  z-index: 2;
}
.main__body__right__wait p {
  font-size: 30px;
  color: white;
  position: relative;
  display: flex;
  justify-content: center;
}
.main__body__right__wait p span {
  display: inline-block;
  position: absolute;
  top: 40px;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  overflow: hidden;
}
.main__body__right__wait p span::before {
  content: "";
  position: absolute;
  display: inline-block;
  width: 28px;
  height: 28px;
  background: var(--color_theme_blue);
  border-radius: 14px;
  animation: main__body__right__wait-span 1.5s linear infinite;
}
@keyframes main__body__right__wait-span {
  0% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1.1);
  }
}

#update_flg {
  display: none;
}
#update_flg:checked ~ .main__body__right__wrap #btnSubmit {
  background: var(--color_theme_blue);
  color: black;
  cursor: pointer;
}
#update_flg:checked ~ .main__body__right__wrap #btnSubmit:hover {
  filter: brightness(110%);
}

#new_flg {
  display: none;
}
#new_flg:checked ~ .main__body__right__wrap #btnDelete {
  background: #eee;
  color: #999;
  cursor: default;
}

.popup_message {
  position: fixed;
  z-index: 200;
  top: 70px;
  right: 0;
  background: #e4ffad;
  width: 300px;
  max-width: 100vw;
  animation: popup_message 6s forwards;
  display: none;
}
@keyframes popup_message {
  0% {
    display: flex;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
  }
}
.popup_message_btn {
  width: 40px;
  background: gray;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: white !important;
  cursor: pointer;
}
.popup_message > p {
  padding: 20px;
  line-height: 16px;
  font-size: 16px;
  flex: 1;
}
.popup_message_bln {
  display: none;
}

.popup_fileUpload {
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.437);
  z-index: 101;
}
.popup_fileUpload__back {
  position: absolute;
  width: 100%;
  height: 100%;
}
.popup_fileUpload__wrap {
  position: relative;
  border: 1px solid black;
  padding: 20px;
  z-index: 1;
  background: var(--color_theme_blue);
  width: 80vw;
}
.popup_fileUpload__wrap p {
  font-size: 20px;
  text-align: center;
}
.popup_fileUpload__wrap input[type=file] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  padding: 20px;
}

#chk_fileUpload {
  display: none;
}
#chk_fileUpload:checked ~ .popup_fileUpload {
  display: flex;
}
#chk_fileUpload:checked ~ .popup_fileUpload ~ * {
  filter: blur(2px);
}

.popup_fileUpTable {
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 102;
}
.popup_fileUpTable__back {
  position: absolute;
  width: 100%;
  height: 100%;
}
.popup_fileUpTable__wrap {
  position: relative;
  border: 1px solid black;
  padding: 20px;
  width: 85vw;
  background: white;
  z-index: 1;
  overflow: hidden;
}
.popup_fileUpTable__wrap__table {
  width: 100%;
  max-height: 80vh;
  margin-bottom: 41px;
  overflow: scroll;
}
.popup_fileUpTable__wrap__table table {
  border-collapse: collapse;
}
.popup_fileUpTable__wrap__table table tbody {
  font-size: 12px;
}
.popup_fileUpTable__wrap__table td {
  white-space: nowrap;
}
.popup_fileUpTable__wrap__btns {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin: 10px 0;
  z-index: 10;
}
.popup_fileUpTable__wrap__btns button {
  font-size: 14px;
  line-height: 30px;
  padding: 0 10px;
  background: white;
  color: black;
  border: 1px solid black;
  cursor: pointer;
}
.popup_fileUpTable__wrap__btns button:hover {
  filter: invert(100%);
}
.popup_fileUpTable__wrap__wait {
  display: none;
  justify-content: center;
  align-items: flex-end;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 11;
  background-color: rgba(195, 228, 255, 0.437);
}
.popup_fileUpTable__wrap__wait p {
  font-size: 30px;
  color: black;
  background: rgba(255, 255, 255, 0.4);
  position: relative;
  display: flex;
  justify-content: center;
}
.popup_fileUpTable__wrap__wait p span {
  display: inline-block;
  position: absolute;
  top: -40px;
  width: 34px;
  height: 34px;
  border-radius: 17px;
  overflow: hidden;
}
.popup_fileUpTable__wrap__wait p span::before {
  content: "";
  position: absolute;
  display: inline-block;
  width: 32px;
  height: 32px;
  background: blue;
  border-radius: 16px;
  animation: main__body__right__wait-span 1.5s linear infinite;
}

#chk_fileUpElm {
  display: none;
}
#chk_fileUpElm:checked ~ .popup_fileUpTable {
  display: flex;
}
#chk_fileUpElm:checked ~ .popup_fileUpTable ~ * {
  filter: blur(2px);
}

#chk_fileUpElm__wait {
  display: none;
}
#chk_fileUpElm__wait:checked ~ .popup_fileUpTable > .popup_fileUpTable__wrap > .popup_fileUpTable__wrap__wait {
  display: flex;
}

@media screen and (max-width: 767px) {
  .main {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 600px) {
  .main__body__right {
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
  }
}
@media screen and (max-width: 479px) {
  .main__left {
    position: fixed;
    min-width: 100%;
  }
  .main__right__message {
    width: calc(100vw - 20px);
  }
  .main__right__face {
    width: calc(100vw - 20px);
  }
}
.dImg {
  margin: auto;
  overflow: hidden;
  border: none;
}
.dImg__main {
  background: var(--color_theme_back);
  z-index: 1;
  height: calc(100svh - 38px);
  max-width: 1200px;
  padding-top: 36px;
  position: relative;
}
.dImg__main__header {
  width: 100%;
  position: absolute;
  top: 0;
  display: flex;
}
.dImg__main__header > p {
  text-align: center;
  line-height: 36px;
  font-size: 24px;
  font-weight: bold;
  background: var(--color_theme_blue);
  flex: 1;
}
.dImg__main__header__close {
  width: 72px;
  height: 36px;
  background: var(--color_theme_exit);
  text-align: center;
  line-height: 36px;
  font-size: 24px;
  cursor: pointer;
}
.dImg__main__header__close:hover {
  filter: brightness(110%);
}
.dImg__main__wrap {
  display: flex;
  justify-content: center;
  height: calc(100svh - 36px - 38px);
}
.dImg__main__wrap__left {
  height: calc(100svh - 36px - 38px);
  flex: 1;
}
.dImg__main__wrap__left__search {
  padding: 0 10px;
}
.dImg__main__wrap__left__search input[type=text] {
  width: 100%;
  font-size: 14px;
  line-height: 30px;
  border: none;
  background-color: #eee;
  border-bottom: 2px solid var(--color_theme_blue);
  margin: 2px;
}
.dImg__main__wrap__left__wrap {
  display: flex;
  justify-content: center;
  max-height: calc(100svh - 72px - 38px - 10px);
  position: relative;
  overflow-y: scroll;
  padding-bottom: 10px;
}
.dImg__main__wrap__left__list {
  display: flex;
  flex-wrap: wrap;
}
.dImg__main__wrap__left__item {
  width: 100px;
  height: 100px;
  border: 3px solid transparent;
}
.dImg__main__wrap__left__item input[type=radio] {
  /* 透明度0 */
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  opacity: 0;
  /* ブラウザのデフォルトのスタイルを削除 */
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  /* レイアウトから無視 */
  position: fixed;
}
.dImg__main__wrap__left__item input[type=radio]:focus-visible + label {
  box-shadow: 0 0 0 2px blue;
}
.dImg__main__wrap__left__item input[type=radio]:checked + label {
  outline: -webkit-focus-ring-color auto 1px;
}
.dImg__main__wrap__left__item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.dImg__main__wrap__right {
  width: 300px;
  padding: 4px;
}
.dImg__main__wrap__right__detail img {
  width: 100%;
}
.dImg__main__wrap__right__detail input[type=text] {
  width: 100%;
}
.dImg__main__wrap__right__detail > div {
  display: flex;
}
.dImg__main__wrap__right__detail > div button {
  margin: 10px auto;
  font-size: 14px;
  line-height: 30px;
  padding: 0 10px;
  background: white;
  color: black;
  border: 1px solid black;
  cursor: pointer;
}
.dImg__main__wrap__right__detail > div button:first-child {
  flex: 1;
  margin-right: 4px;
}
.dImg__main__wrap__right__detail > div button:hover {
  filter: invert(1);
}
.dImg__main__wrap__right #chk-dImg_edit {
  display: none;
}
.dImg__main__wrap__right #chk-dImg_edit + p {
  display: block;
}
.dImg__main__wrap__right #chk-dImg_edit + p + .dImg__main__wrap__right__detail {
  display: none;
}
.dImg__main__wrap__right #chk-dImg_edit:checked + p {
  display: none;
}
.dImg__main__wrap__right #chk-dImg_edit:checked + p + .dImg__main__wrap__right__detail {
  display: block;
}
.dImg__main__wrap__file {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(195, 228, 255, 0.6);
  display: none;
  justify-content: center;
  align-items: center;
}
.dImg__main__wrap__file p {
  font-size: 24px;
  font-weight: bold;
}
.dImg__main__wrap__file p span {
  display: inline-block;
}
.dImg__main__wrap__file input[type=file] {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.dImg__main__wrap #chk_drag {
  display: none;
}
.dImg__main__wrap #chk_drag:checked + .dImg__main__wrap__file {
  display: flex;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color_theme_blue: #466;
    --color_theme_exit: #544;
    --color_theme_text: #ddd;
    --color_theme_label: #222;
    --color_theme_back: black;
  }
  img {
    filter: brightness(80%);
  }
  #new_flg {
    display: none;
  }
  #new_flg:checked ~ .main__body__right__wrap #btnDelete {
    background: #000;
    color: #999;
    cursor: default;
  }
  .main__body__news {
    border-top: 1px solid #333;
  }
  .main__body__news__item {
    border-bottom: 1px solid #333;
  }
  .main__body__news__item__info__jenre {
    filter: brightness(60%);
  }
  .main__body__news__item__bottom__text1 {
    color: #277;
  }
  .main__body__news__item__bottom__text1:hover {
    background: #277;
    color: black;
  }
  .main__body__news__item__bottom__text2 {
    color: #757;
  }
  .main__body__news__item__bottom__text2:hover {
    background: #757;
    color: black;
  }
  #btnSubmit,
  #btnDelete {
    color: #999;
    background: #000;
  }
  #update_flg:checked ~ .main__body__right__wrap #btnSubmit {
    color: #ddd;
  }
  .main__body__right__header__left__btns button {
    background: #222;
    color: var(--color_theme_text);
  }
  .dImg__main img {
    background: gray;
  }
}