/*-------------------------------------------
    サブスクサービスサイト/問い合わせフォーム用footer
    ・対象: common/layout.twig / layout_business.twig /
            layout_promotion_newservice.twig / layout_promotion_optservice.twig
-------------------------------------------*/

/*-------------------------------------------
    運用ルール
    ・クラスはすべて main-footer / main-footer__* を使い、既存の footer 用クラス
      （footer-new / ft_logo / ft_nav / nest-list / privacy-mark / #copy / inner / pc / sp）は使わない
    ・footer 要素の footer-menu クラスは JS（script.js の追従ボタン制御）が参照するため残している。
      common.css / style.css の footer:not(.exclusion).footer-menu（詳細度 0,2,1）に勝つよう、
      ルート要素は footer.footer-menu.main-footer で指定する
    ・子要素は .main-footer から書き始め、footer:not(.exclusion) ul（詳細度 0,1,2）等の既存ルールに勝たせる
    ・ブレイクポイント: PC 1281px〜 / タブレット 768px〜1280px / SP 〜767px
-------------------------------------------*/

/*-------------------------------------------
    PC・SPでの表示切り替え
-------------------------------------------*/
@media screen and (min-width: 768px) {
  .main-footer .main-footer__sp {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .main-footer .main-footer__pc {
    display: none;
  }
}

/*-------------------------------------------
    フッター本体（layout.twig / layout_business.twig）
-------------------------------------------*/
footer.footer-menu.main-footer {
  position: relative;
  z-index: 3;
  padding: 22px;
  background: #2C2C2C;
  font-size: 1.3rem;
  line-height: 1;
}

/* 上の余白は下端（Pマーク）の余白と揃える */
.main-footer .main-footer__logo {
  width: 155px;
  margin: 20px auto 30px;
}

.main-footer .main-footer__logo img {
  width: auto;
  max-width: 200px;
}

.main-footer .main-footer__inner {
  position: relative;
  z-index: 4;
  align-items: center;
  max-width: 980px;
  margin: 0 auto;
  padding-inline: 15px;
  box-sizing: border-box;
}
/*-------------------------------------------
    ナビ（メニューの配置）
    ・メニューは nav 直下に1回だけ書き、配置は grid-template-areas で画面幅ごとに切り替える
    ・各メニューに配置用のモディファイアを付ける
        --service（メニュー1） / --support（メニュー2） / --manual（メニュー3） /
        --other（メニュー4） / --terms（メニュー5） / --lineup（メニュー6）
-------------------------------------------*/
.main-footer .main-footer__nav {
  display: grid;
  align-items: start;
  gap: 35px 20px;
}

.main-footer .main-footer__menu--service { grid-area: service; }
.main-footer .main-footer__menu--support { grid-area: support; }
.main-footer .main-footer__menu--manual  { grid-area: manual; }
.main-footer .main-footer__menu--other   { grid-area: other; }
.main-footer .main-footer__menu--terms   { grid-area: terms; }
.main-footer .main-footer__menu--lineup  { grid-area: lineup; }

/* PC：横1列。メニュー3のみメニュー2の下 */
@media screen and (min-width: 1281px) {
  .main-footer .main-footer__nav {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "service support other terms lineup"
      "service manual  other terms lineup";
    margin-block: 40px 20px;
  }

  /* 取扱説明書はサービスの下端に揃える */
  .main-footer .main-footer__menu--manual {
    align-self: end;
  }
}

/* タブレット：3列 × 2行 */
@media (min-width: 768px) and (max-width: 1280px) {
  .main-footer .main-footer__inner {
    max-width: 680px;
  }
  .main-footer .main-footer__nav {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "service support manual"
      "other   terms   lineup";
    margin-block: 30px 70px;
  }
}

/* SP：2列。メニュー1の横にメニュー2・3を縦に並べる */
@media screen and (max-width: 767px) {
  .main-footer .main-footer__nav {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas:
      "service support"
      "service manual"
      "other   terms"
      "lineup  .";
    gap: 25px 0;
    margin-block: 30px 20px;
  }

  /* 取扱説明書はサービスの下端に揃える */
  .main-footer .main-footer__menu--manual {
    align-self: end;
  }
}

/*-------------------------------------------
    メニュー（見出し + リスト）
    ナビ内のリストはすべて .main-footer__menu で「見出し + リスト」の単位にする
    マークアップ:
      <div class="main-footer__menu">
        <p class="main-footer__menu-title" id="xxx">見出し</p>
        <ul class="main-footer__menu-list" aria-labelledby="xxx"><li><a>リンク</a></li></ul>
      </div>
    ・.main-footer__menu-list--row … リンクを横に並べるリスト（取扱説明書の U20P / MR1）
    ・メニューは画面幅ごとに書き分けないため、id は1メニューにつき1つ
-------------------------------------------*/
/* 見出し */
.main-footer .main-footer__menu-title {
  margin-bottom: 15px;
  color: rgba(250, 250, 250 ,0.75);
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1;
}

/* リンクリスト */
.main-footer .main-footer__menu-list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  row-gap: 15px;
}

.main-footer .main-footer__menu-list li {
  color: #FFFFFF;
  list-style: none;
}

.main-footer .main-footer__menu-list li a {
  color: #FFFFFF;
  font-size: 1.3rem;
  text-decoration: none;
  letter-spacing: 0.04em;
}

/* リンクを横に並べるリスト */
.main-footer .main-footer__menu-list--row {
  display: flex;
  column-gap: 1.5em;
}

/* Pマーク */
.main-footer .main-footer__pmark {
  position: absolute;
  bottom: -20px;
  right: 0;
  box-sizing: content-box;
  width: 75px;
  padding: calc(75px / 4);
  transform: translate(100px, 32px);
}

.main-footer .main-footer__pmark img {
  width: 100%;
  height: auto;
}

/* コピーライト */
.main-footer .main-footer__copy {
  margin: 0;
  padding: 0;
  background: transparent;
  color: #FFFFFF;
  font-size: 1.1rem;
  line-height: 1;
  text-align: center;
}

.main-footer .main-footer__copy span {
  display: block;
  max-width: 910px;
  margin: 0 auto;
  padding-right: 0;
  letter-spacing: 0.06em;
}

/* タブレット */
@media (min-width: 768px) and (max-width: 1280px) {
  /* absolute だと画面幅によってメニュー（サービスラインナップ）と重なるため、
     通常フローでナビの下・右寄せに配置する */
  .main-footer .main-footer__pmark {
    right: 15%;
    bottom: -72px;
  }
}

/* SP */
@media screen and (max-width: 767px) {
  footer.footer-menu.main-footer {
    padding: 30px 0;
  }

  /* 上の余白は footer の padding のみにして下の余白と揃える */
  .main-footer .main-footer__logo {
    width: 100%;
    margin: 0 auto 10px;
    text-align: center;
  }
  
  .main-footer .main-footer__logo img {
    max-width: 130px;
    margin: 0 auto;
  }

  .main-footer .main-footer__inner {
    max-width: 450px;
    position: static;
    display: block;
  }

  .main-footer .main-footer__nav {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 30px;
  }

  .main-footer .main-footer__menu-title {
    font-size: 1.5rem;
  }

  .main-footer .main-footer__menu-list li a {
    font-size: 1.2rem;
  }

  /* .main-footer__inner が static になるため footer 基準で配置される */
  .main-footer .main-footer__pmark {
    bottom: 68px;
    right: 15%;
    transform: translate(50%, 50%);
  }

  .main-footer .main-footer__copy {
    font-size: 1rem;
  }
}