@charset "utf-8";

/* --------------------------------------------


footer


---------------------------------------------- */

footer {
    width: 100%;
}
.footer__wrap {
    margin: 0 auto;
    padding-bottom: 2em;
    border-top: 1px solid var(--c-gray);
}
footer .credit {
	margin-top: 1.5em;
    color: var(--c-gray-deep);
    font-weight: var(--fw-light);
    font-size: var(--fz-s);
	}
@media only screen and (min-width:1024px) {
	.footer__wrap {
		width: 76%;
	}
}
@media only screen and (max-width:1023px) {
    .footer__wrap {
		position: relative;
        width: 90%;
		text-align: center;
    }
    footer .credit {
        text-align: center;
        font-size: var(--fz-s);
    }
}
/* --------------------------------------------

#pageTop

---------------------------------------------- */
#page-top a{
	font-family: "Outfit", sans-serif;
	font-weight: 900;
	font-size: var(--fz-m);
	transition:all 0.3s;
}
#page-top a::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: -30px;
    margin: auto;
    width: 23px;
    height: 23px;
	background-image: url(../_image/common/ft_arrow.png);
	background-size: contain;
	background-repeat: no-repeat;
	transition: .3s;
    z-index: 1;
}
#page-top a:hover::before {
	background-image: url(../_image/common/ft_hv.png);
}

@media only screen and (min-width:1024px) {
	#page-top {
		position: fixed;
		right: 14%;
		bottom: 30px;
		z-index: 2;
		opacity: 0;
		transform: translateY(100px);
	}
	#page-top.UpMove{
		animation: UpAnime .8s forwards;
	}
	@keyframes UpAnime{
		from {
			opacity: 0;
			transform: translateY(80px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
	#page-top.DownMove{
		animation: DownAnime .3s forwards;
	}
	@keyframes DownAnime{
		from {
			opacity: 1;
			transform: translateY(0);
		}
		to {
			opacity: 1;
			transform: translateY(80px);
		}
	}
}
@media only screen and (max-width:1023px) {
	#page-top {
		position: absolute;
		bottom: 7em;
		left: 48%;
		transform: translateX(-50%);
		}
	#page-top a{
		font-size: var(--fz-xl);
	}
	#page-top a::before {
		right: -45px;
		width: 35px;
		height: 35px;
	}

}

/* --------------------------------------------

#footer　印刷時

---------------------------------------------- */

@media print {
    #footer,
    #pageTop {
        display: none;
    }

}