/* 文字色を徐々に変更 */
.color_change {
    transition-duration: 0.15s;
    transition-property: color;
    transition-timing-function: ease-in-out;
}
.color_change:hover {
    color: orange;
}

/* 下線を引く */
.tran_underline2 {
    position: relative;
    display: inline-block;
}
.tran_underline2:before {
	content: '';
	width: 0;
	left: 50%;
	bottom: 0;
	border-bottom: 5px solid #33a8f1 ;
	position: absolute;
	display: block;
    transition-duration: 0.3s;
    transition-property: width;
    transition-timing-function: ease-in-out;
}
.tran_underline2:after {
	content: '';
	width: 0;
	right: 50%;
	bottom: 0;
	border-bottom: 5px solid #33a8f1 ;
	position: absolute;
	display: block;
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
    transition-property: width;
}
.tran_underline2:hover:before{
    width: 50%;
}
.tran_underline2:hover:after{
    width: 50%;
}

/* 下から浮かび上がる */
.tran_fadein {
    transform:translateY(20px);
    opacity: 0;
    transition-duration: 0.5s;
    transition-property: transform, opacity;
    transition-timing-function: ease-in-out;
}
.thumbnail:hover .tran_fadein  {
    transform:translateY(0px);
    opacity: 1;
}

/* 左側から背景色を変更 */
.change_background_color_left_to{
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
}
.change_background_color_left_to::before{
    content: "";
    z-index: -1;
    color: #fff;
    background-color: #2372a3;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    transform: scaleX(0);
    transition: color .3s ease-in-out,background-color .3s ease-in-out,border-color .3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
}
.change_background_color_left_to:hover:before
{
    transform: scaleX(1);
}

/* 背景色を変更 */
.change_background_color {
    -webkit-transition-duration: 0.25s;
    transition-duration: 0.25s;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    -webkit-transition-property: background-color;
    transition-property: background-color;
}
.change_background_color:hover {
    background-color: #2372a3!important;
}

/* ホバー時に右側に矢印を出現 */
.hover_right_arrow{
    position: relative;
}
.hover_right_arrow:hover:after,
.hover_right_arrow:focus:after
{
    opacity: 1;
    right: 10px;
}

.hover_right_arrow::after
 {
    content: '';
    position: absolute;
    right: 20px;
    top: 50%;
    display: block;
    opacity: 0;
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    width: 10px;
    height: 10px;
    transform: translate(-50%, -50%) rotate(-45deg);
    transition: opacity .1s ease-in-out,right .1s ease-in-out;
    -webkit-transition-property: opacity,right;
    transition-property: opacity,right;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}