/* --------------------------------------------- */
/* footer */
/* --------------------------------------------- */
#page-top {
  display: none;
}
.f-bg {}
.footer {
  padding: 3em 0;
  background: #E4F5FA;
}
.footer_logo {
  margin: 0 auto 1.5em;
}
.footer_logo a img {
  width: 80px;
}
.footer_logo p {
  margin: 1em auto 0;
}
.footer_logo p span {
  display: block;
  color: #0086CC;
  font-weight: 600;
  font-size: 1.8rem;
  letter-spacing: 2px;
}
.footer_link {}
.footer_link p {
  margin: 0 auto 0.3em;
}
.footer_link a {
  display: block;
  background: #fff;
  border-radius: 5px;
  padding: 10px 10px 10px 70px;
  position: relative;
  width: 300px;
  margin: auto;
  box-sizing: border-box;
  text-align: left;
  font-weight: 600;
}
.footer_link a::before {
  position: absolute;
  content: '';
  top: 50%;
  left: 10px;
  transform: translate(0%, -50%);
  display: block;
  width: 50px;
  height: 50px;
  background-image: url("/cruise/img/common/logo_hamanko.webp");
  background-size: contain;
  background-repeat: no-repeat;
}
.copyright {
  background: #0086CC;
  color: #fff;
  padding: 1em 5%;
  font-size: 1rem;
}
/* ------------------------------------ */
/* footer_PC */
/* ------------------------------------ */
@media all and (min-width: 768px) {
  .f-bg {}
  .footer {
    padding: 4em 0;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0em auto 0em;
    justify-content: center;
    align-items: center;
  }
  .footer_logo {
    margin: 0;
    width: 700px;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    justify-content: flex-start;
    align-items: center;
  }
  .footer_logo a img {
    width: 110px;
  }
  .footer_logo p {
    text-align: left;
    margin: 0 0 0 50px;
  }
  .footer_logo p span {
    font-size: 2.3rem;
  }
  .footer_link {
    width: 400px;
  }
  .footer_link p {
    text-align: left;
    margin: 0 auto 0.5em;
  }
  .footer_link a {
    border-radius: 5px;
    padding: 12px 10px 12px 80px;
    width: 400px;
  }
  .footer_link a::before {
    left: 10px;
    width: 60px;
    height: 60px;
  }
  .copyright {
    font-size: 1.3rem;
  }
  /*========= ページトップのためのCSS ===============*/
  /*リンクの形状*/
  #page-top {
    display: block;
  }
  #page-top a {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #0086CC;
    border-radius: 80px;
    width: 70px;
    height: 70px;
    color: #fff;
    font-size: 1.4rem;
    font-family: brandon-grotesque, sans-serif;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s;
  }
  #page-top a:hover {
    background: #E4F5FA;
    color: #0086CC;
  }
  /*リンクを右下に固定*/
  #page-top {
    position: fixed;
    right: 10px;
    z-index: 2;
    /*はじめは非表示*/
    opacity: 0;
    transform: translateY(100px);
  }
  /*　上に上がる動き　*/
  #page-top.UpMove {
    animation: UpAnime 0.5s forwards;
  }
  @keyframes UpAnime {
    from {
      opacity: 0;
      transform: translateY(100px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  /*　下に下がる動き　*/
  #page-top.DownMove {
    animation: DownAnime 0.5s forwards;
  }
  @keyframes DownAnime {
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 1;
      transform: translateY(100px);
    }
  }
}