/* ==========================================================================
   スター精機 コーポレートサイト / お問い合わせページ

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

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

     ページのタイトル・パンくずは star-company.css のものをそのまま使います。
     （HTMLの一番外側に class="st-cmp st-cnt" と書いてあるため）

   ★フォーム本体はMRCが描いています。
     ここで整えているのは、フォームのまわり（導入文・案内・枠）だけです。
   ========================================================================== */


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

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


/* ---- ページ全体の幅 --------------------------------------------------------
   導入文・案内・フォームを、幅860pxの1本の列にそろえて画面の中央に置いています。
   （フォームだけ中央、文章だけ左、とずれないように）
   幅を変えるときは、この 860px の数字だけを直してください */
.st-cnt .cnt-lead .wrap,
.st-cnt .cnt-form .wrap{
  max-width: 860px;
}

/* ---- 導入文と案内 ----------------------------------------------------------
   文字の大きさ・行間・色は、製品ラインアップや国内拠点の導入文と同じです
   （15.5px / 行間2.15 / #2b2b2b）。4行とも同じ大きさにそろえています。
   お急ぎの方・アインツの案内は、面や線で囲まず文字だけで置いています
   （9/25 わただ確定） */
.st-cnt .cnt-lead{ padding: 54px 0 0; background: #fff; }
.st-cnt .cnt-lead__txt,
.st-cnt .cnt-notice__main,
.st-cnt .cnt-notice__sub{
  font-size: 15.5px;
  line-height: 2.15;
  font-weight: 500;
  color: #2b2b2b;
  /* 2026-10-14：タイトルを中央にしたので、導入文と案内の4行も中央に（行が長くなりすぎないよう 46em まで） */
  max-width: 46em;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  word-break: auto-phrase;
  text-wrap: balance;
}
/* 導入文と案内のあいだは、1行ぶんより少し狭い余白で区切ります */
.st-cnt .cnt-notice{
  margin-top: 1.4em;
}
/* 文中のリンクは、下線で「押せる」と分かるように */
.st-cnt .cnt-notice a{
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity .2s ease;
}
.st-cnt .cnt-notice a:hover{ opacity: .7; }


/* ---- フォーム ------------------------------------------------------------
   フォームの中身（表）がMRC側で決まった幅のときも、列の中央に来るようにしています */
.st-cnt .cnt-form{ padding: 44px 0 96px; background: #fff; }
.st-cnt .cnt-form__box form,
.st-cnt .cnt-form__box table{
  margin-left: auto !important;
  margin-right: auto !important;
}
/* 入力欄を押したときの枠
   サイト全体では、キーボード操作用に「赤い太枠」が出る指定をしています
   （star-company.css の :focus-visible）。
   入力欄はマウスで押しても毎回この枠が出てしまうため、
   フォームの中だけ、黒い細い枠に置き換えています。
   ※枠を完全に消すと、いまどこに入力しているか分からなくなるので残しています */
.st-cnt .cnt-form__box :focus-visible{
  outline: none !important;
}
.st-cnt .cnt-form__box input[type="text"]:focus,
.st-cnt .cnt-form__box input[type="email"]:focus,
.st-cnt .cnt-form__box input[type="tel"]:focus,
.st-cnt .cnt-form__box input:not([type]):focus,
.st-cnt .cnt-form__box textarea:focus,
.st-cnt .cnt-form__box select:focus{
  outline: none !important;
  border-color: #0d0d0d !important;
  box-shadow: 0 0 0 1px #0d0d0d !important;
}
/* ラジオボタン・チェックボックス・ボタンは、キーボードで操作したときだけ
   細い黒枠を出します（マウスで押したときは出ません） */
.st-cnt .cnt-form__box input[type="radio"]:focus-visible,
.st-cnt .cnt-form__box input[type="checkbox"]:focus-visible,
.st-cnt .cnt-form__box button:focus-visible,
.st-cnt .cnt-form__box input[type="submit"]:focus-visible,
.st-cnt .cnt-form__box input[type="button"]:focus-visible,
.st-cnt .cnt-form__box input[type="reset"]:focus-visible{
  outline: 1px solid #0d0d0d !important;
  outline-offset: 2px !important;
}

/* 読み込み待ちの文言 */
.st-cnt .cnt-form__box > [data-mrc-webform] > p{
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink-soft);
}
.st-cnt .cnt-form__box > [data-mrc-webform] > p a{
  color: var(--red);
  text-decoration: underline;
}


/* ---- スマホ --------------------------------------------------------------- */
@media (max-width: 620px){
  .st-cnt .cnt-lead{ padding: 40px 0 0; }
  /* せまい画面では文中の改行を外して、自然に折り返させます */
  .st-cnt .cnt-lead__txt br{ display: none; }
  .st-cnt .cnt-form{ padding: 36px 0 64px; }
}