@charset "UTF-8";
/* =====================================================================
   資料請求・お問い合わせ（/inquiry/）専用スタイル
   - sample/inquiry.html のインライン <style> を分離したもの
   - クラスは .wf-* で名前空間化済み（既存テーマへ影響しにくい）
   - 末尾に Contact Form 7 出力をこのデザインに合わせる補助ルールを追記
   ===================================================================== */

:root{
  --brand:#1f3b86;
  --brand-dark:#16306f;
  --brand-light:#2a4ea8;
  --accent:#2bb6c4;
  --accent-light:#bfe6ec;
  --required:#e60012;
  --text:#222;
  --muted:#666;
  --line:#dcdcdc;
  --form-bg:#f3f5f8;
}

/* メインエリア（幅は外側の .container = パンくずと同じ Bootstrap container に任せる） */
.wf-main{
  margin:0;
  padding:36px 0 48px;
  font-family:"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Yu Gothic","游ゴシック",Meiryo,sans-serif;
  color:var(--text);
  line-height:1.7;
  box-sizing:border-box;
  display:block;
}
.wf-main *,
.wf-main *::before,
.wf-main *::after{box-sizing:border-box}

.wf-intro{
  text-align:center;
  margin:0 0 48px;
  font-size:15px;
  color:#444;
}

/* 2カラム（左：資料説明／右：フォーム） */
.wf-layout{
  display:flex;
  gap:40px;
  align-items:flex-start;
  flex-wrap:wrap;
}
.wf-layout__col{flex:1 1 420px;min-width:0}
/* 左カラムをコンテナクエリの基準にして、見出しを横幅にフィットさせる */
.wf-layout__col.wf-lead{container-type:inline-size;container-name:lead}

/* ---------- 左カラム ---------- */
.wf-lead .wf-catch{
  /* 左カラム幅に追従して文字サイズを拡大（最長行「価格・機能・導入の進め方」が幅にフィット） */
  /* 7.5cqw → 12文字で約90%幅。少し余白を残して overflow を防ぎつつ、視認性は十分 */
  font-size:clamp(20px, 7.5cqw, 44px);
  font-weight:700;
  line-height:1.5;
  color:var(--text);
  margin:0 0 20px;
}
.wf-lead .wf-catch .num{
  color:var(--required);
  font-size:1.42em;
  line-height:1;
}
.wf-lead .wf-catch .brand{
  display:inline-block;
  color:var(--brand);
  font-size:1.16em;
  letter-spacing:.02em;
}
/* 「在庫スイートクラウドの」をひとつの行から外さないようにする */
.wf-lead .wf-catch .wf-catch__row{
  white-space:nowrap;
}
/* 資料サンプル画像（3枚を扇状に重ねて表示） */
.wf-doc-preview{
  position:relative;
  width:100%;
  max-width:580px;
  aspect-ratio: 16 / 10;
  margin:0 auto 18px;
  /* 回転した画像の角がコンテナ外にはみ出さないよう左右に余白を確保 */
  padding:0 3%;
}
.wf-doc-preview__item{
  position:absolute;
  top:50%;
  left:50%;
  width:66%;
  margin:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  transition:transform .25s, box-shadow .25s;
}
/* 左奥（一番奥に配置） */
.wf-doc-preview__item:nth-child(1){
  transform:translate(-78%, -52%) rotate(-12deg);
  z-index:1;
}
/* 中央奥 */
.wf-doc-preview__item:nth-child(2){
  transform:translate(-52%, -50%) rotate(-3deg);
  z-index:2;
}
/* 右手前（一番手前） */
.wf-doc-preview__item:nth-child(3){
  transform:translate(-22%, -46%) rotate(6deg);
  z-index:3;
}
.wf-doc-preview__item:hover{
  z-index:5;
  box-shadow:0 12px 24px rgba(0,0,0,.25);
}
.wf-doc-preview__item:nth-child(1):hover{
  transform:translate(-78%, -56%) rotate(-12deg) scale(1.04);
}
.wf-doc-preview__item:nth-child(2):hover{
  transform:translate(-52%, -54%) rotate(-3deg) scale(1.04);
}
.wf-doc-preview__item:nth-child(3):hover{
  transform:translate(-22%, -50%) rotate(6deg) scale(1.04);
}
.wf-doc-preview__item img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 16 / 9;
  object-fit:cover;
}

.wf-benefits{
  border:1px solid var(--line);
  border-radius:6px;
  padding:14px 18px;
  margin:18px 0 22px;
  background:#fafbfd;
}
.wf-benefits__title{
  font-size:13px;color:#555;margin:0 0 8px;font-weight:600;
}
.wf-benefits ul{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;
}
.wf-benefits li{
  font-size:14px;display:flex;align-items:center;gap:6px;color:#333;
}
.wf-benefits li::before{
  content:"";display:inline-block;
  width:14px;height:14px;flex:0 0 14px;
  background:var(--accent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.2 4.8 12l-1.4 1.4L9 19l12-12-1.4-1.4z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.2 4.8 12l-1.4 1.4L9 19l12-12-1.4-1.4z'/></svg>") center/contain no-repeat;
}

.wf-tel{text-align:left;margin-top:8px}
.wf-tel__label{font-size:13px;color:#555;margin-bottom:4px}
.wf-tel__num{
  font-size:30px;font-weight:700;color:var(--brand);
  display:inline-flex;align-items:center;gap:10px;letter-spacing:.02em;
}
.wf-tel__num .icon{
  width:30px;height:30px;border-radius:50%;background:var(--brand);
  display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:16px;
}
.wf-tel__hours{font-size:12px;color:var(--muted);margin-top:2px}

/* ---------- 右カラム（フォーム） ---------- */
.wf-form{
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  padding:28px 28px 26px;
  box-shadow:0 4px 16px rgba(0,0,0,.04);
}
.wf-row{margin-bottom:14px}
.wf-row__label{
  display:flex;align-items:center;gap:8px;
  font-size:14px;font-weight:600;color:#333;
  margin-bottom:6px;
}
.wf-badge{
  display:inline-block;
  font-size:11px;font-weight:700;color:#fff;
  padding:2px 8px;border-radius:3px;line-height:1.4;
}
.wf-badge--required{background:var(--required)}
.wf-badge--optional{background:#999}

.wf-input,
.wf-select,
.wf-textarea{
  width:100%;font:inherit;
  background:var(--form-bg);
  border:1px solid var(--line);border-radius:4px;
  padding:11px 12px;font-size:14px;color:#333;outline:none;
  transition:.15s;
}
.wf-input::placeholder,.wf-textarea::placeholder{color:#aaa}
.wf-input:focus,.wf-select:focus,.wf-textarea:focus{
  border-color:var(--brand-light);
  background:#fff;
  box-shadow:0 0 0 3px rgba(42,78,168,.12);
}
.wf-textarea{
  min-height:96px;resize:vertical;line-height:1.6;
}

/* ラジオボタン群（2列グリッド） */
.wf-radio-group{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 14px;
  background:var(--form-bg);
  border:1px solid var(--line);
  border-radius:4px;
  padding:12px 14px;
}
.wf-radio{
  display:flex;align-items:center;gap:6px;
  font-size:13px;font-weight:400;color:#333;cursor:pointer;
  line-height:1.4;
  white-space:nowrap;
  min-width:0;
}
.wf-radio > span{
  white-space:nowrap;
  overflow:visible;
}
.wf-radio input[type="radio"]{
  accent-color:var(--brand);
  width:16px;height:16px;flex:0 0 16px;margin:0;
}
@media (max-width: 480px){
  .wf-radio-group{grid-template-columns:1fr}
}

/* reCAPTCHA ウィジェット配置領域（中央寄せ） */
.wf-recaptcha{
  margin:18px 0 14px;
  display:flex;
  justify-content:center;
}

.wf-submit{
  display:block;width:100%;
  padding:16px;
  font-size:16px;font-weight:700;color:#fff;letter-spacing:.05em;
  text-decoration:none;
  background:var(--brand);
  border:none;border-radius:6px;
  cursor:pointer;
  transition:background .2s, transform .15s, box-shadow .15s;
  box-shadow:0 4px 0 var(--brand-dark);
}
.wf-submit:hover,
.wf-submit:focus,
.wf-submit:focus-visible,
.wf-submit:active{
  text-decoration:none;
  color:#fff;
}
.wf-submit:hover,
.wf-submit:focus-visible{
  background:var(--brand-dark);
  box-shadow:0 3px 0 #0d245a;
  transform:translateY(1px);
  outline:none;
}
.wf-submit:active{
  background:var(--brand-dark);
  box-shadow:0 0 0 #0d245a;
  transform:translateY(4px);
}
.wf-submit::after{
  content:"›";margin-left:8px;display:inline-block;font-weight:400;
}

.wf-notes{
  margin-top:14px;
  font-size:12px;color:var(--muted);line-height:1.7;
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 900px){
  .wf-layout{gap:28px}
  .wf-main{padding:24px 0 32px}
  .wf-form{padding:20px 18px}
  /* SP では .wf-catch の font-size はコンテナクエリ（7.5cqw）に任せる */
  /* この資料でわかること は SP でも 2×2 を維持 */

  /* 資料サンプル画像をひとまわり小さく */
  .wf-doc-preview{
    max-width:440px;
    padding:0 4%;
  }
  .wf-doc-preview__item{width:60%}
  .wf-doc-preview__item:nth-child(1){
    transform:translate(-80%, -52%) rotate(-12deg);
  }
  .wf-doc-preview__item:nth-child(2){
    transform:translate(-53%, -50%) rotate(-3deg);
  }
  .wf-doc-preview__item:nth-child(3){
    transform:translate(-23%, -46%) rotate(6deg);
  }
  .wf-doc-preview__item:nth-child(1):hover{
    transform:translate(-80%, -56%) rotate(-12deg) scale(1.04);
  }
  .wf-doc-preview__item:nth-child(2):hover{
    transform:translate(-53%, -54%) rotate(-3deg) scale(1.04);
  }
  .wf-doc-preview__item:nth-child(3):hover{
    transform:translate(-23%, -50%) rotate(6deg) scale(1.04);
  }
}

@media (max-width: 480px){
  .wf-doc-preview{
    max-width:340px;
  }
  .wf-doc-preview__item{width:58%}
}

/* 本家ヘッダーのお問い合わせボタンが現在のページに飛ぶのを防ぐ視覚調整は不要 */


/* =====================================================================
   Contact Form 7 出力をこのデザインに合わせる補助
   - フォーム本体は the_content() の CF7。CF7側のHTMLで .wf-* クラスを
     付与する想定だが、未付与でも崩れないようフォールバックも用意。
   ===================================================================== */
.wf-form .wpcf7 { margin: 0; }
.wf-form form.wpcf7-form { margin: 0; }
.wf-form .wpcf7-form p { margin: 0 0 14px; }

/* CF7 既定の入力に .wf-input 相当のフォールバックを適用 */
.wf-form .wpcf7-form input[type="text"],
.wf-form .wpcf7-form input[type="email"],
.wf-form .wpcf7-form input[type="tel"],
.wf-form .wpcf7-form input[type="url"],
.wf-form .wpcf7-form input[type="number"],
.wf-form .wpcf7-form select,
.wf-form .wpcf7-form textarea {
  width: 100%;
  font: inherit;
  background: var(--form-bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 11px 12px;
  font-size: 14px;
  color: #333;
  outline: none;
  transition: .15s;
  box-sizing: border-box;
}
.wf-form .wpcf7-form textarea { min-height: 96px; resize: vertical; line-height: 1.6; }
.wf-form .wpcf7-form input:focus,
.wf-form .wpcf7-form select:focus,
.wf-form .wpcf7-form textarea:focus {
  border-color: var(--brand-light);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(42,78,168,.12);
}

/* CF7 送信ボタン（class:wf-submit 推奨。未付与時のフォールバック） */
.wf-form .wpcf7-form input.wpcf7-submit,
.wf-form .wpcf7-form button[type="submit"] {
  display: block; width: 100%;
  padding: 16px;
  font-size: 16px; font-weight: 700; color: #fff; letter-spacing: .05em;
  background: var(--brand);
  border: none; border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--brand-dark);
  transition: background .2s, transform .15s, box-shadow .15s;
}
.wf-form .wpcf7-form input.wpcf7-submit:hover,
.wf-form .wpcf7-form button[type="submit"]:hover {
  background: var(--brand-dark);
  box-shadow: 0 3px 0 #0d245a;
  transform: translateY(1px);
}

/* CF7 のバリデーション/応答メッセージ */
.wf-form .wpcf7-not-valid-tip { color: var(--required); font-size: 12px; margin-top: 4px; }
.wf-form .wpcf7-response-output {
  margin: 14px 0 0; padding: 10px 12px; border-radius: 4px; font-size: 13px;
}

/* CF7 ラジオを .wf-radio-group 内で2列グリッド表示にする（[radio ... use_label_element] 出力対応） */
.wf-radio-group .wpcf7-radio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
.wf-radio-group .wpcf7-list-item { margin: 0; }
.wf-radio-group .wpcf7-list-item label {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 400; color: #333; cursor: pointer;
  line-height: 1.4; white-space: nowrap; min-width: 0; margin: 0;
}
.wf-radio-group .wpcf7-list-item input[type="radio"] {
  accent-color: var(--brand);
  width: 16px; height: 16px; flex: 0 0 16px; margin: 0;
}
@media (max-width: 480px) {
  .wf-radio-group .wpcf7-radio { grid-template-columns: 1fr; }
}

/* =====================================================================
   既存CF7（<table id="form"> のテーブル組み）を新デザインの縦1カラムに
   収める応急対応。CF7フォームを新マークアップに差し替えるまでの暫定。
   ===================================================================== */
.wf-form #form,
.wf-form table.mb100 {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  table-layout: fixed;
}
.wf-form #form tbody,
.wf-form #form tr,
.wf-form #form th,
.wf-form #form td {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 0;
  padding: 0;
  text-align: left;
  background: transparent;
  box-sizing: border-box;
}
.wf-form #form th {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin: 0 0 6px;
  line-height: 1.5;
  white-space: normal;
}
.wf-form #form td {
  margin: 0 0 16px;
}
/* td内で横に溢れる要素（select/長いテキスト等）を抑制 */
.wf-form #form td > * { max-width: 100%; }
.wf-form #form .wpcf7-list-item { display: inline-flex; align-items: center; gap: 4px; margin: 0 14px 6px 0; }

/* =====================================================================
   CF7 の自動整形（wpautop）対策 ＆ 間隔の微調整
   ===================================================================== */
/* wf-row 内に CF7 が挿入する <br> / <p> の余白を打ち消し、ラベルと入力欄を近づける */
.wf-form .wf-row br { display: none; }
.wf-form .wf-row p { margin: 0; }
.wf-form .wf-row__label { margin-bottom: 4px; }
/* CF7 が input を <span class="wpcf7-form-control-wrap"> で包むので block 化して詰める */
.wf-form .wf-row .wpcf7-form-control-wrap { display: block; }

/* 注記（wf-notes）の上余白・行間を詰める＋CF7のラッパ余白を除去 */
.wf-form .wf-notes { margin: 6px 0 0; line-height: 1.45; }
.wf-form .wpcf7-form > p:last-child { margin-bottom: 0; }

/* ラジオ：クリック時に出る四角いフォーカス枠を消す */
.wf-radio-group .wpcf7-list-item label,
.wf-radio-group input[type="radio"],
.wf-radio .wf-radio input[type="radio"] {
  outline: none;
}
.wf-radio-group input[type="radio"]:focus,
.wf-radio-group input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: none;
}

/* 送信ボタン無効化時の見た目（必須未入力・reCAPTCHA未完了） */
.wf-form .wf-submit:disabled,
.wf-form .wf-submit.is-disabled,
.wf-form .wpcf7-form input.wpcf7-submit:disabled,
.wf-form .wpcf7-form button[type="submit"]:disabled {
  opacity: .45;
  cursor: not-allowed;
  background: var(--brand);
  box-shadow: 0 4px 0 var(--brand-dark);
  transform: none;
}
.wf-form .wf-submit:disabled:hover,
.wf-form .wf-submit.is-disabled:hover,
.wf-form .wpcf7-form input.wpcf7-submit:disabled:hover,
.wf-form .wpcf7-form button[type="submit"]:disabled:hover {
  background: var(--brand);
  box-shadow: 0 4px 0 var(--brand-dark);
  transform: none;
}