@charset "UTF-8";
/*
	Title	   : アニメ「可愛ければ変態でも好きになってくれますか？」
	URI            : https://hensuki.com/
	Designer       : GRAPHNETWORK
	Designer's URI : https://hensuki.com/
*/


/*#main::before {
  background-image: url(/img/common/img_contents_bg.png) ;
}*/

.thumb_chara ,.thumb_chara_sp {
  display: block;
}
.thumb_chara.pc {
  display: none;
}
.thumb_list_chara,
.thumb_chara,
.thumb_list_chara a.thumb_chara img {
   width: 100%;
}

.thumb_list_chara,
.thumb_chara,
.thumb_list_chara a.thumb_chara_sp img {
   width: 100%;
}

.thumb_list_chara, .thumb_chara, .thumb_list_chara a.thumb_chara img:hover {
	opacity: 1;
}


@media screen and (min-width:960px) {
	
	h1.page_ttl {
		font-size: 26px;
	}

   #main::before {
     background: none;
   }
   /*#main {
      background-image: url(../../character/img/character_bg.jpg);
   }*/

.thumb_list_chara{
   width: 800px;
   margin: 0 auto;
}
}


.wobble-hor-bottom:hover {
	-webkit-animation: wobble-hor-bottom 0.8s both;
	        animation: wobble-hor-bottom 0.8s both;
			opacity: 1;
}
@-webkit-keyframes wobble-hor-bottom {
  0%,
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  15% {
    -webkit-transform: translateX(-30px) rotate(-6deg);
            transform: translateX(-30px) rotate(-6deg);
  }
  30% {
    -webkit-transform: translateX(15px) rotate(6deg);
            transform: translateX(15px) rotate(6deg);
  }
  45% {
    -webkit-transform: translateX(-15px) rotate(-3.6deg);
            transform: translateX(-15px) rotate(-3.6deg);
  }
  60% {
    -webkit-transform: translateX(9px) rotate(2.4deg);
            transform: translateX(9px) rotate(2.4deg);
  }
  75% {
    -webkit-transform: translateX(-6px) rotate(-1.2deg);
            transform: translateX(-6px) rotate(-1.2deg);
  }
}
@keyframes wobble-hor-bottom {
  0%,
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  15% {
    -webkit-transform: translateX(-30px) rotate(-6deg);
            transform: translateX(-30px) rotate(-6deg);
  }
  30% {
    -webkit-transform: translateX(15px) rotate(6deg);
            transform: translateX(15px) rotate(6deg);
  }
  45% {
    -webkit-transform: translateX(-15px) rotate(-3.6deg);
            transform: translateX(-15px) rotate(-3.6deg);
  }
  60% {
    -webkit-transform: translateX(9px) rotate(2.4deg);
            transform: translateX(9px) rotate(2.4deg);
  }
  75% {
    -webkit-transform: translateX(-6px) rotate(-1.2deg);
            transform: translateX(-6px) rotate(-1.2deg);
  }
}