A:link {font-size:20px;color:#3177fe;text-decoration:none;}
 A:visited {font-size:20px;color:#3177fe;text-decoration:none;}
 A:hover {font-size:20px;color:#ff0000;text-decoration:none;}
 A:active {font-size:20px;color:#ff0000;text-decoration:none;}
 body { font-size:16px;text-decoration:none;
        color:#1f1010;
        background-image:url("");
        background-color:#ffc9c9;
        background-position:top left;
        background-attachment:fixed;
        background-repeat:no-repeat; }

.switch {
  position: relative;
}

.switch_label {
  position: relative; 
  display: flex;
  align-items: center;
}

input[type='checkbox'] {
  position: absolute;
  width: 0;
  height: 0;
}

.base {
  width: 28px;
  border-radius: 8px;
  height: 16px;
  background-color: #ddd;

}

.title {
  margin-left: 2px;
}

.circle {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background-color: white;
  transition: 0.5s;
}

input:checked ~ .base {
  background-color: rgb(119, 134, 254);
}

input:checked ~ .circle {
  transform: translateX(100%);
  background-color: blue;
  transition: 0.5s;
}

.blur10 {
  -webkit-filter: blur(10px);
  filter: blur(10px);
  -webkit-transition: 0.8s;
  transition: 0.8s;
}

.flash:active {
  -webkit-transition: all 0.1s; transition: all 0.1s;
  opacity: 0.1;  filter: brightness(170%);  contrast(130%);
 }

.zoom:active {
  animation: zoomIn 1.5s ease-in-out forwards;
  transform: scale(1,1);
}

@keyframes zoomIn {
  100% {
    transform: scale(1.8,1.8);
  }
}

.glow:active {
  -webkit-transition: all 0.1s; transition: all 0.1s;
  opacity: 1.5;  filter: brightness(120%);  contrast(150%);
 }

.shadow {
  -webkit-transition: all 1.5s; transition: all 1.5s;
  opacity: 0.8;  filter: brightness(50%);filter: contrast(500%);
  width: 700px;height: 600px;
  object-fit: cover;
  object-position: 0px 0px; 
}

.sizechg {
  width: 700px;height: 800px;
}

.shadow:hover {
  -webkit-transition: all 1.5s; transition: all 1.5s;
  opacity: 1.0;  filter: brightness(100%);filter: contrast(100%);
  width: 700px;height: 800px;
}

.shadow:active {
  -webkit-transition: all 0.0s; transition: all 0.0s;
  opacity: 1.0;  filter: brightness(150%);filter: contrast(200%);
  animation: zumzum2b 0.4s alternate ease-out;
  display: inline-block;
  overflow: hidden;
  width: 700px;height: 800px;
}

@keyframes zumzum2b {
  0% {
    transform: translateY(-17px);
  }
  10% {
    transform: translateY(-17px);
  }
  60% {
    transform: translateY(-10px);
  }
  70% {
    transform: translateY(-8px);
  }
  80% {
    transform: translateY(-4px);
  }
  90% {
    transform: translateY(-2px);
  }
  100% {
    transform: translateY(0px);
  }
}

.yurayura {
  -webkit-transition: all 1.5s; transition: all 1.5s;
  opacity: 1.0;  filter: brightness(100%);filter: contrast(100%);
}

.yurayura:hover {
  -webkit-transition: all 1.5s; transition: all 1.5s;
  animation: yura 1.5s infinite alternate ease-out;
  display: inline-block;
}

@keyframes yura {
  0% {
    transform: translateY(-10px);
  }
  10% {
    transform: translateX(2px);
  }
  60% {
    transform: translateY(10px);
  }
  70% {
    transform: translateX(-2px);
  }
  80% {
    transform: translateY(-4px);
  }
  90% {
    transform: translateX(1px);
  }
  100% {
    transform: translateX(0px);
    transform: translateY(0px);
  }
}

.yurayura:active {
  -webkit-transition: all 1.0s; transition: all 1.0s;
  opacity: 1.0;  filter: brightness(100%);  contrast(100%);
 }

.yurayura-f {
  -webkit-transition: all 0.5s; transition: all 0.5s;
  opacity: 1.0;  filter: brightness(100%);filter: contrast(100%);
}

.yurayura-f:hover {
  -webkit-transition: all 1.0s; transition: all 1.0s;
  animation: yura 1.5s infinite alternate ease-out;
  display: inline-block;
}

.yurayura-f:active {
  -webkit-transition: all 0.3s; transition: all 0.3s;
  opacity: 0.5;  filter: brightness(150%);  contrast(200%);
  animation: shoot 0.3s alternate ease-out;
  display: inline-block;
  overflow: hidden;
 }

@keyframes shoot {
  0% {
    transform: scale(1.1,1.1);
  }
  40% {
    transform: scale(0.7,0.7);
  }
  100% {
    transform: scale(1.0,1.0);
  }
}

.window {
  -webkit-transition: all 0.5s; transition: all 0.5s;
  opacity: 1.0;  filter: brightness(100%);filter: contrast(100%);
  width: 650px;height: 250px;
  object-fit: none;
  object-position: 0px -550px; 
}

.window2 {
  -webkit-transition: all 2.0s; transition: all 2.0s;
  opacity: 1.0;  filter: brightness(100%);filter: contrast(100%);
  width: 650px;height: 800px;
  object-fit: none;
  object-position: 0px 0px; 
}

.window2:hover {
  -webkit-transition: all 2.0s; transition: all 2.0s;
  opacity: 1.0;  filter: brightness(100%);filter: contrast(100%);
  width: 650px;height: 800px;
  object-fit: none;
  object-position: 0px 0px; 
}

.yurayura2 {
  -webkit-transition: all 0.5s; transition: all 0.5s;
  opacity: 1.0;  filter: brightness(100%);filter: contrast(100%);
  width: 760px;height: 240px;
  object-fit: none;
  object-position: 0px -150px; 
}

.yurayura2:hover {
  -webkit-transition: all 1.8s; transition: all 1.8s;
  width: 760px;height: 800px;
  object-fit: none;
  object-position: 0px 0px; 
  animation: yura2 2.0s infinite alternate ease-out;
  display: inline-block;
}

@keyframes yura2 {
  0% {
    transform: translateY(10px);
  }
  10% {
    transform: translateX(-2px);
  }
  60% {
    transform: translateY(-8px);
  }
  70% {
    transform: translateX(2px);
  }
  80% {
    transform: translateY(2px);
  }
  90% {
    transform: translateX(-1px);
  }
  100% {
    transform: translateX(0px);
    transform: translateY(0px);
  }
}

.wnd20230401 {
  -webkit-transition: all 0.5s; transition: all 0.5s;
  opacity: 1.0;  filter: brightness(100%);filter: contrast(100%);
  width: 760px;height: 300px;
  object-fit: none;
  object-position: 0px -80px; 
}

.wnd20230401:active {
  -webkit-transition: all 1.5s; transition: all 1.5s;
  opacity: 1.0;  filter: brightness(100%);filter: contrast(100%);
  width: 760px;height: 550px;
  object-fit: none;
  object-position: 0px -215px; 
}

.txtinimg {
    position: relative;
    display: flex;
    width: 100vw;
    overflow: hidden;
    opacity: 1.0;  filter: brightness(100%);  contrast(100%);
    color:#fe7979;
  font-weight: bold; /*太字に*/
  font-size: 1.5em;/*サイズ2倍*/
  font-family :Quicksand, sans-serif;/*Google Font*/
}

.txtinimg cm1 {
  position: absolute;
  top: 2%;
  left: 1%;
  -ms-transform: translate(0%,0%);
  -webkit-transform: translate(0%,0%);
  transform: translate(0%,0%);
  margin:0;
  padding:0;
  opacity: 0.0;
  }

.txtinimg:hover cm1 {
  -webkit-transition: all 1.5s; transition: all 1.5s;
  opacity: 1.0;
  }

.nclass{
  -webkit-transition: all 0.5s; transition: all 0.5s;
  opacity: 1.0;  filter: brightness(100%);filter: contrast(100%);
  width: 700px;
  height: 800px;
  object-fit: none;
  position: relative;
}

.yurarel{
  -webkit-transition: all 0.5s; transition: all 0.5s;
  opacity: 1.0;  filter: brightness(100%);filter: contrast(100%);
  width: 700px;
  height: 800px;
  object-fit: none;
  position: relative;
}

.yurarel:hover {
  -webkit-transition: all 1.5s; transition: all 1.5s;
  animation: yura 1.5s infinite alternate ease-out;
  display: inline-block;
}

.suke01{
  -webkit-transition: all 1.0s; transition: all 1.0s;
  opacity: 1.0;
  position: absolute;
  top: 0px;
  left: 0px;
}

.suke01:hover {
  -webkit-transition: all 0.0s; transition: all 0.0s;
  position: absolute;
  top: 0px;
  left: 0px;
  animation: sukeru forwards 10.0s alternate ease-in-out;
}

.suke02{
  -webkit-transition: all 0.5s; transition: all 0.5s;
  opacity: 1.0;
  position: absolute;
  top: 0px;
  left: 0px;
}

.suke03{
  -webkit-transition: all 1.0s; transition: all 1.0s;
  opacity: 1.0;
  position: absolute;
  top: 0px;
  left: 0px;
}

.suke03:active {
  -webkit-transition: all 0.0s; transition: all 0.0s;
  position: absolute;
  top: 0px;
  left: 0px;
  animation: sukeru forwards 60.0s alternate ease-in-out;
}

@keyframes sukeru {
  50% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.3;
  }
  100% {
    opacity: 0.0;
  }
}

.touka100{
  -webkit-transition: all 3.0s; transition: all 3.0s;
  opacity: 1.0;
  position: absolute;
  top: 0px;
  left: 0px;
}

.touka90{
  -webkit-transition: all 1.0s; transition: all 1.0s;
  opacity: 0.9;
  position: absolute;
  top: 0px;
  left: 0px;
}

.touka60{
  -webkit-transition: all 5.0s; transition: all 5.0s;
  opacity: 0.5;
  position: absolute;
  top: 0px;
  left: 0px;
}

.touka30{
  -webkit-transition: all 3.0s; transition: all 3.0s;
  opacity: 0.3;
  position: absolute;
  top: 0px;
  left: 0px;
}

.touka00{
  -webkit-transition: all 8.0s; transition: all 8.0s;
  opacity: 0.0;
  position: absolute;
  top: 0px;
  left: 0px;
}


.gupogupo {
  -webkit-transition: all 1.5s; transition: all 1.5s;
  opacity: 1.0;  filter: brightness(100%);filter: contrast(100%);
}

.gupogupo:hover {
  -webkit-transition: all 0.5s; transition: all 0.5s;
  opacity: 1.0;  filter: brightness(115%);filter: contrast(115%);
  animation: zumzum 0.28s alternate infinite;
  display: inline-block;
  overflow: hidden;
}

.gupogupo2 {
  -webkit-transition: all 1.5s; transition: all 1.5s;
  opacity: 1.0;  filter: brightness(100%);filter: contrast(100%);
}

.gupogupo2:hover {
  -webkit-transition: all 0.5s; transition: all 0.5s;
  opacity: 1.0;  filter: brightness(100%);filter: contrast(100%);
  animation: zumzum 0.16s alternate infinite;
  display: inline-block;
  overflow: hidden;
}

@keyframes zumzum {
  0% {
    transform: translateY(-17px) scaleY(1.012) rotateX(2deg);
    transform-origin:bottom;
  }
  10% {
    transform: translateY(-17px) scaleY(1.009) rotateX(1.8deg);
    transform-origin:bottom;
  }
  50% {
    transform: translateY(-10px) scaleY(1.005) rotateX(0.8deg);  
    transform-origin:bottom;
  }
  60% {
    transform: translateY(-8px) scaleY(1.003) rotateX(0.6deg);
    transform-origin:bottom;
  }
  70% {
    transform: translateY(-4px) scaleY(1.002) rotateX(0.4deg);
    transform-origin:bottom;
  }
  80% {
    transform: translateY(-2px) scaleY(1.001) rotateX(0.2deg);
    transform-origin:bottom;
  }
  90% {
    transform: translateY(-2px) scaleY(1) rotateX(0.2deg);
    transform-origin:bottom;
  }
  95% {
    transform: translateY(-2px) scaleY(0.995) rotateX(0.2deg);
    transform-origin:bottom;
  }
  100% {
    transform: translateY(0px) scaleY(1) rotateX(0deg);
    transform-origin:bottom;
  }
}

.gupugupu:hover {
  -webkit-transition: all 0.2s; transition: all 0.2s;
  opacity: 1.0;  filter: brightness(100%);filter: contrast(100%);
  animation: sukosuko 0.52s ease-in-out alternate infinite;
  display: inline-block;
  overflow: hidden;
}

@keyframes sukosuko {
  0% {
    transform: translateY(0px) scale(1.00);
    transform-origin: center;
  }
  40% {
    transform: scale(0.992);
    transform-origin: center;
  }
  50% {
    transform: translateY(1px) scale(0.995);
    transform-origin: center;
  }
  80% {
    transform: scale(0.991);
    transform-origin: center;
  }
  100% {
    transform: translateY(0px) scale(0.999);
    transform-origin: center;
  }
}

.gupugupu2:hover {
  -webkit-transition: all 0.2s; transition: all 0.2s;
  opacity: 1.0;  filter: brightness(100%);filter: contrast(100%);
  animation: zupozupo 0.38s ease-in-out alternate infinite;
  display: inline-block;
  overflow: hidden;
}

@keyframes zupozupo {
  0% {
    transform: translateY(0px) scale(1.00);
    transform-origin: center;
  }
  40% {
    transform: scale(0.990);
    transform-origin: center;
  }
  50% {
    transform: translateY(1px) scale(0.970);
    transform-origin: center;
  }
  60% {
    transform: scale(0.991);
    transform-origin: center;
  }
  100% {
    transform: translateY(0px) scale(0.999);
    transform-origin: center;
  }
}

.zumuzumu {
  -webkit-transition: all 1.5s; transition: all 1.5s;
  opacity: 1.0;  filter: brightness(100%);filter: contrast(100%);
}

.zumuzumu:hover {
  -webkit-transition: all 1.5s; transition: all 1.5s;
  animation: zumzum2b 0.2s infinite alternate ease-out;
  display: inline-block;
}

.zumuzumu:active {
  -webkit-transition: all 1.5s; transition: all 1.5s;
  opacity: 1.0;  filter: brightness(115%);filter: contrast(115%);
  animation: bokoboko 0.4s alternate infinite;
  display: inline-block;
  overflow: hidden;
}

.yurayura1{
  -webkit-transition: all 0.5s; transition: all 0.5s;
  opacity: 1.0;  filter: brightness(100%);filter: contrast(100%);
  width: 700px;
  height: 800px;
  object-fit: none;
  position: relative;
}

.yurayura1:hover {
  -webkit-transition: all 1.5s; transition: all 1.5s;
  animation: yura 1.5s infinite alternate ease-out;
  display: inline-block;
}

.yurayura1:active {
  -webkit-transition: all 1.0s; transition: all 1.0s;
  opacity: 1.0;  filter: brightness(100%);  contrast(100%);
 }


.zumuzumu2 {
  -webkit-transition: all 1.0s; transition: all 1.0s;
  opacity: 1.0;  filter: brightness(100%);filter: contrast(100%);
  width: 700px;
  height: 800px;
  object-fit: none;
  position: relative;
}

.zumuzumu2:hover {
  -webkit-transition: all 1.5s; transition: all 1.5s;
  opacity: 1.0;  filter: brightness(100%);filter: contrast(100%);
  animation: zumzum 0.18s alternate infinite;
  display: inline-block;
  overflow: hidden;
}

.zumuzumu2:active {
  -webkit-transition: all 0.0s; transition: all 0.0s;
  opacity: 1.0;  filter: brightness(100%);filter: contrast(100%);
  animation: bikun 0.1s infinite alternate ease-out;
  display: inline-block;
  overflow: hidden;
}

@keyframes bikun {
  0% {
    transform: translateY(-100px);
  }
  5% {
    transform: translateX(5px);
  }
  10% {
    transform: translateX(-5px);
  }
  15% {
    transform: translateX(5px);
  }
  20% {
    transform: translateX(-5px);
  }
  25% {
    transform: translateX(0px);
    transform: translateY(-70px);
  }
  35% {
    transform: translateY(-100px);
  }
  45% {
    transform: translateY(-70px);
  }
  100% {
    transform: translateX(0px);
    transform: translateY(0px);
  }
}

.zumuzumu3 {
  -webkit-transition: all 1.0s; transition: all 1.0s;
  opacity: 1.0;  filter: brightness(100%);filter: contrast(100%);
  width: 700px;
  height: 800px;
  object-fit: none;
  position: relative;
}

.zumuzumu3:hover {
  -webkit-transition: all 1.5s; transition: all 1.5s;
  opacity: 1.0;  filter: brightness(100%);filter: contrast(100%);
  animation: zumzum3 0.13s alternate infinite;
  display: inline-block;
  overflow: hidden;
}

.zumuzumu3:active {
  -webkit-transition: all 0.0s; transition: all 0.0s;
  opacity: 1.0;  filter: brightness(150%);filter: contrast(200%);
  animation: bikun 0.1s infinite alternate ease-out;
  display: inline-block;
  overflow: hidden;
}

@keyframes zumzum3 {
  0% {
    transform: translateY(-17px) scaleY(1.012) rotateX(2.5deg);
    transform-origin:bottom;
  }
  10% {
    transform: translateY(-17px) scaleY(1.009) rotateX(1.8deg);
    transform-origin:bottom;
  }
  50% {
    transform: translateY(-10px) scaleY(1.005) rotateX(0.8deg);  
    transform-origin:bottom;
  }
  60% {
    transform: translateY(-8px) scaleY(1.003) rotateX(0.6deg);
    transform-origin:bottom;
  }
  70% {
    transform: translateY(-4px) scaleY(1.002) rotateX(0.4deg);
    transform-origin:bottom;
  }
  80% {
    transform: translateY(-2px) scaleY(1.001) rotateX(0.2deg);
    transform-origin:bottom;
  }
  90% {
    transform: translateY(-2px) scaleY(1) rotateX(0.2deg);
    transform-origin:bottom;
  }
  95% {
    transform: translateY(-2px) scaleY(0.995) rotateX(0.2deg);
    transform-origin:bottom;
  }
  100% {
    transform: translateY(0px) scaleY(1) rotateX(0deg);
    transform-origin:bottom;
  }
}

.yurayura1w{
  -webkit-transition: all 0.5s; transition: all 0.5s;
  opacity: 1.0;  filter: brightness(100%);filter: contrast(100%);
  width: 900px;
  height: 800px;
  object-fit: none;
  position: relative;
}

.yurayura1w:hover {
  -webkit-transition: all 1.5s; transition: all 1.5s;
  animation: yura 1.5s infinite alternate ease-out;
  display: inline-block;
}

.yurayura1w:active {
  -webkit-transition: all 1.0s; transition: all 1.0s;
  opacity: 1.0;  filter: brightness(100%);  contrast(100%);
 }
 
.zumuzumu2w {
  -webkit-transition: all 1.0s; transition: all 1.0s;
  opacity: 1.0;  filter: brightness(100%);filter: contrast(100%);
  width: 900px;
  height: 800px;
  object-fit: none;
  position: relative;
}

.zumuzumu2w:hover {
  -webkit-transition: all 1.5s; transition: all 1.5s;
  opacity: 1.0;  filter: brightness(100%);filter: contrast(100%);
  animation: zumzum 0.18s alternate infinite;
  display: inline-block;
  overflow: hidden;
}

.zumuzumu2w:active {
  -webkit-transition: all 0.0s; transition: all 0.0s;
  opacity: 1.0;  filter: brightness(100%);filter: contrast(100%);
  animation: bikun 0.1s infinite alternate ease-out;
  display: inline-block;
  overflow: hidden;
}

.radioItem {
  display: inline-flex;
  align-items: center;
  column-gap: 4px;
  line-height: 1;
  cursor: pointer;
}

.radioItem:not(:last-of-type) {
  margin-right: 16px;
}

.radioButton {
  appearance: none;
  position: relative;
  width: 20px;
  height: 20px;
  border: 1px solid #07d5d4;
  border-radius: 9999px;
  cursor: pointer;
}

.radioButton:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 12px;
  height: 12px;
  margin: auto;
  border-radius: 9999px;
  background-color: #06b6d4;
}

.zumuzumuy {
  -webkit-transition: all 1.0s; transition: all 1.0s;
  opacity: 1.0;  filter: brightness(100%);filter: contrast(100%);
  width: 700px;
  height: 800px;
  object-fit: none;
  position: relative;
}

.zumuzumuy2 {
  -webkit-transition: all 1.0s; transition: all 1.0s;
  opacity: 1.0;  filter: brightness(100%);filter: contrast(100%);
  width: 700px;
  height: 800px;
  object-fit: none;
  position: relative;
}

.zumuzumuy:hover {
  -webkit-transition: all 1.5s; transition: all 1.5s;
  opacity: 1.0;  filter: brightness(100%);filter: contrast(100%);
  animation: zumzumy 0.18s alternate infinite;
  display: inline-block;
  overflow: hidden;
}

.zumuzumuy2:hover {
  -webkit-transition: all 1.5s; transition: all 1.5s;
  opacity: 1.0;  filter: brightness(100%);filter: contrast(100%);
  animation: zumzumy 0.30s alternate infinite;
  display: inline-block;
  overflow: hidden;
}

.zumuzumuy:active {
  -webkit-transition: all 0.1s; transition: all 0.1s;
  opacity: 0.5;  filter: brightness(150%);  contrast(200%);
  animation: shoot 0.1s alternate ease-out;
  display: inline-block;
  overflow: hidden;
 }
 
 .zumuzumuy2:active {
  -webkit-transition: all 0.1s; transition: all 0.1s;
  opacity: 0.5;  filter: brightness(150%);  contrast(200%);
  animation: shoot 0.1s alternate ease-out;
  display: inline-block;
  overflow: hidden;
 }
 
@keyframes zumzumy {
  0% {
    transform: translateX(17px) scaleX(0.997) rotateX(2deg);
    transform-origin: center;
  }
  10% {
    transform: translateX(17px) scaleX(0.989) rotateX(1.8deg);
    transform-origin: center;
  }
  50% {
    transform: translateX(10px) scaleX(1.005) rotateX(0.8deg);  
    transform-origin: center;
  }
  60% {
    transform: translateX(8px) scaleX(1.003) rotateX(0.6deg);
    transform-origin: center;
  }
  70% {
    transform: translateX(4px) scaleX(1.002) rotateX(0.4deg);
    transform-origin: center;
  }
  80% {
    transform: translateX(2px) scaleX(1.001) rotateX(0.2deg);
    transform-origin: center;
  }
  90% {
    transform: translateX(2px) scaleX(1) rotateX(0.2deg);
    transform-origin: center;
  }
  95% {
    transform: translateX(2px) scaleX(0.995) rotateX(0.2deg);
    transform-origin: center;
  }
  100% {
    transform: translateX(0px) scaleX(1) rotateX(0deg);
    transform-origin: center;
  }
}