/* 英語サイトの問い合わせページ専用スタイル
   ---------------------------------------------------------------------------
   ・色と形は日本語サイトの実測値に合わせている（147スレの「デザイン言語」メモ）
       行動色      #FF5722（ヘッダーの「お問い合わせ」と /trial/ のCTAが同じ）
       見積・情報  #014099 / 濃紺 #1f3a5c
       ボタン角丸  製品ページ系は 999px
   ・HubSpot の吐くマークアップ（.hs-form / .hs-button / .hs-error-msg）は
     こちらから当てないと素の見た目になり、サイトから浮く。
   ・テーマの style.css を上書きしないよう、全部 .dz-contact 配下に閉じてある。
*/

:root {
  --dzc-ink: #1f2937;
  --dzc-navy: #1f3a5c;
  --dzc-blue: #014099;
  --dzc-act: #ff5722;
  --dzc-act-d: #d84719;
  --dzc-line: #dadce0;
  --dzc-bg: #f6f8fb;
}

.dz-contact { padding-bottom: 64px; }

/* ── パンくず ─────────────────────────────────────────── */
.dz-contact .dz-crumb { border-bottom: 1px solid var(--dzc-line); background: #fff; }
.dz-contact .dz-crumb .inr { padding: 12px 0; font-size: 13px; color: #667085; }
.dz-contact .dz-crumb a { color: #667085; text-decoration: none; }
.dz-contact .dz-crumb a:hover { text-decoration: underline; }
.dz-contact .dz-crumb span { margin: 0 6px; color: #b0b7c3; }

/* ── 見出し ───────────────────────────────────────────── */
.dz-contact .sec_head { background: var(--dzc-bg); padding: 40px 0 36px; }
.dz-contact h1.h1_1 {
  font-size: 32px; line-height: 1.35; font-weight: 700;
  color: var(--dzc-navy); margin: 0 0 14px;
}
.dz-contact .dz-lead {
  max-width: 44em; margin: 0; font-size: 15px; line-height: 1.85; color: #475467;
}

/* ── 2カラム ──────────────────────────────────────────── */
.dz-contact .dz-contact-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: 40px; align-items: start; padding-top: 40px;
}
.dz-contact-main { min-width: 0; }

/* ── 補足カラム ───────────────────────────────────────── */
.dz-side-box {
  border: 1px solid var(--dzc-line); border-radius: 12px;
  padding: 18px 20px; margin-bottom: 18px; background: #fff;
}
.dz-side-t {
  margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--dzc-navy);
}
.dz-side-p { margin: 0; font-size: 14px; line-height: 1.8; color: #475467; }
.dz-side-p a { color: var(--dzc-blue); }
.dz-side-list { margin: 0; padding-left: 1.1em; }
.dz-side-list li { font-size: 14px; line-height: 1.75; color: #475467; margin-bottom: 6px; }
.dz-side-links { margin: 0; padding: 0; list-style: none; }
.dz-side-links li + li { margin-top: 10px; }
.dz-side-links a {
  display: block; padding: 10px 12px; border: 1px solid var(--dzc-line);
  border-radius: 10px; text-decoration: none; transition: border-color .15s, background .15s;
}
.dz-side-links a:hover { border-color: var(--dzc-blue); background: #f7faff; }
.dz-side-links strong { display: block; font-size: 14px; color: var(--dzc-blue); }
.dz-side-links span { display: block; font-size: 12.5px; line-height: 1.6; color: #667085; margin-top: 2px; }

/* ── フォーム本体（HubSpot が吐くマークアップに当てる） ─────────── */
.dz-hsform { min-height: 320px; }
.dz-hsform .hs-form-field { margin-bottom: 18px; }
.dz-hsform label {
  display: block; font-size: 14px; font-weight: 600;
  color: var(--dzc-ink); margin-bottom: 6px;
}
.dz-hsform .hs-form-required { color: var(--dzc-act-d); margin-left: 2px; }
.dz-hsform .hs-field-desc { font-size: 12.5px; color: #667085; margin: -2px 0 6px; }

.dz-hsform input[type="text"],
.dz-hsform input[type="email"],
.dz-hsform input[type="tel"],
.dz-hsform input[type="number"],
.dz-hsform select,
.dz-hsform textarea {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px; font-size: 15px; line-height: 1.6;
  color: var(--dzc-ink); background: #fff;
  border: 1px solid #c7cdd6; border-radius: 8px;
  transition: border-color .15s, box-shadow .15s;
}
.dz-hsform textarea { min-height: 140px; resize: vertical; }
.dz-hsform input:focus, .dz-hsform select:focus, .dz-hsform textarea:focus {
  outline: none; border-color: var(--dzc-blue);
  box-shadow: 0 0 0 3px rgba(1, 64, 153, .12);
}

/* ラジオ・チェックボックスは1行ずつ。英文は横に長いので横並びにすると折れる。 */
.dz-hsform .inputs-list { list-style: none; margin: 0; padding: 0; }
.dz-hsform .inputs-list li { margin-bottom: 6px; }
.dz-hsform .inputs-list label {
  display: flex; align-items: flex-start; gap: 8px;
  font-weight: 400; font-size: 14.5px; line-height: 1.7; margin: 0;
}
.dz-hsform .inputs-list input { margin-top: 4px; flex: 0 0 auto; }

/* 送信ボタン＝サイトの行動色。日本語サイトの /trial/ CTA と同じ色。 */
.dz-hsform .hs-button,
.dz-hsform input[type="submit"] {
  -webkit-appearance: none; appearance: none;
  display: inline-block; min-width: 220px;
  padding: 15px 32px; border: 1px solid var(--dzc-act-d); border-radius: 999px;
  background: var(--dzc-act); color: #fff;
  font-size: 16px; font-weight: 600; letter-spacing: .02em;
  cursor: pointer; transition: background .15s, transform .05s;
}
.dz-hsform .hs-button:hover { background: var(--dzc-act-d); }
.dz-hsform .hs-button:active { transform: translateY(1px); }

/* エラー表示。既定は小さすぎて気づかず、離脱の原因になる。 */
.dz-hsform .hs-error-msg,
.dz-hsform .hs-error-msgs label {
  color: #b42318; font-size: 13px; font-weight: 500; margin-top: 4px;
}
.dz-hsform .hs-error-msgs { list-style: none; margin: 0; padding: 0; }

/* 送信後のインラインメッセージ */
.dz-hsform .submitted-message {
  border: 1px solid #b7dfc4; border-radius: 12px;
  background: #f2fbf5; padding: 22px 24px;
  font-size: 15px; line-height: 1.85; color: #16603a;
}
.dz-hsform .submitted-message p { margin: 0 0 10px; }
.dz-hsform .submitted-message p:last-child { margin-bottom: 0; }

.dz-contact .dz-note { font-size: 14px; line-height: 1.8; color: #475467; }
.dz-contact .dz-privacy { margin-top: 18px; font-size: 12.5px; color: #667085; }
.dz-contact .dz-privacy a { color: var(--dzc-blue); }

/* ── 送信完了 ─────────────────────────────────────────── */
.dz-thanks { font-size: 15px; line-height: 1.9; color: #475467; }
.dz-thanks-lead { font-size: 18px; color: var(--dzc-navy); margin: 0 0 14px; }
.dz-thanks p { margin: 0 0 12px; }
.dz-thanks a { color: var(--dzc-blue); }
.dz-thanks-cta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; }
.dz-thanks-cta .btn { white-space: nowrap; }

/* ── スマホ ───────────────────────────────────────────── */
@media screen and (max-width: 900px) {
  .dz-contact .dz-contact-grid { grid-template-columns: 1fr; gap: 28px; }
  /* 補足はフォームの下へ。先に読ませたいのはフォームそのもの。 */
  .dz-contact-side { order: 2; }
  .dz-contact h1.h1_1 { font-size: 25px; }
  .dz-contact .sec_head { padding: 28px 0 24px; }
  .dz-hsform .hs-button, .dz-hsform input[type="submit"] { width: 100%; min-width: 0; }
}

/* ── フォームの読み込み中 ──────────────────────────────────────────
   HubSpot のフォームは iframe で後から描画される。実測で 2.5〜13.7 秒かかった
   （初回・キャッシュ無効時）。その間ただの空白だと「壊れている」と見えて離脱するので、
   何が起きているかを見せる。 */
.dz-formwrap { position: relative; }
.dz-hsform-loading[hidden] { display: none; }
.dz-hsform-loading { padding: 4px 0 8px; }
.dz-loading-t { margin: 0 0 16px; font-size: 14px; color: #667085; }
.dz-skel {
  display: block; height: 44px; margin-bottom: 14px;
  border-radius: 8px; background: #eef1f5;
  animation: dz-skel-pulse 1.4s ease-in-out infinite;
}
.dz-skel-l { height: 14px; width: 34%; margin-bottom: 8px; border-radius: 4px; }
.dz-skel-tall { height: 132px; }
@keyframes dz-skel-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .55 } }
@media (prefers-reduced-motion: reduce) { .dz-skel { animation: none } }

/* 10秒経っても出ないときの逃げ道。行き止まりにしない。 */
.dz-hsform-slow[hidden] { display: none; }
.dz-hsform-slow {
  margin-top: 16px; padding: 14px 16px;
  border: 1px solid #f0c9a0; border-radius: 10px; background: #fff8f0;
  font-size: 14px; line-height: 1.8; color: #7a4a12;
}
.dz-hsform-slow a { color: var(--dzc-act-d); font-weight: 600; }

/* ★注意：HubSpot のフォームは iframe（同一オリジンの srcdoc）の中に描画されるため、
   このファイルの .dz-hsform input / .hs-button 等の指定は **中まで届かない**。
   フォーム自体の見た目は HubSpot のフォームエディタ側で決まる。
   ここに残してあるのは、将来 HubSpot が非iframe描画に戻った場合の受け皿。 */

/* ═══════════════════════════════════════════════════════════════════
   「この依頼は何についてか」ブロック（2026-08-28 / デザイン改訂）
   ───────────────────────────────────────────────────────────────────
   日本語サイトの productContact.php / request.php は製品画像＋製品名を
   フォームの左に出している。英語サイトは1カラム幅なのでフォームの直上に置く。

   ★見た目は **製品ページ（en-product.css の dz-redesign）に揃える**。
     訪問者は製品ページから来るので、同じ言語でないと安っぽく見える。
     実測して合わせた値:
       ・見出し小文字ラベル … 12px / letter-spacing .22em / #ad8a4e / 600（dz-cpt-ey）
       ・製品名 …………………… weight 600 / letter-spacing -.5px / #1d1d1f（dz-title の縮小）
       ・補足テキスト ………… #7c7a74（dz-eyebrow / dz-pm と同じ）
       ・リンクの矢印 ………… #ad8a4e（dz-links .ar）
       ・金は「細い1本」だけ使う。面で使うと途端に安くなる。
   ★背景は白。色面（青の塗り）を敷くと通知バナーに見えて、製品の格が落ちる。
   ═══════════════════════════════════════════════════════════════════ */
.dz-subject[hidden] { display: none; }
.dz-subject {
  margin: 0 0 34px;
  padding: 26px 28px 22px;
  background: #fff;
  border: 1px solid #eae7e1;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(20, 20, 20, .03), 0 8px 24px rgba(20, 20, 20, .045);
}
/* 上辺に走る金の細い1本。製品ページの dz-h2:after と同じ効かせ方。 */
.dz-subject { position: relative; overflow: hidden; }
.dz-subject::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #ad8a4e 0%, #d8bd8c 38%, #ece2cf 100%);
}

.dz-subject-t {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #ad8a4e;
}

/* 画像の上辺を製品名の上辺に揃える。中央揃えにすると金額行の分だけ
   画像が下がり、名前と写真が別々のものに見える（実測して直した）。 */
.dz-subject-card { display: flex; gap: 24px; align-items: flex-start; }

/* 画像は淡いグレー面に置いて「商品写真」に見せる。白地に直置きだと浮く。 */
.dz-subject-thumb[hidden] { display: none; }
.dz-subject-thumb {
  flex: 0 0 136px; width: 136px;
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  padding: 14px;
  background: #f6f5f3;
  border-radius: 10px;
}
.dz-subject-thumb img { display: block; width: 100%; height: auto; }

.dz-subject-body { flex: 1 1 auto; min-width: 0; }
.dz-subject-name {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.5px;
  line-height: 1.25;
  color: #1d1d1f;
  /* 英語の製品名は長い。折り返して隠れないようにする */
  overflow-wrap: anywhere;
}
.dz-subject-note[hidden] { display: none; }
.dz-subject-note { margin: 0; font-size: 14px; line-height: 1.7; color: #7c7a74; }

/* 金額行。ラベルを小さく前置きして「注記」であることを形で示す。 */
.dz-subject-price {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid #f0ede8;
  font-size: 13px;
  line-height: 1.85;
  color: #6b6862;
}
.dz-subject-price .k {
  display: inline-block;
  margin-right: 10px;
  padding: 2px 10px;
  border: 1px solid #d9d4ca;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8a8578;
  vertical-align: 1px;
}

.dz-subject-links { margin: 16px 0 0; font-size: 14px; line-height: 1.9; }
.dz-subject-links a {
  display: inline-block;
  margin-right: 26px;
  color: #1f3a5c;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.dz-subject-links a:hover { color: #ad8a4e; border-bottom-color: #ad8a4e; }
.dz-subject-links a .ar { margin-left: 7px; color: #ad8a4e; font-size: 17px; }

.dz-subject-fine {
  margin: 20px 0 0; padding-top: 14px;
  border-top: 1px solid #f4f2ee;
  font-size: 12px; line-height: 1.7; color: #96928a;
}

@media (max-width: 560px) {
  .dz-subject { padding: 20px 18px 18px; margin-bottom: 26px; }
  .dz-subject-t { margin-bottom: 14px; font-size: 11px; }
  .dz-subject-card { gap: 16px; align-items: flex-start; }
  .dz-subject-thumb { flex-basis: 84px; width: 84px; padding: 10px; }
  .dz-subject-name { font-size: 20px; letter-spacing: -.2px; }
  .dz-subject-note { font-size: 13px; }
  /* 狭い画面では横並びの余白が足りず1行に収まらないので縦に積む */
  .dz-subject-links a { display: block; margin-right: 0; }
}

/* ★[hidden] を後から上書きしないための保険。
   上のモバイル指定で .dz-subject-links a を display:block にしているため、
   これが無いと「製品ページを見る」を隠したはずが出たままになる。 */
.dz-subject-links a[hidden], .dz-subject-note[hidden] { display: none !important; }