@charset "UTF-8";

/* --------------------- */
/* -----footer------- */
/* --------------------- */
.footer {
  background-color: var(--color-black);
border-radius: var(--radius);
  margin-top: 150px;
padding: 80px 20px 20px 20px;
color: var(--color-white);
text-align: center;
position: relative;
}
/*◎768px以下*/
@media screen and (max-width: 768px) {
.footer {
border-radius: var(--radius-sp);
  margin-top: 100px;
padding: 40px 20px 140px 20px;
}
}

.footer .footer-link .bt02{
margin: 5px 10px;
}
/*◎768px以下*/
@media screen and (max-width: 768px) {
.footer .footer-link .bt02{
margin: 10px 10px;
width: 80%;
}
}


/* 指定管理者 */
.footer .footer-info{
margin: 30px 0;
}
.footer .footer-info img{
margin: 20px 0;
width: 250px;
}
/*◎768px以下*/
@media screen and (max-width: 768px) {
.footer .footer-info{
margin: 20px 0;
}
.footer .footer-info img{
margin: 10px 0;
}
}



/* page top */
.footer .p_top{
position: absolute;
bottom: 30px;
right: 30px;
background-image: url(../img/footer_p_t_back.svg);
background-size: cover;
background-position: center;
width: 100px;
height: 100px;
}
/*◎768px以下*/
@media screen and (max-width: 768px) {
.footer .p_top{
bottom: 15px;
right: 0;
left: 0;
margin: 0 auto;
width: 90px;
height: 90px;
}
}

.footer .p_top a{
display: block;
width: 100px;
height: 100px;
color: var(--color-white);
font-family: var(--font-en-serif);
line-height: 100%;
/* 中心 */
  display: grid;
  place-content: center;/*gridの上下中央配置*/
  place-items: center;
}
/*◎768px以下*/
@media screen and (max-width: 768px) {
.footer .p_top a{
width: 90px;
height: 90px;
}
}



/* 矢印 */
.f-arrow {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  color: var(--color-white);
  line-height: 1;
  margin-bottom: 5px;
}
.f-arrow__line {
  display: block;
  width: 0.1em;
  height: 1em;
  background: currentColor;
  transform-origin: bottom;
  animation: f-arrow-line 1s infinite;
}
@keyframes f-arrow-line {
  0%   { transform: scaleY(1); }
  100% { transform: scaleY(1.5); }
}

/* 矢印の頭（scale の影響を受けない） */
.f-arrow::before {
  content: '';
  width: 0.65em;
  height: 0.65em;
  border: 0.1em solid currentColor;
  border-left: 0;
  border-bottom: 0;
  transform: rotate(-45deg);
  transform-origin: top right;
  position: absolute;
  top: -0.05em;
  right: 50%;
  box-sizing: border-box;
animation: f-arrow-head 1s infinite;
}
@keyframes f-arrow-head {
  0%   { top: -0.05em; }
  100% { top: -0.6em; }
}