/* ==========================================================================
   スター精機 コーポレートサイト / フッター ＋ スマホのメニュー

   ★貼る場所に注意
     「外観 > カスタマイズ > 追加CSS」の
     いま入っているものは消さずに、その一番下に足してください。

     順番は star-top → star-company → star-products → star-network
            → star-history → star-sustainability → star-group
            → star-action → star-footer（これ）

   ★HTMLは 外観 > ウィジェット > 「フッター上部」 に置いた
     カスタムHTMLブロックの中身です（footer-widget.html）。

   ★なぜウィジェットで自作しているか
     Lightningのフッターメニューは1階層しか出力しません。
     メニューで親子構造を作っても、子の項目がHTMLに出てこないため、
     CSSでは縦積みにできませんでした。そのため自分で組んでいます。

   ★色について
     サイト全体が白地に黒文字なので、フッターも明るいグレーにして
     最後まで流れが切れないようにしています。
     下層ページの導線帯（#f6f7f7）より少しだけ濃くして、
     帯とフッターの境目が分かるようにしました。

   ★スマホのメニュー（≡を押したときの一覧）もこのファイルに入っています。
     一番下の「スマホのメニュー」のところです。
   ========================================================================== */


/* ---- Lightningの既存フッターメニューを隠す --------------------------------
   ★メニュー自体は消さないこと。
     モバイルナビなど、他の場所で使われている可能性があります。
     ここでは表示を止めているだけです。
   -------------------------------------------------------------------------- */
.site-footer .footer-nav{ display: none !important; }


/* ---- フッター全体の色 -----------------------------------------------------
   ★コピーライトの行にだけ背景を付けると、その要素がテーマの枠
     （1180px）の中に収まっているため、左右が白く残ります。
     包んでいる .site-footer ごと塗るのが確実です。
   -------------------------------------------------------------------------- */
body:has(.st-ft) .site-footer{
  background: #f2f3f3 !important;
  border-top: 0 !important;
}
body:has(.st-ft) .site-footer-copyright{
  background: transparent !important;
  border-top: 1px solid #e2e4e5 !important;
}
body:has(.st-ft) .site-footer-copyright,
body:has(.st-ft) .site-footer-copyright p{
  color: #9a9a9a !important;
  font-size: 12px;
}


/* ---- フッターの骨組み -----------------------------------------------------
   左にロゴと住所、右に大目次を横並び。
   幅は他のページと同じ1180pxで中央ぞろえです
   -------------------------------------------------------------------------- */
.st-ft{
  --ft-wrap: 1180px;
  width: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 68px max(24px, calc((100vw - var(--ft-wrap)) / 2)) 60px;
}
.st-ft .ft-inner{
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 56px;
  align-items: start;
}

/* ウィジェット領域が勝手に付ける余白と線を消す */
.site-footer .widget:has(.st-ft),
.site-footer .widget_block:has(.st-ft){
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}


/* ---- 左：ロゴと住所 ------------------------------------------------------- */
.st-ft .ft-brand__logo{
  display: block;
  width: auto;
  height: 28px;
  margin-bottom: 26px;
}
.st-ft .ft-brand__addr{
  font-size: 13px;
  line-height: 1.9;
  font-weight: 500;
  color: #6a6a6a;
  margin-bottom: 10px;
}
.st-ft .ft-brand__tel{
  font-size: 13px;
  line-height: 1.9;
  font-weight: 700;
  color: #2b2b2b;
  letter-spacing: .02em;
}


/* ---- 右：大目次 -----------------------------------------------------------
   子を持つ列も持たない列も、対等に横へ並べています。
   列を増やすときは、ここの数字を変えてください
   -------------------------------------------------------------------------- */
.st-ft .ft-nav{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px 24px;
}
.st-ft .ft-col{ min-width: 0; }

/* スマホで開閉するためのスイッチ。パソコンでは使わないので隠します */
.st-ft .ft-col__toggle{
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* 列の見出し
   （スマホでは押すと開閉する見出しになるため、label で書いています。
     パソコンではただの見出しとして表示されます） */
.st-ft .ft-col__head{
  display: block;
  position: relative;
  font-size: 13.5px;
  font-weight: 900;
  line-height: 1.6;
  color: #1a1a1a;
  margin: 0 0 12px;
  padding: 0 0 12px;
  border-bottom: 1px solid #dcdcdc;
  cursor: default;
}
/* 子を持たない見出しは、それ自体がリンクになります。
   並んだときに高さがそろうよう、下の余白を少なくしています */
.st-ft .ft-col__head--link{
  cursor: pointer;
  transition: color .2s ease;
  margin-bottom: 14px;
}
.st-ft .ft-col__head--link:last-child{ margin-bottom: 0; }
.st-ft .ft-col__head--link:hover{ color: var(--red, #e60012); }

.st-ft .ft-col__body{ display: block; }

.st-ft .ft-nav__item{
  display: block;
  position: relative;
  padding: 6px 0 6px 12px;
  font-size: 12.5px;
  line-height: 1.7;
  font-weight: 500;
  color: #4a4a4a;
  transition: color .2s ease;
}
/* 頭の短い横線。直交の骨格にそろえています */
.st-ft .ft-nav__item::before{
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 5px; height: 1px;
  background: #b5b5b5;
  transition: background .2s ease, width .2s ease;
}
.st-ft .ft-nav__item:hover{ color: #1a1a1a; }
.st-ft .ft-nav__item:hover::before{ background: var(--red, #e60012); width: 8px; }


/* ---- タブレット ----------------------------------------------------------- */
@media (max-width: 1000px){
  .st-ft .ft-inner{
    grid-template-columns: 1fr;
    gap: 40px;
  }
  /* ロゴの下に住所と電話を横並び。
     ※以前はロゴに width: 100% を付けていたため、
       ロゴが横に引き伸ばされていました。ここで直しています */
  .st-ft .ft-brand{
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: baseline;
    gap: 12px 28px;
    padding-bottom: 32px;
    border-bottom: 1px solid #dcdcdc;
  }
  .st-ft .ft-brand__logo{
    grid-column: 1 / -1;
    justify-self: start;
    width: auto;
    margin-bottom: 4px;
  }
  .st-ft .ft-brand__addr,
  .st-ft .ft-brand__tel{ margin-bottom: 0; }
  .st-ft .ft-nav{ grid-template-columns: repeat(3, 1fr); gap: 28px 24px; }
}

/* ---- スマホ ---------------------------------------------------------------
   大目次を1列に並べ、子を持つ見出しは押すと開閉します。
   JSは使っていません（HTMLの切り替えスイッチだけで動きます）。
   -------------------------------------------------------------------------- */
@media (max-width: 620px){
  .st-ft{
    padding: 44px max(16px, calc((100vw - var(--ft-wrap)) / 2)) 36px;
  }
  .st-ft .ft-inner{ gap: 28px; }
  .st-ft .ft-brand{
    grid-template-columns: 1fr;
    gap: 2px;
    padding-bottom: 0;
    border-bottom: 0;
  }
  .st-ft .ft-brand__logo{ height: 24px; margin-bottom: 14px; }
  .st-ft .ft-brand__addr{ font-size: 12.5px; }

  /* 1列にして、上に線を1本 */
  .st-ft .ft-nav{
    display: block;
    border-top: 1px solid #dcdcdc;
  }

  /* 見出しの行。指で押しやすいよう高さを取っています */
  .st-ft .ft-col__head,
  .st-ft .ft-col__head--link{
    font-size: 14px;
    font-weight: 700;
    margin: 0;
    padding: 17px 44px 17px 2px;
    border-bottom: 1px solid #dcdcdc;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* 右端の印。子を持つ見出しは下向き、開くと上向き（赤）。
     子を持たない見出しは右向き（そのページへ移動） */
  .st-ft .ft-col__head::after{
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    width: 7px; height: 7px;
    border-right: 1.5px solid #1a1a1a;
    border-bottom: 1.5px solid #1a1a1a;
    transform: translateY(-70%) rotate(45deg);
    transition: transform .25s ease, border-color .25s ease;
  }
  .st-ft .ft-col__toggle:checked + .ft-col__head::after{
    transform: translateY(-30%) rotate(-135deg);
    border-color: var(--red, #e60012);
  }
  .st-ft .ft-col__head--link::after{
    transform: translateY(-50%) rotate(-45deg);
  }

  /* 子の項目は、見出しを押すまで隠しておく */
  .st-ft .ft-col__body{
    display: none;
    padding: 6px 0 12px;
    border-bottom: 1px solid #dcdcdc;
  }
  .st-ft .ft-col__toggle:checked ~ .ft-col__body{ display: block; }

  .st-ft .ft-nav__item{ font-size: 13px; padding: 9px 0 9px 16px; }
  .st-ft .ft-nav__item::before{ top: 20px; left: 2px; }

  /* キーボードで操作したときに、いまどこか分かるように */
  .st-ft .ft-col__toggle:focus-visible + .ft-col__head{
    outline: 2px solid var(--red, #e60012);
    outline-offset: 2px;
  }
}


/* ==========================================================================
   スマホのメニュー（≡を押したときに出る一覧）

   Lightningが出すものをそのまま使い、見た目と押しやすさだけ整えています。
   中身は 外観 > メニュー の「グローバルナビゲーション」です。

   ★行のどこを押しても開閉するようにしています
     Lightningの標準では、右端の小さな四角を押したときしか開きません。
     親の項目（製品情報・サポート・会社概要・ネットワーク）には
     リンク先がないので、文字を押しても何も起きませんでした。
     そこで、開閉ボタンを行いっぱいに広げて、行全体をボタンにしています。
     JSは足していません。

   ★行の高さ 56px は、開閉ボタンの高さと連動しています。
     変えるときは下の --mnav-row の数字だけを直してください。
   ========================================================================== */
#vk-mobile-nav{
  --mnav-row: 56px;
  padding: 58px 0 40px !important;
  background: #fff !important;
}
#vk-mobile-nav .vk-menu-acc{
  margin: 0 !important;
  border-top: 1px solid #e2e2e2 !important;
}
#vk-mobile-nav .vk-menu-acc li{
  position: relative;
  margin: 0 !important;
  border: 0 !important;
}

/* 大項目の行 */
#vk-mobile-nav .vk-menu-acc > li > a{
  display: flex !important;
  align-items: center;
  box-sizing: border-box;
  min-height: var(--mnav-row);
  padding: 0 52px 0 20px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  color: #0d0d0d !important;
  border-top: 0 !important;
  border-bottom: 1px solid #e2e2e2 !important;
  background: none !important;
}

/* 開閉ボタンを行いっぱいに広げる（文字を押しても開くように）
   四角い枠とテーマの印は消して、右端に細い山形の印を描き直しています */
#vk-mobile-nav .vk-menu-acc .acc-btn{
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: var(--mnav-row) !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  -webkit-tap-highlight-color: transparent;
}
#vk-mobile-nav .vk-menu-acc .acc-btn::before{
  content: "";
  position: absolute;
  left: auto !important;   /* テーマが左端に置く指定を打ち消す */
  right: 24px;
  top: 50%;
  width: 7px; height: 7px;
  border-right: 1.5px solid #0d0d0d;
  border-bottom: 1.5px solid #0d0d0d;
  transform: translateY(-70%) rotate(45deg);
  transition: transform .25s ease, border-color .25s ease;
}
/* 開いているときは上向き・赤 */
#vk-mobile-nav .vk-menu-acc .acc-btn-close::before{
  transform: translateY(-30%) rotate(-135deg);
  border-color: #e60012;
}
/* 開いている大項目は、文字も赤にして「いまここを開いている」と分かるように */
#vk-mobile-nav .vk-menu-acc > li:has(> .acc-btn-close) > a{
  color: #e60012 !important;
}

/* 子を持たない大項目（採用情報・お問い合わせ）は右向きの印。
   押すとそのページへ移動します */
#vk-mobile-nav .vk-menu-acc > li:not(.menu-item-has-children) > a::after{
  content: "";
  position: absolute;
  right: 26px;
  top: 50%;
  width: 7px; height: 7px;
  border-right: 1.5px solid #0d0d0d;
  border-bottom: 1.5px solid #0d0d0d;
  transform: translateY(-50%) rotate(-45deg);
}

/* 子の項目。薄いグレーの面に載せて、大項目と区別します */
#vk-mobile-nav .vk-menu-acc .sub-menu{
  margin: 0 !important;
  padding: 0 !important;
  background: #f6f7f7;
}
#vk-mobile-nav .vk-menu-acc .sub-menu a{
  display: block !important;
  position: relative;
  padding: 15px 20px 15px 38px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  color: #2b2b2b !important;
  border-top: 0 !important;
  border-bottom: 1px solid #e6e8e8 !important;
  background: none !important;
}
/* 頭の短い横線。フッターの子の項目とそろえています
   （2行に折り返しても1行目の高さに来るよう、上からの位置で決めています） */
#vk-mobile-nav .vk-menu-acc .sub-menu a::before{
  content: "";
  position: absolute;
  left: 22px;
  top: 26px;
  width: 6px; height: 1px;
  background: #b5b5b5;
}

@media (prefers-reduced-motion: reduce){
  .st-ft .ft-col__head::after,
  #vk-mobile-nav .vk-menu-acc .acc-btn::before{ transition: none; }
}