.hatsumeigaku-title-style, .hatsumeigaku-title-style-award {
	position: relative;
}

.hatsumeigaku-title-style::after {
	position: absolute;
	bottom: -2px;
	left: 0;
	content: '';
	width: 100%;
	height: 2px;
	background: #2ea7e0;
	transform: scale(0, 1);
	transform-origin: left top;
	transition: transform .5s;
}

.hatsumeigaku-title-style:hover::after ,.hatsumeigaku-title-style.hover::after{
	transform: scale(1, 1);
}

.hatsumeigaku-title-style .rotate_target{
	animation: r3 8s linear infinite;
}
.hatsumeigaku-title-style-award .rotate_target{
	animation: r3 8s linear infinite;
}

.img_line_area img:nth-child(odd) {
	animation: r2 15s linear infinite;
}

@keyframes r1 {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes r2 {
  0%   { transform: rotate(0deg); }
  25% { transform: rotate(360deg); }
  100% { transform: rotate(360deg); }
}

@keyframes r3 {
  0%   { transform: rotate(0deg); }
  50% { transform: rotate(360deg); }
  100% { transform: rotate(360deg); }
}

.rotate_target {
   transition: transform 3s ease-out;
}

.rotate_target2 {
   transition: transform 3s ease-out;
}

.rotate_target2:hover,.rotate_target2.hover  {
  animation: r6 1s linear infinite;
}

@keyframes r6 {
  0%   { transform: rotateX(0deg); }
  100% { transform: rotateX(360deg); }
}




/********************
animation setting
********************/
@-webkit-keyframes loadingAnim{
    0%{
        width: 0;
    }
    100%{
        width: 100%;
        -webkit-transform: translate(100%);
        transform: translate(100%);
    }
}
@keyframes loadingAnim{
    0%{
        width: 0;
    }
    100%{
        width: 100%;
        -webkit-transform: translate(100%);
        transform: translate(100%);
    }
}
@-webkit-keyframes loadingAnim_text{
    0%{
        opacity: 1;
        color: #000;
    }
    50%{
        color: #999;

    }
    100%{
        opacity: .5;
        color: #fff;
    }
}
@keyframes loadingAnim_text{
    0%{
        opacity: 1;
        color: #000;
    }
    50%{
        color: #999;
    }
    100%{
        opacity: .5;
        color: #fff;
    }
}

@-webkit-keyframes loadingAnim_log{
    0%{
        opacity: 1;
        color: #cba166;
    }
    50%{
        color: #333;

    }
    100%{
        opacity: .9;
        color: #fff;
    }
}
@keyframes loadingAnim_log{
    0%{
        opacity: 1;
        color: #cba166;
    }
    50%{
        color: #333;
    }
    100%{
        opacity: .9;
        color: #fff;
    }
}

@keyframes drop {
	0%   { background-position: 0 0, 0 0, 0 0; }
	100% { background-position: 500px 1000px}
}

@-moz-keyframes drop {
	0%   { background-position: 0 0, 0 0, 0 0; }
	100% { background-position: 500px 1000px }
}

@-webkit-keyframes drop {
	0%   { background-position: 0 0, 0 0, 0 0; }
	100% { background-position: 500px 1000px }
}

/*
body {
	background-color: #000;
	background-image: url('hachi.png');
	-webkit-animation: drop 10s linear infinite;
	-moz-animation: drop 10s linear infinite;
	animation: drop 10s linear infinite;
}
*/

/*
.tvbangumi-header img:hover {
	-webkit-animation: fluffy 0.8s linear 0s 1;
	animation: fluffy 0.8s linear 0s 1;
}
*/
@-webkit-keyframes fluffy {
	0%   { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
	15%  { -webkit-transform: scale(0.9, 0.9) translate(0%, 5%); }
	30%  { -webkit-transform: scale(1.3, 0.8) translate(0%, 10%); }
	50%  { -webkit-transform: scale(0.8, 1.3) translate(0%, -10%); }
	70%  { -webkit-transform: scale(1.1, 0.9) translate(0%, 5%); }
	100% { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
}
@keyframes fluffy {
	0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
	15%  { transform: scale(0.9, 0.9) translate(0%, 5%); }
	30%  { transform: scale(1.3, 0.8) translate(0%, 10%); }
	50%  { transform: scale(0.8, 1.3) translate(0%, -10%); }
	70%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
	100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}


/********************
settings
********************/
::-moz-selection{
    background-color: rgba(0,105,255,.3);
}
::selection{
    background-color: rgba(0,105,255,.3);
}

/********************
loading effects
********************/
.loadingAnim{
    position: fixed;
    z-index: 100;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
}
.loadingAnim_line{
    line-height: 1;
    position: fixed;
    z-index: 100;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: inline-block;
    overflow: hidden;
    width: 200px;
    height: 1.25em;
    margin: auto;
    transition: all .3s cubic-bezier(.785, .135, .15, .86) 0s;
    transition-delay: .6s;
    text-align: center;
}
.loadingAnim_line:after{
    position: absolute;
    z-index: 100;
    top: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 0;
    height: 100%;
    margin: auto  auto auto 0;
    content: ' ';
    -webkit-animation: loadingAnim 2s ease-in-out .1s infinite normal backwards;
    animation: loadingAnim 2s ease-in-out .1s infinite normal backwards;
    background-color: #fff;
    will-change: transform, width;
}
.loadingAnim_line:before{
    font-family: 'Poppins', sans-serif;
    font-size: 1.25em;
    font-weight: bold;
    font-style: normal;
    line-height: 1;
    display: block;
    content: 'LOADING';
    -webkit-animation: loadingAnim_text 1s ease .1s infinite alternate both;
    animation: loadingAnim_text 1s ease .1s infinite alternate both;
    letter-spacing: .5em;
    color: #fff;
    will-change: opacity;
}

.loadingLog{
    line-height: 1;
    position: fixed;
    z-index: 100;
    top: -220px;
    right: 0;
    bottom: 0;
    left: 0;
    display: inline-block;
    overflow: hidden;
    width: 414px;
    max-width: 80%;
    margin: auto;
    transition: all .3s cubic-bezier(.785, .135, .15, .86) 0s;
    transition-delay: .6s;
    text-align: center;
    -webkit-animation: loadingAnim_log 1s ease .1s infinite alternate both;
    animation: loadingAnim_log 1s ease .1s infinite alternate both;
}

.loaded .loadingAnim_line{
    overflow: hidden;
    height: 0;
}

.loaded .loadingLog{
    overflow: hidden;
    height: 0;
    display: none;
}

.loaded .loadingAnim_line:after,
.loaded .loadingAnim_line:before{
    -webkit-animation: none;
    animation: none;
}
.loaded .loadingAnim_line:before{
    content: 'LOADED!';
}

.loadingAnim:before,
.loadingAnim:after{
    line-height: 1;
    position: fixed;
    z-index: 99;
    right: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 50%;
    margin-right: auto;
    margin-left: auto;
    content: ' ';
    transition: all .3s cubic-bezier(.785, .135, .15, .86) 0s;
    transition-delay: .3s;
    background-color: #8FB135;

}
.loadingAnim:before{
    top: 0;
}
.loadingAnim:after{
    bottom: 0;
}

.loaded .loadingAnim:before{
    height: 0;
    -webkit-transform: translateY(-1%);
    -ms-transform: translateY(-1%);
    transform: translateY(-1%);
}
.loaded .loadingAnim:after{
    height: 0;
    -webkit-transform: translateY(1%);
    -ms-transform: translateY(1%);
    transform: translateY(1%);
}

/********************
style
********************/

.effect-fade {
	opacity : 0;
	transform : translate(0px, 100px);
	transition : all 500ms;
}

.effect-fade.effect-scroll {
	opacity : 1;
	transform : translate(0, 0);
}

/* 2つ目の要素に200msのdelayをかける */
#fotterImgArea > .effect-fade:nth-of-type(2) {
    -moz-transition-delay:200ms;
    -webkit-transition-delay:200ms;
    -o-transition-delay:200ms;
    -ms-transition-delay:200ms;
}
/* 3つ目の要素に400msのdelayをかける */
#fotterImgArea > .effect-fade:nth-of-type(3) {
    -moz-transition-delay:400ms;
    -webkit-transition-delay:400ms;
    -o-transition-delay:400ms;
    -ms-transition-delay:400ms;
}

.btn-social-square img {
	transition: .3s;
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}


.btn-social-square img:hover ,.btn-social-square img.hover {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
}


.zoomImg{
	transition-duration: 0.5s;
}


.zoomImg:hover , .zoomImg.hover {
	transform: scale(1.1);
	transition-duration: 0.5s;
}



.page-top-icon1{
  animation: img_box_9955 3s linear infinite;
  transform-origin: 50% 50%;
  margin: 5px 0 !important;
}

@keyframes img_box_9955 {
  0% { transform: translateY(0) }
  33.33333% { transform: translateY(-10px) }
  66.66667% { transform: translateY(0) }
  100% { transform: translateY(0) }
}