/* =========================================================
   問い合わせページ /inquiry スタイル  v1.009.0000
   - クライアント従業員が使う公開ページ。完全レスポンシブ。
   - フォント Noto Sans JP / アイコン Font Awesome。
   - サイズ指定は px より rem / vh / vw を優先。
   ========================================================= */
:root{
  --iq-primary:#185fa5;
  --iq-primary-d:#124a82;
  --iq-text:#1f2933;
  --iq-text-sub:#52606d;
  --iq-muted:#9aa5b1;
  --iq-border:#d9e0e8;
  --iq-bg:#eef2f6;
  --iq-surface:#ffffff;
  --iq-danger:#c0392b;
  --iq-ok:#0f6e56;
  --iq-radius:.6rem;
  --iq-shadow:0 .1rem .5rem rgba(0,0,0,.06);
}
*{ box-sizing:border-box; }
html{ font-size:100%; }
body.iq-body{
  margin:0;
  font-family:"Noto Sans JP", sans-serif;
  color:var(--iq-text);
  background:var(--iq-bg);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
/* ログイン等、中央寄せ表示用 */
.iq-body--center{
  display:flex; min-height:100vh;
  align-items:center; justify-content:center;
  padding:1.5rem;
}

/* ===== ヘッダー ===== */
.iq-header{ background:var(--iq-surface); border-bottom:1px solid var(--iq-border); }
.iq-header__inner{
  max-width:46rem; margin:0 auto; padding:.9rem 1.2rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.iq-header__title{ font-weight:700; color:var(--iq-primary); }
.iq-header__right{ display:flex; align-items:center; gap:.8rem; }
.iq-header__company{ font-size:.85rem; color:var(--iq-text-sub); }

/* ===== メイン ===== */
.iq-main{ max-width:46rem; margin:0 auto; padding:1.5rem 1.2rem 4rem; }

/* ===== カード ===== */
.iq-card{
  background:var(--iq-surface); border:1px solid var(--iq-border);
  border-radius:var(--iq-radius); box-shadow:var(--iq-shadow); padding:1.5rem;
}
.iq-auth{ width:100%; max-width:26rem; }
.iq-auth__card{ text-align:center; }
.iq-auth__title{ color:var(--iq-primary); font-size:1.4rem; margin:.2rem 0 .4rem; }
.iq-auth__sub{ color:var(--iq-text-sub); margin:0 0 1rem; font-size:.9rem; }
.iq-auth__note{ color:var(--iq-text-sub); font-size:.85rem; margin:0 0 1.2rem; }

/* ===== 見出し ===== */
.iq-h2{ font-size:1.15rem; margin:0 0 .6rem; }
.iq-lead{ color:var(--iq-text-sub); font-size:.9rem; margin:0 0 1.2rem; }

/* ===== フォーム ===== */
.iq-field{ margin-bottom:1rem; text-align:left; }
.iq-field label{ display:block; font-size:.85rem; color:var(--iq-text-sub); margin-bottom:.3rem; }
.iq-field input, .iq-field select, .iq-field textarea{
  width:100%; padding:.7rem .8rem; font-size:1rem; font-family:inherit;
  border:1px solid var(--iq-border); border-radius:var(--iq-radius);
  background:#fff; color:var(--iq-text);
}
.iq-field input:focus, .iq-field select:focus, .iq-field textarea:focus{
  outline:none; border-color:var(--iq-primary);
  box-shadow:0 0 0 .15rem rgba(24,95,165,.15);
}
.iq-field textarea{ resize:vertical; min-height:8rem; }
.iq-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:0 1rem; }
@media (max-width:30rem){ .iq-grid2{ grid-template-columns:1fr; } }

.iq-check{
  display:flex; align-items:center; gap:.5rem;
  font-size:.88rem; color:var(--iq-text-sub);
  margin-bottom:1.2rem; cursor:pointer;
}
.iq-check input{ width:1.1rem; height:1.1rem; }

/* ===== ボタン ===== */
.iq-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  cursor:pointer; font-family:inherit; font-size:1rem; padding:.7rem 1.2rem;
  border-radius:var(--iq-radius); border:1px solid transparent;
  transition:background .15s, border-color .15s;
}
.iq-btn--primary{ background:var(--iq-primary); color:#fff; }
.iq-btn--primary:hover{ background:var(--iq-primary-d); }
.iq-btn--primary:disabled{ opacity:.6; cursor:default; }
.iq-btn--ghost{ background:#fff; border-color:var(--iq-border); color:var(--iq-text); }
.iq-btn--ghost:hover{ background:var(--iq-bg); }
.iq-btn--block{ width:100%; }
.iq-btn--sm{ font-size:.85rem; padding:.45rem .8rem; }

/* ===== リンク・チップ ===== */
.iq-link{
  background:none; border:none; color:var(--iq-primary); cursor:pointer;
  font:inherit; font-size:.82rem; text-decoration:underline; padding:0;
}
.iq-row-between{
  display:flex; align-items:center; justify-content:space-between;
  gap:.8rem; flex-wrap:wrap; margin-bottom:.4rem;
}
.iq-email-chip{
  font-size:.82rem; color:var(--iq-text-sub);
  background:var(--iq-bg); border-radius:1rem; padding:.25rem .7rem;
}

/* ===== エラー・状態 ===== */
.iq-error{ color:var(--iq-danger); font-size:.85rem; margin:0 0 1rem; }
.iq-state{ text-align:center; color:var(--iq-text-sub); padding:3rem 1rem; }
.iq-state--error{ color:var(--iq-danger); }

/* ===== 送信完了 ===== */
.iq-done{ text-align:center; }
.iq-done__icon{ font-size:3rem; color:var(--iq-ok); margin-bottom:.5rem; }
.iq-receipt{ font-size:.95rem; margin:1rem 0 1.4rem; }
.iq-receipt strong{ color:var(--iq-primary); font-size:1.1rem; letter-spacing:.03em; }

/* ===== 案件一覧（③） ===== */
.iq-list{ list-style:none; margin:1.2rem 0 0; padding:0; }
.iq-list__item{
  background:var(--iq-surface); border:1px solid var(--iq-border);
  border-radius:var(--iq-radius); box-shadow:var(--iq-shadow);
  padding:1rem 1.1rem; margin-bottom:.8rem; cursor:pointer;
  transition:border-color .15s, box-shadow .15s;
}
.iq-list__item:hover{ border-color:var(--iq-primary); }
.iq-list__item:focus{ outline:none; border-color:var(--iq-primary); box-shadow:0 0 0 .15rem rgba(24,95,165,.15); }
.iq-list__top{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.iq-list__no{ font-size:.78rem; color:var(--iq-muted); letter-spacing:.03em; }
.iq-list__subject{ font-weight:500; margin:.3rem 0; }
.iq-list__meta{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; font-size:.8rem; color:var(--iq-text-sub); }
.iq-list__cat{ background:var(--iq-bg); border-radius:1rem; padding:.1rem .6rem; }
.iq-list__date{ color:var(--iq-muted); }
.iq-empty{ text-align:center; color:var(--iq-text-sub); padding:3rem 1rem; }
.iq-empty i{ font-size:2.2rem; color:var(--iq-muted); display:block; margin-bottom:.6rem; }

/* ===== ステータスバッジ ===== */
.iq-badge{ font-size:.75rem; padding:.15rem .6rem; border-radius:1rem; white-space:nowrap; }
.iq-badge--new{ background:#fdecea; color:#b23b2e; }
.iq-badge--prog{ background:#fff3e0; color:#b26a00; }
.iq-badge--ans{ background:#e7f3ee; color:var(--iq-ok); }
.iq-badge--closed{ background:#eceff2; color:var(--iq-text-sub); }

/* ===== 戻るリンク ===== */
.iq-back{ display:inline-flex; align-items:center; gap:.3rem; font-size:.85rem; margin-bottom:.8rem; }

/* ===== 案件詳細（④） ===== */
.iq-detail__meta{ font-size:.8rem; color:var(--iq-muted); margin-bottom:1rem; }
.iq-thread{ display:flex; flex-direction:column; gap:.9rem; margin-bottom:1.5rem; }
.iq-msg{ max-width:85%; padding:.7rem .9rem; border-radius:var(--iq-radius); }
.iq-msg--me{ align-self:flex-end; background:#e7f0fa; }
.iq-msg--staff{ align-self:flex-start; background:var(--iq-bg); }
.iq-msg__head{ font-size:.75rem; color:var(--iq-text-sub); margin-bottom:.25rem; }
.iq-msg__time{ color:var(--iq-muted); margin-left:.4rem; }
.iq-msg__body{ font-size:.95rem; word-break:break-word; }

/* ===== 返信 ===== */
.iq-reply{ border-top:1px solid var(--iq-border); padding-top:1.2rem; }

/* ===== 完了画面のアクション ===== */
.iq-done__actions{ display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; }
@media (max-width:30rem){ .iq-done__actions .iq-btn{ width:100%; } }

/* ===== 未読バッジ ===== */
.iq-unread{ display:inline-block; background:var(--iq-danger); color:#fff; font-size:.68rem; font-weight:700; padding:.05rem .45rem; border-radius:1rem; margin-right:.4rem; vertical-align:middle; }

/* ===== 一覧フィルタ・ページャー ===== */
.iq-filter{ display:flex; align-items:center; gap:.5rem; margin:0 0 1rem; font-size:.9rem; }
.iq-filter label{ color:var(--iq-text-sub); }
.iq-filter select{ padding:.4rem .6rem; border:1px solid var(--iq-border); border-radius:var(--iq-radius); font-family:inherit; background:#fff; }
.iq-pager{ display:flex; align-items:center; justify-content:center; gap:1rem; margin:1.2rem 0 0; }
.iq-pager__info{ font-size:.85rem; color:var(--iq-text-sub); }
.iq-btn:disabled{ opacity:.5; cursor:default; }

/* ===== 完了したお問い合わせの注記（返信不可） ===== */
.iq-closed-note{ display:flex; align-items:center; gap:.5rem; margin:0; padding:1rem; background:#f1f4f7; border-radius:.5rem; color:#5a6b7b; font-size:.95rem; line-height:1.5; }

/* ===== 新規問い合わせボタン（大きく目立たせる） ===== */
.iq-btn--new{ font-size:1.05rem; font-weight:700; padding:.7rem 1.4rem; box-shadow:0 3px 10px rgba(24,95,165,.28); }
.iq-btn--new i{ margin-right:.1rem; }
/* 認証コード画面の「入力し直す」リンク */
.iq-back2{ display:inline-flex; align-items:center; gap:.4rem; margin-top:.9rem; background:none; border:0; cursor:pointer; }

/* 認証コードが届かない場合の対処法（控えめ） */
.iq-help-note{ font-size:.82rem; color:var(--iq-text-sub); line-height:1.7; margin:1rem 0 0; }
/* 一覧の注意文（過去回答が最新でない可能性） */
.iq-disclaimer{ display:flex; gap:.5rem; font-size:.85rem; line-height:1.7; color:#7a5a00; background:#fff8e6; border:1px solid #f0e0a8; border-radius:.5rem; padding:.8rem 1rem; margin:0 0 1rem; }
.iq-disclaimer i{ margin-top:.15rem; }

/* ===== 新規フォーム：サブカテゴリ（2段目）・案内文 ===== */
.iq-radio-group{ display:flex; flex-direction:column; gap:.55rem; }
.iq-radio{ display:flex; align-items:center; gap:.6rem; cursor:pointer; font-size:.95rem; line-height:1.5;
  padding:.75rem .9rem; border:1.5px solid #d4dae1; border-radius:.6rem; background:#fff;
  transition:border-color .15s, background .15s, box-shadow .15s; }
.iq-radio:hover{ border-color:var(--iq-primary); background:#f6f9fc; }
.iq-radio--checked{ border-color:var(--iq-primary); background:#eef4fb; box-shadow:0 0 0 2px rgba(24,95,165,.12); }
.iq-radio input{ width:auto; margin:0; flex:none; accent-color:var(--iq-primary); }
.iq-radio span{ flex:1; }
.iq-block-msg{ font-size:.9rem; line-height:1.7; color:#b03a2e; background:#fdecea; border:1px solid #f5c6cb; border-radius:.5rem; padding:.8rem 1rem; margin:.6rem 0 0; }

/* カテゴリ別の追加回答（詳細表示） */
.iq-custom{ margin:.5rem 0 .8rem; padding:.7rem .9rem; background:#f4f6f8; border-radius:.5rem; font-size:.9rem; }
.iq-custom dt{ font-weight:600; color:var(--iq-text-sub); margin-top:.3rem; }
.iq-custom dt:first-child{ margin-top:0; }
.iq-custom dd{ margin:0 0 .2rem; }
/* 一覧のサブカテゴリ */
.iq-subcat{ font-size:.82rem; color:var(--iq-text-sub); }

/* =====================================================================
   添付ファイル（問い合わせメッセージ）（v1.057.0000）
   ===================================================================== */
/* ドロップゾーン */
.iq-dropzone{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.25rem; text-align:center;
  padding:1rem; border:1.5px dashed var(--iq-border); border-radius:var(--iq-radius);
  background:#f7f9fb; color:var(--iq-text-sub); cursor:pointer;
  transition:border-color .15s, background .15s;
}
.iq-dropzone:hover, .iq-dropzone:focus{ border-color:var(--iq-primary); outline:none; }
.iq-dropzone--over{ border-color:var(--iq-primary); background:#eef4fb; color:var(--iq-primary); }
.iq-dropzone__text{ font-size:.95rem; }
.iq-dropzone__hint{ font-size:.75rem; color:var(--iq-muted); }
.iq-attach-err{ color:var(--iq-danger); font-size:.85rem; margin:.4rem 0 0; }

/* 選択中プレビュー */
.iq-attach-list{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem; }
.iq-attach-item{
  display:flex; align-items:center; gap:.5rem;
  border:1px solid var(--iq-border); border-radius:var(--iq-radius);
  padding:.35rem .5rem; background:var(--iq-surface); max-width:100%;
}
.iq-attach-item__thumb img{ width:2.6rem; height:2.6rem; object-fit:cover; border-radius:.3rem; display:block; }
.iq-attach-item__thumb i, .iq-attach-item__icon i{ font-size:1.6rem; color:var(--iq-text-sub); width:2.6rem; text-align:center; }
.iq-attach-item__name{ font-size:.85rem; max-width:12rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.iq-attach-item__size{ font-size:.75rem; color:var(--iq-muted); }
.iq-attach-item__del{
  border:none; background:transparent; color:var(--iq-muted); cursor:pointer;
  font-size:1.2rem; line-height:1; padding:.1rem .3rem;
}
.iq-attach-item__del:hover{ color:var(--iq-danger); }

/* スレッド内メッセージの添付表示 */
.iq-files{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem; }
.iq-file{
  display:inline-flex; align-items:center; gap:.4rem; text-decoration:none;
  border:1px solid var(--iq-border); border-radius:var(--iq-radius);
  padding:.3rem .55rem; background:var(--iq-surface); color:var(--iq-primary); max-width:100%;
}
.iq-file:hover{ background:#eef4fb; }
.iq-file i{ font-size:1.1rem; }
.iq-file__name{ font-size:.85rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:14rem; }
.iq-file__size{ font-size:.75rem; color:var(--iq-muted); }
/* 画像添付（サムネイル） */
.iq-file--img{ flex-direction:column; align-items:flex-start; gap:.25rem; padding:.4rem; }
.iq-file--img .iq-file__thumb img{
  display:block; width:8rem; height:8rem; object-fit:cover; border-radius:.35rem; border:1px solid var(--iq-border);
}