/* イニシャル hide */
body {
  background-color: black;
}

header,
#header_bar,
main,
#scene_top,
#scene_hello,
#scene_home,
#scene_manual,
#scene_stamp,
#scene_stamp_site,
#scene_stamp_museum,
#scene_stamp_event,
#scene_stamp_seal,
#scene_egg,
#scene_egg_card,
#scene_you,
#scene_you_data,
#scene_you_stamp,
#scene_code_camera,
footer,
#footer_menu,
#footer_bar,
aside,
#notice_lets_stamp {
  display: none;
}

object {
  display: block;
}


/* 遅延読み込みフェード */
.lazyfade {
  opacity: 0;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

.lazyfade.lazyloaded {
  opacity: 1;
}

.bg_dbrown {
  background-color: #42210b;
}

.bg_lbrown {
  background-color: #9d814f;
}

.bg_spink {
  background-color: #f0685d;
}

.bg_white {
  background-color: white;
}

.content {
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
}

#header_bar {
  position: relative;
  z-index: 10;
  filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.25));
}

body.fixed {
  background-color: #f0685d;
}

body.fixed main {
  padding-bottom: 35dvw;
}

body.fixed footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100svw;
  z-index: 99;
}



dialog:focus,
button:focus,
input:focus,
textarea:focus {
  outline: none;
}

#dialog_lets_stamp {
  border: none;
  background: transparent;
  width: calc(570 / 800 * 100%);
  padding: 0 0 10dvh;
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.7);
}

#dialog_blocker::backdrop {
  background: none;
}
#dialog_blocker {
  border: none;
  background: transparent;
}


#dialog_scan_2dcode {
  border: none;
  background: transparent;
  width: 90dvw;
  height: 90dvw;
  padding: 0 0 0dvh;
}

#scan_video,
#scan_canvas {
  width: 100%;
  height: 100%;
}

#dialog_levelup {
  border: none;
  background: transparent;
  overflow:hidden;
  width: 100dvw;
  padding: 0 0 10dvh;
}

@keyframes popup {


  0% {
    opacity: 0;
    transform: scale(0.5) rotate(-360deg);
  }
  60% {
    opacity: 1;
    transform: scale(1.0) rotate(0deg);
  }
  80% {
    opacity: 1;
    transform: scale(0.95) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes shrinkDisappear {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.7);
  }
}

.popup {
  animation: popup 1s ease-out forwards;
}
.disappear {
  /* animation: shrinkDisappear 0.6s ease-in forwards; */
}



.spacerL {
  padding-bottom: 3rem;
}






/* -------- デバッグ */
#debug {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: rgba(255, 255, 255, 0.8);
  font-size: 0.7rem;
  margin: 0.5rem;
  padding: 0.5rem;
}

#debug button,
#debug_log button {
  margin: 0.25rem 0.25rem 0 0;
}

#debug_log {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999;
  background-color: rgba(255, 255, 255, 0.8);
  font-size: 0.7rem;
  margin: 0.5rem;
  padding: 0.5rem;
}

#debug,
#debug_log {
  display: none;
}

/* -------- Swiper */
#swiper_egg_diary,
#swiper_you_jomon {
  width: 87.5%;
}

#swiper_stamp_you,
#swiper_stamp_site,
#swiper_stamp_museum,
#swiper_stamp_event {
  overflow: visible;
}

#swiper_stamp_you .swiper-slide,
#swiper_stamp_site .swiper-slide,
#swiper_stamp_museum .swiper-slide,
#swiper_stamp_event .swiper-slide {
  position: relative;
  width: 100%;
}

#swiper_stamp_you .swiper-slide object,
#swiper_stamp_site .swiper-slide object,
#swiper_stamp_museum .swiper-slide object,
#swiper_stamp_event .swiper-slide object {
  width: 80%;
  margin: 0 auto;
}

#swiper_egg_diary .swiper-slide object,
#swiper_you_jomon .swiper-slide object,
#swiper_stamp_you .swiper-slide object,
#swiper_stamp_site .swiper-slide object,
#swiper_stamp_museum .swiper-slide object,
#swiper_stamp_event .swiper-slide object {
  /* pointer-events: none; */
}

#swiper_egg_diary .swiper-slide p,
#swiper_stamp_you .swiper-slide p,
#swiper_stamp_site .swiper-slide p,
#swiper_stamp_museum .swiper-slide p,
#swiper_stamp_event .swiper-slide p {
  /* display: none; */
  /* pointer-events: none; */
  /* display: block; */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#swiper_you_jomon .swiper-slide p {
  /* display: none; */
  /* pointer-events: none; */
  /* display: block; */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70%;
}

#swiper_stamp_you .stamp_seal,
#swiper_stamp_site .stamp_seal,
#swiper_stamp_museum .stamp_seal,
#swiper_stamp_event .stamp_seal {
  position: absolute;
  top: 0;
  left: 10%;
  width: 80%;
  height: 100%;
  z-index: 99;
}

#stamp_seal_site,
#stamp_seal_museum,
#stamp_seal_event {
  display: none;
}