@charset "UTF-8";
/* ==========================================================================
   セミナー申込フォーム（/seminarform1128 など）用CSS
   - 読み込み元: ec-cube/app/Plugin/PiaContact/Resource/template/default/seminarform1128/*.twig
   - フォーム本体の見た目は資料請求（/document_request）と同じEC-CUBE標準の
     .kaso_h1title / .ec-borderedDefs を使い、ここではセミナー固有の部分だけを指定する
   - 変更したら、テンプレート側の読み込みURL「seminar_form.css?v=1」の数字を上げる（ブラウザキャッシュ対策）
   - このファイルはサイト共通CSS（default_style.css 等）より先に読み込まれる。共通CSSと同じ強さの
     指定は負けるので、上書きしたい時はセレクタの先頭に .pia-seminar を付ける
   ========================================================================== */

/* ---------- 開催概要（赤枠のボックス） ---------- */
.pia-seminar__info {
  background-color: #fff5f5;
  border: 1px solid #e60012;
  color: #000;
  padding: 20px 24px;
  margin: 30px 0 20px;
}
.pia-seminar__info ul {
  list-style: disc;
  margin: 0 0 0 1.2em;
  padding: 0;
}
.pia-seminar__info li {
  margin-bottom: 4px;
  line-height: 1.6;
}
.pia-seminar__info-note {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.6;
}

/* ---------- 案内文（「講演会への参加申し込みを受け付けております」） ---------- */
.pia-seminar__lead {
  color: #e60012;
  font-weight: bold;
  text-align: center;
  line-height: 1.6;
  margin: 20px 0;
}

/* ---------- 入力欄まわり ---------- */
.pia-seminar .ec-borderedDefs dt {
  line-height: 1.4;
}
.pia-seminar .ec-borderedDefs dd {
  line-height: 1.4;
}
/* メールアドレス記入に関する注意 */
.pia-seminar__attention {
  color: #e60012;
  font-size: 12px;
  line-height: 1.6;
  margin: 8px 0 0;
}
/* 来場希望人数（数字欄＋「名」を1行に）
   ※このCSSはサイト共通の default_style.css より先に読み込まれ、同じ強さの
     「.ec-input input { width:100%; display:block }」に負けるため、.pia-seminar を付けて強くしている */
.pia-seminar .pia-seminar__num input {
  display: inline-block;
  width: 100px;
  margin-right: 6px;
}
/* チェックボックス（サイトを知ったきっかけ・金地金）: 1項目1行で表示 */
.pia-seminar__choices input[type="checkbox"] {
  display: inline-block;
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0 6px 8px 0;
  vertical-align: sub;
}
.pia-seminar__choices label {
  display: inline;
}
.pia-seminar__choices label::after {
  content: "";
  display: block;
}
.pia-seminar__choices input[type="checkbox"]:checked {
  border: 1px solid #8b98a5;
  background-color: #1d9bf0;
}

/* ---------- ご同伴者様（１）〜（５）の見出し ---------- */
.pia-seminar__companion-title {
  font-size: 16px;
  font-weight: bold;
  border-left: 4px solid #052a89; /* 見出し（Document request）と同じ紺色 */
  padding-left: 10px;
  margin: 40px 0 0;
}

/* ---------- 満席時メッセージ（残席管理で「非表示」の時） ---------- */
.pia-seminar__end {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  margin: 40px 0;
}

/* ---------- 残席バッジ（残席管理プラグイン。form.runのデザインを参考） ---------- */
.pia-seat-status {
  margin-top: 16px;
  margin-bottom: 28px;
}
.pia-seat-status__label {
  color: #455A64;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
}
.pia-seat-status__count {
  color: #00BCD4;
  font-size: 44px;
  font-weight: 700;
  margin-left: 8px;
}
.pia-seat-status__bar {
  position: relative;
  background: #E4EEF0;
  border-radius: 29px;
  height: 25px;
  margin-top: 8px;
}
.pia-seat-status__bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #00BCD4;
  border-radius: 29px 0 0 29px;
  display: flex;
  align-items: center;
  padding-left: 12px;
  box-sizing: border-box;
  max-width: 100%;
}
.pia-seat-status__badge {
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.pia-seat-status__badge--finish {
  position: absolute;
  right: 0;
  top: -1px;
  background: #FF7183;
  border-radius: 4px;
  padding: 4px 10px;
}

/* ---------- スマートフォン ---------- */
@media only screen and (max-width: 767px) {
  .pia-seminar__info {
    padding: 16px;
    margin: 20px 0 16px;
  }
  .pia-seat-status__count {
    font-size: 32px;
  }
}