/* マウスホバーすると文字が下から浮かび上がるアニメーション */
@keyframes fadein {
    0%   {bottom:0;opacity: 0;}
    100%   {bottom:30px;opacity: 1;}
}

@keyframes fadeout {
    100%   {bottom:0;opacity: 0;}
    0%   {bottom:30px;opacity: 1;}
}

.hover_fadein_parent .hover_fadein {
    bottom: 30px;
    right: 0;
    left: 0;
    display: block;
    position: absolute;
    opacity: 1;
}
.hover_fadein_parent.__hover_fadein_hide .hover_fadein{
    opacity: 0!important;
}
.hover_fadein_parent.__hover_show .hover_fadein{
    animation-name: fadeout;
    animation-duration: 0.75s;
    animation-fill-mode: forwards;
}
.hover_fadein_parent.__hover_show:hover .hover_fadein{
    animation-name: fadein;
    animation-duration: 0.75s;
    animation-fill-mode: forwards;
}

/* 下線アニメーション（中央から） */
@keyframes underline2 {
    0%   {width: 0;}
    100%   {width: 50%;}
}

.anim_underline2 {
    position: relative;
}
.anim_underline2:before {
	content: '';
	width: 0;
	left: 50%;
	bottom: 0;
	border-bottom: 5px solid #33a8f1 ;
	position: absolute;
	display: block;
}
.anim_underline2:after {
	content: '';
	width: 0;
	right: 50%;
	bottom: 0;
	border-bottom: 5px solid #33a8f1 ;
	position: absolute;
	display: block;
}
.anim_underline2:hover:before{
    animation-name: underline2;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}
.anim_underline2:hover:after{
    animation-name: underline2;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}

/* ナビゲーションバーを縮めるアニメーション */
@keyframes shrink {
    0%   {height: 100px;}
    100%   {height: 70px;}
}
@keyframes shrink_reverse {
    0%   {height: 70px;}
    100%   {height: 100px;}
}
.navbar.scroll-stick.shrink {
    position: fixed;
    animation-name: shrink;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}

.navbar.scroll-stick .dropdown .dropdown-menu {
    top: 0!important;
}

.navbar.shrink_reverse {
    animation-name: shrink_reverse;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}