/* ============================================================
   ビジネスページ フッター
   Figma 法人LP TOP モバイル footer 23584:7175（393×631）
   全business共通（footer-business.php で読み込み）。
   ブレイクポイントはテーマ標準の 750px。
   ============================================================ */

/* 依頼(2026-07-27 #6): 「用途別に探す」「機種別に探す」はリンクを持たない見出しだが、
   グローバル style.css の a:hover{opacity:.5} が当たるため、マウスオーバーで
   半透明になり「押せる」ように見えてしまう。href の無い a だけ挙動を無効化する。
   ※ <a> を外す手もあるが .menu_box li a{color:#fff} が効かなくなるので
     マークアップは変えずCSSで止める。詳細度 (0,5,2) > a:hover (0,1,1) で後勝ちに依存しない。 */
.footer .nav_box .menu_box li a:not([href]) {
  cursor: default;
}
.footer .nav_box .menu_box li a:not([href]):hover {
  opacity: 1;
}

/* ===== 以下 SP対応（PCは無改変） ===== */
@media screen and (max-width: 750px) {

  /* グローバルの .footer_nav 横padding(13.75px)を除去し、nav_boxを全幅に（col1をx20へ） */
  .footer .footer_nav {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;                            /* グローバル115pxを除去（コピーの押し下げ・高さ過多を解消） */
  }

  /* --- nav_box を 2×2 グリッドに再構成 ---
     footer_menu / sub_f_menu を display:contents で潰し、中の4つの menu_box を
     直接グリッドアイテム化 → auto-flow で
     [用途別群 | 機種別群] / [お問い合わせ群 | SNS] の2×2（Figma）に並ぶ。 */
  .footer .nav_box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* 内容で列が広がらないよう固定 */
    column-gap: 33px;                                     /* col2をx213(Figma 54.2%)へ */
    row-gap: 53px;                                        /* 行1→行2（Figma 用途別末→お問い合わせ ≒53px） */
    padding: 55px 20px 0;                                 /* ロゴ→行1（Figma ≒60px） */
    align-items: start;
    box-sizing: border-box;
  }
  .footer .footer_nav .footer_menu,
  .footer .footer_nav .footer_menu:first-of-type,
  .footer .footer_nav .footer_menu:last-of-type {
    display: contents;
    width: auto;
  }
  .footer .sub_f_menu .menu_box {
    width: auto;
  }
  /* 見出し・項目を左端(x20)へ。ul既定padding除去＋項目間隔をFigma(30px間隔=leading20+10)へ */
  .footer .nav_box .menu_box ul {
    padding-left: 0;
    margin: 0;
  }
  .footer .nav_box .menu_box li {
    margin-bottom: 10px;
  }
  /* 見出し・リンク項目: 矢印(::after)は既存で left:-14px＝li左端より外へ飛び出す設計。
     矢印を列左端(x20/x213)に戻し、テキストは右(x34/x227)へ。Figma: ＞x20 / text x34。 */
  .footer .nav_box .menu_box li:not(.non_arrow) {
    padding-left: 14px;
  }
  .footer .nav_box .menu_box li:not(.non_arrow)::after {
    left: 0;
  }
  /* サブ項目(.non_arrow・矢印なし)はFigma通りインデント（左列x37 / 右列x230） */
  .footer .nav_box .menu_box li.non_arrow {
    padding-left: 17px;
  }
  /* SNSアイコン(.sns_icon も .non_arrow だが)はインデント不要＝見出し直下に置く */
  .footer .nav_box .menu_box li .sns_list {
    display: flex;
    align-items: center;  /* X(22)とFB(25)を縦中央で揃える */
    gap: 22px;            /* Figma アイコン間22px（flexで正確に） */
    padding-left: 0;
    margin-top: 7px;      /* 見出し→アイコンの隙間を10pxに（li margin除去分を補う） */
    margin-bottom: 0;
  }
  .footer .nav_box .sns_list .sns_icon.non_arrow {
    padding-left: 0;
  }

  /* ソーシャルメディアのアイコン: Figma image5 実測 X=22px / FB=25px / 間隔22px。
     グローバル img{max-width:100%} で親(5px)に制限され潰れるので max-width:none で解除。 */
  .footer .sns_list .sns_icon img {
    max-width: none;
    height: auto;
  }
  .footer .sns_list .sns_icon:first-child img { width: 22px; }  /* X */
  .footer .sns_list .sns_icon:last-child img  { width: 25px; }  /* Facebook（青円） */
  .footer .sns_list .sns_icon {
    margin: 0;                /* flexアイテムの残存marginがgapに加算されるのを排除（gap:22pxに一本化） */
  }

  /* ロゴ: Figma 左20px（グローバルの7.696%=約30pxを上書き） */
  .footer .footer_logo {
    left: 20px;
  }

  /* コピーライト: Figma 右下（グローバルは左寄せ/絶対配置） */
  .footer .footer_copy {
    position: static;
    float: none;
    width: 100%;
    box-sizing: border-box;
    text-align: right;
    right: auto;
    bottom: auto;
    padding: 50px 20px 40px;                      /* 上=nav→コピー間 / 下=コピー→footer下端40（Figma） */
  }
}