/* ==========================================================================
   スター精機 コーポレートサイト / 国内拠点ページ

   ★貼る場所に注意
     「外観 > カスタマイズ > 追加CSS」の
     いま入っているもの（star-top.css / star-company.css / star-products.css）
     は消さずに、その一番下に、このファイルの中身を足してください。

     ページのタイトル・パンくずは star-company.css のものをそのまま使います。
     （HTMLの一番外側に class="st-cmp st-net" と書いてあるため）
     ここでは、タイトルの英字と、拠点ページの中身を書いています。
   ========================================================================== */


/* 写真の指定は star-images.css にまとめています（2026-10-02）。写真台帳.md も参照 */

/* タイトルの大きな英字を NETWORK に差し替え（大きさ・位置は star-company.css の共通の指定。2026-10-14 から ::before の1か所だけ） */
body:has(.st-net) .page-header > *:first-child::before{
  content: "NETWORK";
}


/* ---- 導入文 -------------------------------------------------------------- */
.st-net .net-lead{ padding: 54px 0 6px; background: #fff; }
.st-net .net-lead__txt{
  max-width: 46em;
  font-size: 15.5px;
  line-height: 2.15;
  font-weight: 500;
  color: #2b2b2b;
  /* 2026-10-14：タイトルを中央にしたので、導入文も中央に。意味のまとまりで折り返し、行の長さをそろえる */
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  word-break: auto-phrase;
  text-wrap: balance;
}

/* ---- 管轄へのジャンプリンク ----------------------------------------------- */
.st-net .net-nav{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
  justify-content: center;
}
.st-net .net-nav__item{
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border: 1px solid var(--line);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.st-net .net-nav__item:hover{
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* 飛んだ先で見出しがヘッダーの下に隠れないよう、少し余白を取る */
.st-net .net-group{ scroll-margin-top: 96px; }


/* ---- グループの見出し ----------------------------------------------------- */
.st-net .net-group{ padding: 44px 0 0; background: #fff; }
.st-net .net-group__ttl{
  display: flex;
  align-items: baseline;
  gap: 18px;
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  padding: 0 0 12px;
  margin-bottom: 26px;
  border-bottom: 2px solid var(--ink);
}
.st-net .net-group__en{
  font-size: 11px;
  letter-spacing: .16em;
  font-weight: 700;
  color: var(--red);
}
/* 本社・出雲工場は拠点がひとつなので、見出しは英字だけにして
   日本語の名称はカード側に任せています */
.st-net .net-group__ttl--en{
  font-size: 0;
  padding-bottom: 14px;
}
.st-net .net-group__ttl--en .net-group__en{ font-size: 12px; }


/* ---- 本社・出雲工場（写真つき） ------------------------------------------- */
.st-net .net-main{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.st-net .net-main__photo{
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-color: #eceeed;
  background-image: var(--ph-flat);
}
.st-net .net-main__photo--hq{ background-image: var(--net-hq), var(--ph-flat); }
.st-net .net-main__photo--izumo{ background-image: var(--net-izumo), var(--ph-flat); }
.st-net .net-main__body{ padding-top: 4px; }


/* ---- 拠点カード ----------------------------------------------------------- */
.st-net .net-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 26px;
}
/* WordPressが差し込む余計な要素でレイアウトが崩れないように */
.st-net .net-grid > :not(.net-item){ display: none !important; }

.st-net .net-item{
  display: flex;
  flex-direction: column;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
/* 拠点名。テーマが勝手に付ける下線は消しています */
.st-net .net-item__name{
  font-size: 17px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 12px;
  padding-bottom: 0;
  border: 0 !important;
  background: none !important;
}
.st-net .net-item__name::after,
.st-net .net-item__name::before{ content: none !important; }
.st-net .net-main .net-item__name{ font-size: 21px; margin-bottom: 16px; }
.st-net .net-item__addr{
  font-size: 14px;
  line-height: 1.9;
  color: #2b2b2b;
  font-weight: 500;
  margin-bottom: 4px;
}
.st-net .net-item__tel{
  font-size: 14px;
  line-height: 1.9;
  color: #2b2b2b;
  font-weight: 500;
  margin-bottom: 14px;
}
/* 地図へのリンク。ページの中に地図を埋め込むと重くなるので、
   押したときにGoogleマップを別タブで開く形にしています。
   margin-top: auto でカードの一番下にそろえています */
.st-net .net-item__map{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  align-self: flex-start;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  transition: color .18s ease;
}
.st-net .net-item__map:hover{ color: var(--red); }
.st-net .net-item__ar{
  color: var(--red);
  font-size: 15px;
  transition: transform .25s ease;
}
.st-net .net-item__map:hover .net-item__ar{ transform: translateX(5px); }


/* ==========================================================================
   海外拠点ページ（st-gnet）

   国内拠点と同じ体裁を使い、海外だけに必要な部分を足しています。
   ========================================================================== */

/* タイトルの大きな英字を GLOBAL に差し替え（大きさ・位置は star-company.css の共通の指定。2026-10-14 から ::before の1か所だけ） */
body:has(.st-gnet) .page-header > *:first-child::before{
  content: "GLOBAL";
}

/* 国の見出し。地域の見出し（黒い太線）の下に入ります */
.st-gnet .net-country{
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  margin: 34px 0 18px;
  padding-left: 14px;
  border-left: 3px solid var(--red);
}
.st-gnet .net-country:first-of-type{ margin-top: 0; }
.st-gnet .net-country__count{
  font-size: 12px;
  font-weight: 600;
  color: #8f8f8f;
  letter-spacing: .02em;
}

/* 海外は法人名が長いので、少し小さめに */
.st-gnet .net-item__name{
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: .01em;
}
.st-gnet .net-item__addr{ font-size: 13.5px; line-height: 1.85; }
.st-gnet .net-item__tel{ font-size: 13.5px; line-height: 1.85; }

/* 担当地域（アメリカのみ） */
.st-gnet .net-item__area{
  font-size: 12.5px;
  line-height: 1.8;
  color: #6f6f6f;
  font-weight: 500;
  margin-bottom: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}

/* 現地サイトへのリンク */
.st-gnet .net-item__site{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  align-self: flex-start;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  transition: color .18s ease;
}
.st-gnet .net-item__site:hover{ color: var(--red); }
.st-gnet .net-item__site:hover .net-item__ar{ transform: translateX(5px); }

@media (max-width: 620px){
  .st-gnet .net-country{
    margin: 26px 0 14px;
    font-size: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}


/* ---- もう一方の拠点ページへの導線 ------------------------------------------
   国内拠点ページと海外拠点ページの両方で、この指定を使っています。

   薄い帯を画面の左右いっぱいまで伸ばしています。
   中身は他のページと同じ1180pxで中央に置いたままです。

   ★沿革ページ・製品ラインアップの導線と同じ形にそろえてあります。
     幅を変えるときは --st-wrap の数字だけ動かしてください。
   -------------------------------------------------------------------------- */
.st-net .net-links{
  --st-wrap: 1180px;
  background: #f6f7f7;
  margin-top: 76px;
  /* いったん画面いっぱいに広げてから、左右の余白で中身を中央に寄せています */
  width: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 54px max(24px, calc((100vw - var(--st-wrap)) / 2)) 58px;
}
.st-net .net-links__inner{
  /* 外側で幅を決めているので、こちらの幅指定は外します */
  width: auto;
  max-width: none;
  display: flex;
  align-items: center;
  /* 2026-10-14：左右に分けず、文とボタンの組ごと中央に */
  justify-content: center;
  gap: 24px 56px;
  flex-wrap: wrap;
}
.st-net .net-links__lead{
  font-size: 15px;
  line-height: 2;
  font-weight: 600;
  color: var(--ink);
}
.st-net .net-links__btn{
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  min-width: 250px;
  padding: 17px 24px;
  border: 1px solid var(--ink);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  flex: none;
  transition: background .22s ease, color .22s ease;
}
/* 乗せたとき：黒の塗りつぶしは強いので、薄いグレーの面に。矢印が少し右へ（2026-10-14） */
.st-net .net-links__btn:hover{ background: #f1f2f3; }
.st-net .net-links__btn .ar{ transition: transform .22s ease; }
.st-net .net-links__btn:hover .ar{ transform: translateX(4px); }
.st-net .net-links__btn .ar{ color: var(--red); font-size: 16px; }


/* ---- スマホ・タブレット --------------------------------------------------- */
@media (max-width: 1000px){
  .st-net .net-grid{ grid-template-columns: repeat(2, 1fr); }
  .st-net .net-main{ grid-template-columns: 1fr; gap: 24px; }
  .st-net .net-main__photo{ max-width: 560px; }
}

@media (max-width: 620px){
  .st-net .net-lead{ padding: 40px 0 4px; }
  .st-net .net-nav{ gap: 8px; margin-top: 22px; }
  .st-net .net-nav__item{ padding: 9px 14px; font-size: 13px; }
  .st-net .net-group{ padding-top: 34px; scroll-margin-top: 72px; }
  .st-net .net-group__ttl{
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-size: 19px;
    margin-bottom: 20px;
  }
  .st-net .net-grid{ grid-template-columns: 1fr; gap: 24px; }
  .st-net .net-links{
    margin-top: 54px;
    padding: 40px max(16px, calc((100vw - var(--st-wrap)) / 2)) 44px;
  }
  .st-net .net-links__inner{ flex-direction: column; align-items: stretch; gap: 22px; }
  .st-net .net-links__lead{ text-align: center; }
  .st-net .net-links__btn{ width: 100%; }
}