@charset "UTF-8";
/*
 * 会員向け共通フッター（common/member_footer.twig）専用
 * 旧フッター（.mypage-footer 系）とは class を共有しない。旧 CSS の指定が当たらないようにするため
 *
 * レイアウト
 *   PC（1281px以上）        … リンクを1行、その下にコピーライト。Pマークはリンクの右
 *   タブレット（768〜1280px） … リンクを2列にしてページ中央に置く。Pマークはリンクの右
 *   SP（767px以下）         … リンクを2列で幅いっぱいに置く。Pマークはコピーライトの右
 *   2列のときは左列: サービスサイトへ戻る/よくあるご質問、右列: それ以外（--col2）
 *
 * Pマークは .member-footer__inner（リンク＋コピーライトの枠）を基準に position: absolute で置く
 */
/* margin-top: auto … マイページ系（shibarinashi-mypage.css）は body が縦並びの flex のため、
   中身が短い画面でもフッターを画面の一番下に押し下げる（旧フッター footer.mypage-footer と同じ指定）。
   body が flex でない申込フォームでは何も起きない */
.member-footer {
  margin-top: auto;
  background: #fff;
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13px;
  line-height: 1.4;
  padding: 45px 20px 20px;
}

/* リンクとコピーライトを中央に置き、Pマークの位置の基準にする
   幅は中身に合わせる（Pマークをリンクのすぐ右に置くため） */
.member-footer__inner {
  position: relative;
  display: grid;
  grid-template-areas:
    "links"
    "copyright";
  justify-items: center;
  row-gap: 30px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}

.member-footer__links {
  grid-area: links;
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.member-footer__item {
  padding: 0 20px;
  line-height: 1;
}
.member-footer__item + .member-footer__item {
  border-left: 1px solid #999;
}

.member-footer a {
  color: #333;
  text-decoration: none;
}
.member-footer a:hover {
  text-decoration: underline;
}
.member-footer a:focus-visible {
  outline: 2px solid #333;
  outline-offset: 2px;
}

.member-footer__copyright {
  grid-area: copyright;
  margin: 0;
  color: #555;
  text-align: center;
  line-height: 1;
}

/* PC: Pマークはリンクの右。下端はコピーライトの下端にそろえる */
.member-footer__pmark {
  position: absolute;
  left: 100%;
  bottom: 0;
  margin-left: 35px;
}
.member-footer__pmark a {
  display: block;
}
.member-footer__pmark img {
  display: block;
  width: 75px;
  height: auto;
}

/* タブレット・SP 共通: リンクを2列にする。dense で各列を上から詰める */
@media screen and (max-width: 1280px) {
  .member-footer__links {
    display: grid;
    grid-template-columns: auto auto;
    grid-auto-flow: dense;
    column-gap: 55px;
    row-gap: 10px;
    min-width: 0;
  }
  .member-footer__item,
  .member-footer__item + .member-footer__item {
    padding: 0;
    border-left: none;
    line-height: 1.4;
  }
  .member-footer__item {
    grid-column: 1;
  }
  .member-footer__item--col2 {
    grid-column: 2;
  }
  .member-footer__pmark img {
    width: 65px;
  }
}

/* タブレット: Pマークはリンクの右。下端はコピーライトの下端にそろえる（PC と同じ） */
@media screen and (min-width: 768px) and (max-width: 1280px) {
  .member-footer__inner {
    row-gap: 24px;
  }
  .member-footer__pmark {
    margin-left: 100px;
  }
}

/* SP: リンクは幅いっぱい。Pマークは右端で、下端をコピーライトにそろえる */
@media screen and (max-width: 767px) {
  .member-footer {
    padding: 30px 20px 15px;
  }
  .member-footer__inner {
    width: auto;
    row-gap: 20px;
  }
  .member-footer__links {
    justify-self: center;
    column-gap: 49px;
    max-width: 400px;
  }
  /* Pマークは absolute で高さを持たないため、コピーライトの段を Pマークの高さにして文字を下に寄せる
     左右に Pマーク分の余白を取り、コピーライトをリンクの中央にそろえたまま重ならないようにする
     長いコピーライト（Space WiFi）は折り返すため、行の高さを広げる */
  .member-footer__copyright {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 65px;
    padding: 0 75px;
    line-height: 1.4;
  }
  .member-footer__pmark {
    left: auto;
    right: 0;
    margin-left: 0;
  }
}

/*
 * リンクが無いとき（member-footer--no-links。働くDB から移行したお客様: JP WiMAX / データSIM / Space WiFi / SBN / U3）
 *   PC        … コピーライトを中央。Pマークはリンクがあるときとほぼ同じ位置（リンク1行分の幅の右）
 *   タブレット … コピーライトを中央。Pマークは右端
 *   SP        … Pマークを右端に置き、その下にコピーライトを中央に置く
 * Pマークは absolute で高さを持たないため、枠の高さを Pマーク分取り、コピーライトを下に寄せる
 */
.member-footer--no-links .member-footer__inner {
  grid-template-areas: "copyright";
  align-content: end;
  width: 100%;
  max-width: 756px;
  min-height: 75px;
}

@media screen and (min-width: 768px) and (max-width: 1280px) {
  .member-footer--no-links .member-footer__inner {
    max-width: 680px;
    min-height: 65px;
  }
  .member-footer--no-links .member-footer__pmark {
    left: auto;
    right: 0;
    margin-left: 0;
  }
}

@media screen and (max-width: 767px) {
  .member-footer--no-links .member-footer__inner {
    grid-template-areas:
      "pmark"
      "copyright";
    row-gap: 10px;
    min-height: 0;
  }
  .member-footer--no-links .member-footer__pmark {
    position: static;
    grid-area: pmark;
    justify-self: end;
  }
  .member-footer--no-links .member-footer__copyright {
    display: block;
    min-height: 0;
    padding: 0;
  }
}

/*
 * Pマークを出さないとき（member-footer--no-pmark。HUMAN LIFE のサービスではない Space WiFi）
 *   Pマーク用に取っていた高さ・余白をなくし、コピーライトを中央に置く
 *   上の --no-links と同じ強さのセレクタなので、このブロックはファイルの最後に置くこと
 */
.member-footer--no-pmark .member-footer__inner {
  grid-template-areas:
    "links"
    "copyright";
  min-height: 0;
}
.member-footer--no-links.member-footer--no-pmark .member-footer__inner {
  grid-template-areas: "copyright";
}

@media screen and (max-width: 767px) {
  .member-footer--no-pmark .member-footer__inner {
    row-gap: 20px;
  }
  .member-footer--no-pmark .member-footer__copyright {
    display: block;
    min-height: 0;
    padding: 0;
  }
}