/* 申込フォーム・マイページ共通フッター（footer.entry-footer / footer.mypage-footer） */
/* ※ 読み込み：common/entry/head.twig・common/mypage/head.twig・common/corpmypage/head.twig */
/* ※ プライバシーマークの配置はサイトフッター（common.css の footer .privacy-mark）にそろえる */

/* 内容が少ないページではフッターを画面下にそろえる（内容が多いページは通常どおり本文の後ろ） */
body:has(> footer.entry-footer),
body:has(> footer.mypage-footer) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body:has(> footer.entry-footer) > main,
body:has(> footer.mypage-footer) > main {
  flex: 1 0 auto;
}

footer.entry-footer,
footer.mypage-footer {
  flex-shrink: 0;
  display: block;
  width: 100%;
  padding: 50px 0 20px;
  box-sizing: border-box;
  overflow: hidden;
  font-size: 1.2rem;
  color: #fff;
}

footer.entry-footer {
  background-color: #505050;
}

footer.mypage-footer {
  background-color: #707070;
}

footer.entry-footer .wrapper,
footer.mypage-footer .wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

footer.entry-footer .wrapper ul,
footer.mypage-footer .wrapper ul {
  display: flex;
  justify-content: center;
  margin: 0 0 30px;
  padding: 0;
}

footer.entry-footer .wrapper ul li,
footer.mypage-footer .wrapper ul li {
  margin: 0;
  list-style: none;
}

footer.entry-footer .wrapper ul li a,
footer.mypage-footer .wrapper ul li a {
  color: #fff;
  line-height: 1.4;
}

footer.entry-footer .privacy-mark,
footer.mypage-footer .privacy-mark {
  width: 75px;
  padding: calc(75px / 4);
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(25px, 25px);
  box-sizing: initial;
}

footer.entry-footer .privacy-mark img,
footer.mypage-footer .privacy-mark img {
  width: 100%;
  height: auto;
}

/* PC：リンクを1行に並べ、間に白線を入れる */
@media screen and (min-width: 1281px) {
  footer.entry-footer .wrapper ul li,
  footer.mypage-footer .wrapper ul li {
    padding: 0 1em;
    text-align: center;
  }
  footer.entry-footer .wrapper ul li:not(:last-of-type),
  footer.mypage-footer .wrapper ul li:not(:last-of-type) {
    border-right: 2px solid #fff;
  }
}

@media (min-width: 768px) and (max-width: 1280px) {
  footer.entry-footer .wrapper,
  footer.mypage-footer .wrapper {
    max-width: 680px;
  }

  footer.entry-footer .privacy-mark,
  footer.mypage-footer .privacy-mark {
    transform: none;
    bottom: -22px;
  }
}

/* TB・SP：リンクを2列（左：サービスサイトへ戻る／よくあるご質問、右：規約類）にする */
@media screen and (max-width: 1280px) {
  footer.entry-footer .wrapper,
  footer.mypage-footer .wrapper {
    max-width: 400px;
  }
  footer.entry-footer .wrapper ul,
  footer.mypage-footer .wrapper ul {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 14px;
    margin: 0 0 55px;
  }

  footer.entry-footer .wrapper ul li:nth-child(1),
  footer.mypage-footer .wrapper ul li:nth-child(1) {
    grid-area: 1 / 1;
  }

  footer.entry-footer .wrapper ul li:nth-child(2),
  footer.mypage-footer .wrapper ul li:nth-child(2) {
    grid-area: 2 / 1;
  }

  footer.entry-footer .wrapper ul li:nth-child(3),
  footer.mypage-footer .wrapper ul li:nth-child(3) {
    grid-area: 1 / 2;
  }

  footer.entry-footer .wrapper ul li:nth-child(4),
  footer.mypage-footer .wrapper ul li:nth-child(4) {
    grid-area: 2 / 2;
  }

  footer.entry-footer .wrapper ul li:nth-child(5),
  footer.mypage-footer .wrapper ul li:nth-child(5) {
    grid-area: 3 / 2;
  }

  footer.entry-footer .wrapper small,
  footer.mypage-footer .wrapper small {
    margin-top: 15px;
  }
}

@media screen and (max-width: 767px) {
  footer.entry-footer,
  footer.mypage-footer {
    padding: 31px 20px 20px;
  }

  /* コピーライトの行に Pマークが並ぶよう、リンクとの間を空ける */
  footer.entry-footer .wrapper ul,
  footer.mypage-footer .wrapper ul {
    padding: 0;
  }

  footer.entry-footer .wrapper small,
  footer.mypage-footer .wrapper small {
    margin: 0;
  }

  footer.entry-footer .privacy-mark,
  footer.mypage-footer .privacy-mark {
    transform: none;
    bottom: -23px;
    right: -22px;
  }
}

/* 契約者限定申込フォーム（common/form_footer_transfer.twig） */
/* 全幅でリンクを2列（左：サービスサイトへ戻る／プライバシーポリシー、右：規約類）にする */
footer.entry-footer.entry-footer-transfer .wrapper ul {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 14px 55px;
}

footer.entry-footer.entry-footer-transfer .wrapper ul li,
footer.entry-footer.entry-footer-transfer .wrapper ul li:first-of-type,
footer.entry-footer.entry-footer-transfer .wrapper ul li:not(:last-of-type) {
  padding: 0;
  border: none;
  text-align: left;
}

/* 規約類の見出し（リンクなし。サイトフッターの .footer-sitemap-title にそろえる） */
footer.entry-footer.entry-footer-transfer .wrapper ul li.footer-list-title {
  font-weight: bold;
  color: rgba(255, 255, 255, .75);
}

footer.entry-footer.entry-footer-transfer .wrapper ul li:nth-child(1) {
  grid-area: 1 / 1;
}

footer.entry-footer.entry-footer-transfer .wrapper ul li:nth-child(2) {
  grid-area: 2 / 1;
}

footer.entry-footer.entry-footer-transfer .wrapper ul li:nth-child(3) {
  grid-area: 1 / 2;
}

footer.entry-footer.entry-footer-transfer .wrapper ul li:nth-child(4) {
  grid-area: 2 / 2;
}

footer.entry-footer.entry-footer-transfer .wrapper ul li:nth-child(5) {
  grid-area: 3 / 2;
}

footer.entry-footer.entry-footer-transfer .wrapper ul li:nth-child(6) {
  grid-area: 4 / 2;
}

@media (min-width: 768px) and (max-width: 1280px) {
  /* 1280px 以下の max-width: 400px は適用せず、TB の幅（680px）のままにする */
  footer.entry-footer.entry-footer-transfer .wrapper {
    max-width: 680px;
  }

  /* 右列が Pマークの位置まで伸びるため、Pマークがコピーライトの行に来るようリンクの下を空ける */
  footer.entry-footer.entry-footer-transfer .wrapper ul {
    margin-bottom: 40px;
  }
}

@media screen and (max-width: 767px) {
  footer.entry-footer.entry-footer-transfer .wrapper {
    max-width: 450px;
  }

  /* SP：1列（サービスサイトへ戻る → プライバシーポリシー → 規約類の順）。規約名が長いため折り返しを許可する */
  footer.entry-footer.entry-footer-transfer .wrapper ul {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  footer.entry-footer.entry-footer-transfer .wrapper ul li:nth-child(n) {
    grid-area: auto;
  }
  footer.entry-footer.entry-footer-transfer .wrapper ul li.footer-list-title {
    margin-top: 10px;
  }
}