@charset "UTF-8";
/* Noto Sans JP / Noto Serif JP（フォント指定をこのファイルにまとめるため CSS から読み込みます。
   読み込めない環境では font-family の代替フォントに落ちるだけで、レイアウトは崩れません）*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@400;500;600&display=swap");

/* =====================================================================
   お問い合わせフォーム  —  メールフォームシステム用スタイル
   Theme: cmc-xmanicom

   ■ 設置場所
     メールフォームシステムの css/form.css として設置します。
     テンプレート（mailform/contact.html）は
       <link rel="stylesheet" href="css/form.css?{$update_time}" />
     の 1 本だけを読み込むため、このファイルだけで完結する作りにしています。
     コーポレートサイトの theme.css は読み込まれない前提です（配色は下の
     :root にサイトと同じ値を持たせています）。

   ■ このページは iframe の中に表示されます
     フォームはコーポレートサイトの contact.html に iframe で埋め込まれます。
     ヘッダー・フッター・ページタイトル帯は埋め込み先（サイト側）が持つため、
     このファイルはフォーム本体（#wrapper）のスタイルだけを持ちます。
     上下の余白も埋め込み先のセクション余白に任せ、ここでは詰めています。

   ■ フォーム本体は HTML を変更できません
     セレクタはシステムが出力する HTML（#wrapper / #main / .section /
     .section__ttl / #txt_explain / .red_txt / .table / .button_box）に
     合わせています。フォーム項目を増減してもそのまま同じデザインになります。

   ■ 外部ファイルを読みに行きません
     サイトの assets/（CSS・JS・画像）や partials/ は一切参照しません。
     外部への読み込みは冒頭のフォント（Google Fonts）だけで、読み込めない
     環境では font-family の代替フォントに落ちるだけです。
   ===================================================================== */

/* ---- Design tokens（コーポレートサイト theme.css と同じ値）---- */
:root{
  --blue:            #2f74c0;   /* 基本ブルー */
  --blue-dark:       #1f5fa8;   /* 英字ラベル */
  --btn-from:        #5aa0dd;   /* ボタングラデ 明 */
  --btn-to:          #2f74c0;   /* ボタングラデ 濃 */
  --ink:             #222528;   /* 濃い文字 */
  --ink-soft:        #4a4f55;   /* 本文 */
  --ink-mute:        #7a8088;   /* 補助テキスト */
  --line:            #e3e6ec;   /* 罫線 */
  --bg-hero:         #eaf1f8;   /* 淡いブルー背景 */
  --error:           #c0392b;   /* エラー文字 */
  --wrap:            1120px;    /* コンテンツ最大幅 */
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:"Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-size:15px; line-height:1.9; color:var(--ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
a:hover{ opacity:.85; }

/* =====================================================================
   フォーム本体
   ---------------------------------------------------------------------
   埋め込み先（サイトの contact.html）のセクションが上下に余白を持つため、
   ここでは上下の余白をほとんど取りません。左右も iframe の枠に合わせます。
   ===================================================================== */
#wrapper{ padding:36px 0 40px; }
#main{ max-width:var(--wrap); margin:0 auto; padding:0 32px; }

/* ページ見出し（{$basic_formname}）
   埋め込み先のタイトル帯に「お問い合わせ / CONTACT」が出ているため、
   ここでは英字ラベルを重ねず、フォーム名だけを見出しにします。 */
.section__ttl{
  margin:0;
  font-family:"Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size:24px; font-weight:500; letter-spacing:.12em; line-height:1.6;
  color:var(--ink); text-align:center;
}
.section__body{ max-width:900px; margin:0 auto; padding-top:32px; }

/* 記入方法の説明 */
#txt_explain{
  max-width:860px; margin:0 auto 34px;
  font-size:15px; color:var(--ink-soft); line-height:2.05; text-wrap:pretty;
}
#txt_explain p{ margin:0; }

/* ---------------------------------------------------------------------
   エラーメッセージ（{$form_error}）

   ★ エラーが無いときは何も表示されません。
     背景・罫線・余白は「中身があるときだけ」付けています。
     空のとき（空文字・改行だけ・空タグだけ）は高さ 0 になり、
     前後の余白に吸収されて完全に消えます。
     display:none に頼らないので、システムの出力に空白が混ざっても
     空の赤枠が出ることはありません。
   --------------------------------------------------------------------- */
.red_txt{
  max-width:860px; margin:0 auto 28px;
  font-size:14px; font-weight:700; line-height:1.9;
  color:var(--error);
}
/* 中身のあるタグが入ったときだけ枠を出す（<span></span> のような空タグは対象外）*/
.red_txt:has(*:not(:empty)),
.red_txt:has(img){
  padding:16px 20px;
  background:#fdf0f0;
  border:1px solid #f0c3c3; border-left:4px solid var(--error); border-radius:8px;
}
/* システムがリストや段落で出力した場合の余白調整 */
.red_txt > :first-child{ margin-top:0; }
.red_txt > :last-child{ margin-bottom:0; }
.red_txt ul, .red_txt ol{ margin:0; padding-left:1.4em; }
.red_txt a{ color:var(--error); text-decoration:underline; }

/* ---------------------------------------------------------------------
   入力表（{$form_data}）
   コーポレートサイトの表組み（.data-table）と同じ見た目です。
   --------------------------------------------------------------------- */
.table{
  width:100%; border-collapse:collapse; margin:0;
  font-size:14px; color:var(--ink-soft); line-height:1.95;
}
.table th, .table td{
  border:1px solid var(--line); padding:16px 18px; text-align:left; vertical-align:top;
  overflow-wrap:anywhere;
}
.table th{ background:#f5f6f8; color:var(--ink); font-weight:700; width:270px; }
/* 必須マーク */
.table .red{ color:var(--error); margin-left:6px; font-weight:700; }

/* 入力欄 */
.table input[type="text"],
.table input[type="email"],
.table input[type="tel"],
.table input[type="number"],
.table input[type="password"],
.table select,
.table textarea{
  width:100%; padding:11px 14px;
  border:1px solid #ccd3dc; border-radius:6px; background:#fff;
  font-family:inherit; font-size:14px; line-height:1.7; color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.table textarea{ display:block; min-height:150px; resize:vertical; }
.table input:focus,
.table select:focus,
.table textarea:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(47,116,192,.15);
}
/* ラジオ・チェックボックス（幅はシステム出力の style="width:20px" が優先されます）*/
.table input[type="radio"],
.table input[type="checkbox"]{
  height:18px; accent-color:var(--blue); vertical-align:middle; margin:0 6px 0 0; cursor:pointer;
  box-shadow:none;
}
.table label{ display:inline-block; margin-right:22px; cursor:pointer; }

/* 確認画面など、入力欄が無く文字だけのセル */
.table td{ color:var(--ink-soft); }

/* ---------------------------------------------------------------------
   資料請求に関する個人情報取扱いへの同意書（contact.html に直書きした行）

   本文は 6 行分だけ見せて、続きは枠の中をスクロールして読んでいただきます。
   行数を変えるときは --pp-lines の数字だけを直してください。高さは
   「1 行の高さ × 行数 ＋ 上下の余白 ＋ 上下の枠線」で自動計算します。
   （枠が高くなるとフォーム全体が高くなり、埋め込み先（contact.html）の
     iframe の高さも form-embed.js が追従して変えます）
   --------------------------------------------------------------------- */
.privacy-policy__body{
  --pp-lines:6;            /* 表示する行数 */
  --pp-line-height:1.95;   /* 1 行の高さ（下の line-height と共用します）*/
  --pp-padding-y:14px;     /* 枠の内側の上下の余白（下の padding と共用します）*/

  /* 1em は、この要素の font-size（13px）ぶんの長さです。
     box-sizing:border-box のため、余白と枠線も高さに含めて計算します。 */
  max-height:calc(var(--pp-lines) * var(--pp-line-height) * 1em
                  + var(--pp-padding-y) * 2 + 2px);
  overflow-y:auto;
  /* 読み終えてもページ側へスクロールが伝わらないようにします */
  overscroll-behavior:contain;
  padding:var(--pp-padding-y) 16px;
  border:1px solid var(--line); border-radius:6px; background:#fbfcfd;
  font-size:13px; line-height:var(--pp-line-height);
}
.privacy-policy__body > :first-child{ margin-top:0; }
.privacy-policy__body > :last-child{ margin-bottom:0; }
.privacy-policy__body p{ margin:0 0 12px; }
.privacy-policy__body ul{ margin:0 0 12px; padding-left:1.3em; }
.privacy-policy__body li{ margin-bottom:6px; }
.privacy-policy__body li:last-child{ margin-bottom:0; }
.privacy-policy__end{ text-align:right; }

/* ---------------------------------------------------------------------
   ボタン
   font-size:0 は「[サイトへ戻る]」の角括弧（HTML 直書きの文字）を
   消すためのものです。中のボタン・リンクには個別に文字サイズを指定します。
   --------------------------------------------------------------------- */
.button_box{
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:16px;
  margin-top:44px;
  font-size:0;
}
/* 「サイトへ戻る」の行は少し詰めます */
form + .button_box{ margin-top:24px; }

/* 確認・送信ボタン
   背景は background-color（土台の青）＋ background-image（グラデ）の 2 段構え。
   グラデーションが効かない環境でも「白背景に白文字」になりません。 */
.button_box input[type="submit"],
.button_box input[type="button"],
.button_box button{
  min-width:260px; padding:16px 26px; border:none; border-radius:999px;
  font-family:inherit; font-size:15px; font-weight:700; line-height:1;
  color:#fff;
  background-color:var(--btn-to);
  background-image:linear-gradient(120deg, var(--btn-from), var(--btn-to));
  box-shadow:0 6px 16px rgba(47,116,192,.28);
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;
  -webkit-appearance:none; appearance:none;
}
.button_box input[type="submit"]:hover,
.button_box input[type="button"]:hover,
.button_box button:hover{
  transform:translateY(-1px); box-shadow:0 10px 22px rgba(47,116,192,.34);
}
/* 「戻る」「修正」など、内容が確定しないボタンは白地＋青枠に */
.button_box input[value*="戻"],
.button_box input[value*="修正"],
.button_box input[type="reset"]{
  color:var(--blue);
  background-color:#fff; background-image:none;
  border:1.5px solid var(--blue);
  box-shadow:none;
}
.button_box input[value*="戻"]:hover,
.button_box input[value*="修正"]:hover,
.button_box input[type="reset"]:hover{
  color:#fff; background-color:var(--blue); transform:none;
}

/* 「サイトへ戻る」リンク（{$basic_moveurl}）*/
.button_box a{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-width:190px; padding:12px 20px; border-radius:999px;
  font-size:14px; font-weight:700; line-height:1; text-decoration:none;
  color:var(--blue); background:#fff; border:1.5px solid var(--blue);
  transition:background-color .15s ease, color .15s ease;
}
.button_box a::before{ content:"\2039"; font-size:15px; line-height:1; }
.button_box a:hover{ background:var(--blue); color:#fff; }

/* =====================================================================
   レスポンシブ
   ===================================================================== */
@media (max-width:760px){
  body{ font-size:14px; }

  #wrapper{ padding:28px 0 32px; }
  #main{ padding-left:20px; padding-right:20px; }
  .section__ttl{ font-size:21px; }
  .section__body{ padding-top:30px; }

  /* 表組みは横並びをやめ、セルを縦積みにします */
  .table, .table thead, .table tbody, .table tr{ display:block; width:100%; }
  .table th, .table td{
    display:block; width:auto; border-bottom:0; padding:14px 16px; overflow-wrap:anywhere;
  }
  .table tr:last-child > *:last-child{ border-bottom:1px solid var(--line); }

  .button_box{ flex-direction:column; }
  .button_box input[type="submit"],
  .button_box input[type="button"],
  .button_box button,
  .button_box a{ min-width:0; width:100%; }
}