@charset "UTF-8";
/* ==========================================================================
   SMP埋め込みフォーム 上書きCSS（MY LIV PROJECT お問い合わせ）
   --------------------------------------------------------------------------
   シャノンSMPの埋め込みフォーム（embedded_form.js が div.smpForm 内に生成する
   ss_* クラスのHTML）に、元々の自作フォーム（contact.html の .c-form 設計・
   Figma実測値）の見た目を強制適用する。
   生成されるHTML（土台）は変更できないため、CSSのみで上書きする。

   読み込み順: 2026-08-20 詳細度を強化し**読み込み順に依存しない**よう改修済み
   （全セレクタを .smpForm 配下に限定＝SMP標準CSSより常に詳細度で勝つ）。
   テンプレートの <head> に共通で入れてもよい。フォームの無いページでは
   1ルールもマッチしないため他ページへの影響は無い。
   <link rel="stylesheet" href="https://edunet.smktg.jp/static/css/embedded_form.css">
   <link rel="stylesheet" href="smp-form-override.css">  ← これ

   生成DOMの構造（2026-08-20 実機取得）:
   .smpForm > form > .ss_container > .ss_contents
     ├ .ss_visitor_form > fieldset.ss_field(.ss_required_field)#ss_xxx
     │    ├ .ss_form_title（ラベル + span.ss_user_notnull ※）
     │    └ .ss_grid > .ss_input（input/select、.ss_leftComment 等）
     ├ .ss_enquete_form > fieldset.ss_enquete_field > .ss_enquete_title + .ss_grid
     └ .ss_btnArea > p > input[type=button]
   ========================================================================== */

/* ---------- 白箱（.c-form__box 相当） ---------- */
div.smpForm {
  box-sizing: border-box;
  width: auto;
  max-width: 980px;
  margin: 10px auto 0;
  padding: 40px 12px 40px 13px;
  border-radius: 12px;
  background: #ffffff;
}

/* ---------- 行（fieldset ＝ .c-form__row 相当） ---------- */
.smpForm .ss_contents fieldset {
  margin: 0;
  padding: 10px 9px 21px;
  border: 1px solid #c8c8c8;
  border-bottom: 0;
  background: #ffffff;
}

/* SMP既定の「1行目だけ margin-top:20px」を無効化 */
.smpForm .ss_field:first-child { margin-top: 0; }

/* ゼブラ（奇数=薄グレー）。visitor(11行)→enquete と連続して交互になるよう
   SMP既定と同じ規則を色だけ揃えて再宣言（hover での色変化も打ち消す） */
.smpForm .ss_field { background: #ffffff; }.smpForm .ss_field:nth-child(odd) { background: #f9f9f9; }.smpForm .ss_enquete_field { background: #ffffff; }.smpForm .ss_enquete_field:nth-child(even) { background: #f9f9f9; }.smpForm .ss_field:hover { background: #ffffff; }.smpForm .ss_field:nth-child(odd):hover { background: #f9f9f9; }.smpForm .ss_enquete_field:hover { background: #ffffff; }.smpForm .ss_enquete_field:nth-child(even):hover { background: #f9f9f9; }

/* 最終行にだけ下枠 */
.smpForm .ss_enquete_form fieldset:last-of-type { border-bottom: 1px solid #c8c8c8; }

/* ---------- ラベル（.c-form__label 相当） ---------- */
.smpForm .ss_form_title,
.smpForm .ss_enquete_title {
  margin-bottom: 22px;
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
  color: #51565a;
}

/* 必須マーク（※） */
.smpForm .ss_user_notnull { color: #c80000; }

/* ---------- 入力エリア（.c-form__field 相当） ---------- */
.smpForm .ss_grid { gap: 3px 10px; }.smpForm .ss_input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  width: 100%;
}

/* 補助ラベル（姓：名：）・注記（例：012-345-6789 等） */
.smpForm .ss_leftComment,
.smpForm .ss_rightComment,
.smpForm .ss_upComment {
  margin: 0;
  font-size: 12px;
  line-height: 17px;
  color: #787878;
}.smpForm .ss_bottomComment {
  margin-top: 3px;
  font-size: 12px;
  line-height: 17px;
  color: #787878;
}

/* ---------- 入力部品（.c-form input 相当） ---------- */
.smpForm .ss_contents input[type="text"],
.smpForm .ss_contents input[type="tel"],
.smpForm .ss_contents input[type="email"],
.smpForm .ss_contents select,
.smpForm .ss_contents textarea {
  box-sizing: border-box;
  height: 41px;
  padding: 0 10px;
  border: 1px solid #c8c8c8;
  border-radius: 3px;
  font: inherit;
  font-size: 14px;
  color: inherit;
  background: #ffffff;
}

/* SMP既定の「必須項目はピンク枠」を通常枠色に戻す（元デザインに必須色枠は無い） */
.smpForm .ss_required_field input,
.smpForm .ss_required_field input:focus {
  border: 1px solid #c8c8c8;
  box-shadow: none;
  outline: revert;
}

/* SP: 入力は行幅いっぱい。ラベル付きは label+input が1組 */
.smpForm .ss_input > input[type="text"],
.smpForm .ss_input > input[type="email"],
.smpForm .ss_input > select {
  flex: 1 1 auto;
  width: 100%;
}.smpForm .ss_input > .ss_leftComment + input { width: auto; }

/* 郵便番号だけは横並びを維持（SP 140px×2） */
.smpForm #ss_zip .ss_input { width: auto; flex-wrap: nowrap; }.smpForm #ss_zip .ss_input input { width: 140px; flex: none; }

/* テキストエリア（お問い合わせ内容） */
.smpForm .ss_contents textarea {
  width: 100%;
  height: 110px;
  padding: 10px;
}

/* 同意チェックボックス */
.smpForm .ss_input input[type="checkbox"] {
  width: 12px;
  height: 12px;
  margin: 0 6px 0 0;
  border-radius: 0;
}.smpForm [id="ss_VisitorData.attribute1"] .ss_input {
  font-size: 12px;
  line-height: 17px;
}

/* ---------- 送信ボタン（.c-form__submit 相当） ---------- */
.smpForm .ss_btnArea { margin-top: 40px; text-align: center; }.smpForm .ss_btnArea p { margin: 0; }.smpForm .ss_btnArea input {
  width: 240px;
  height: 45px;
  padding: 0;
  border: none;
  border-radius: 5px;
  font-family: inherit;
  font-size: 22px;
  line-height: 32px;
  font-weight: 600;
  color: #ffffff;
  background-color: #ea635a;
  cursor: pointer;
}

/* ---------- 完了メッセージ ---------- */
.smpForm .ss_complete_message {
  min-height: 200px;
  font-size: 16px;
  line-height: 2;
}

/* ==========================================================================
   PC（768px〜）
   ========================================================================== */
@media screen and (min-width: 768px) {div.smpForm {
    padding: 63px 40px 62px;
    border-radius: 16px;
  }

  /* 行を「ラベル列 295px + 入力列」の2カラムに（.c-form__row の PC 仕様） */
.smpForm .ss_contents fieldset {
    display: grid;
    grid-template-columns: 295px 1fr;
    align-items: start;
    padding: 10px 11px 11px;
  }.smpForm .ss_form_title,
.smpForm .ss_enquete_title {
    margin-bottom: 0;
    padding-top: 12px;
    font-size: 16px;
    line-height: 23px;
  }.smpForm .ss_grid { gap: 8px 4px; }.smpForm .ss_input { width: auto; flex-wrap: nowrap; }.smpForm .ss_contents input[type="text"],
.smpForm .ss_contents input[type="tel"],
.smpForm .ss_contents input[type="email"],
.smpForm .ss_contents select { height: 44px; }

  /* 項目ごとの入力幅（contact.html の --fw 実測値） */
.smpForm #ss_name .ss_input > input,
.smpForm #ss_name_ka .ss_input > input { width: 151px; flex: none; }.smpForm #ss_company_name .ss_input > input,
.smpForm #ss_division .ss_input > input,
.smpForm #ss_position .ss_input > input,
.smpForm #ss_address1 .ss_input > input { width: 352px; flex: none; }.smpForm #ss_zip .ss_input input { width: 56px; }.smpForm #ss_zip .ss_input:nth-of-type(2) input { width: 64px; }.smpForm #ss_prefecture_master_id select { width: 106px; flex: none; }.smpForm #ss_tel .ss_input > input { width: 192px; flex: none; }.smpForm #ss_email .ss_input > input { width: 352px; flex: none; }.smpForm .ss_enquete_field select { width: 192px; flex: none; }.smpForm .ss_contents textarea { width: 548px; height: 113px; }.smpForm [id="ss_VisitorData.attribute1"] .ss_input {
    font-size: 16px;
    line-height: 23px;
  }.smpForm .ss_btnArea { margin-top: 60px; }.smpForm .ss_btnArea input { width: 250px; height: 50px; }
}

/* ---------- 下コメント（ss_bottomComment）を入力欄の下に落とす ----------
   2026-09-02 ユーザー指摘。メールアドレスの注記が PC 幅で入力欄の右に並んでいた。

   原因は SMP 側の設定ではなく、本ファイルのレイアウト指定。
   実機 DOM は正しく下コメントとして出力されている:
     <div class="ss_input">
       <input type="email" …>
       <div class="ss_bottomComment">※E-mailアドレスの入力間違いが…</div>
     </div>
   ところが .ss_input は flex かつ flex-wrap:nowrap のため、
   入力欄(352px)＋注記(219px) が .ss_input(581px) に収まってしまい横並びになる。
   SP では幅が足りず自然に折り返るので、PC 幅でだけ症状が出ていた。

   :has() で「下コメントを含む行」だけに wrap を許可し、注記を 100% 幅にして
   必ず次の行へ送る。左コメント（姓：/名：）と右コメント（例：012-…）の行は
   セレクタが当たらないため nowrap のまま＝現状維持。
   ※ 実機で PC1440 / SP375 とも検証済み。SP は変化なし（元から下に出ている）。 */
.smpForm .ss_input:has(> .ss_bottomComment) { flex-wrap: wrap; }

.smpForm .ss_input > .ss_bottomComment {
  flex: 0 0 100%;
  width: 100%;
  margin-top: 3px;
}