@charset "utf-8";
/*
 * PHPフォーム共通の追加スタイル
 * グローバルフォームの CSS（gl/bundle.css・gl/form_gl_php.css）に無い部品だけを定義する。
 * 既存クラスの見た目は上書きしない。
 */
#form_wrap .partsInput,
#form_wrap .dateInput,
#form_wrap .choiceList { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }

#form_wrap .partsInput input.parts3 { width: 5em; }
#form_wrap .partsInput input.parts4 { width: 6em; }
#form_wrap .partsInput input.parts5 { width: 7em; }
#form_wrap .partsInput input.partsName { width: 12em; }
#form_wrap .partsLabel { margin-right: 4px; }
/* 「姓＋入力欄」のように、ラベルと入力欄を離さずに折り返す */
#form_wrap .partsItem { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
#form_wrap .dateInput select { width: auto; min-width: 5em; }
#form_wrap .choiceItem { display: inline-flex; align-items: center; gap: 4px; margin-right: 12px; white-space: normal; max-width: 100%; }
#form_wrap .choiceItem input { flex-shrink: 0; }   /* 長い選択肢はスマホで折り返す（入力欄ははみ出さない） */

/* 日付選択（年・月・日・時を横に並べる）。form_gl の矢印は入力欄の右端に1つだけ出るので、select ごとに付け直す */
.form_group > div:has(.dateInput)::after { display: none; }
#form_wrap .dateItem { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
#form_wrap .dateInput select {
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23282828' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px;
}

/* メールアドレス欄（form_gl は type="text" 前提の CSS なので email にも同じ見た目を付ける） */
.form_group input[type="email"] {
  width: 100%;
  padding: 27px 25px;
  line-height: 1.5 !important;
  color: #282828;
  background-color: #fff;
  background-clip: padding-box;
  border: 2px solid transparent;
  border-radius: 16px;
}
.form_group input[type="email"]:focus { border-color: #8EC300; outline: 0; }

/* #form_wrap 直下の小見出し（現住所など）を、入力欄（.form_wrap_2 の左右余白 50px）とそろえる */
#form_wrap > .h3DesignA1 { margin-left: 50px; margin-right: 50px; }
/* 項目グループ見出し（h2）下の説明文はインデントしない */
#form_wrap > .groupNote { margin-left: 0; margin-right: 0; }

#form_wrap .note { margin: 6px 0 0; font-size: 0.875em; line-height: 1.6; }
#form_wrap .error_text { margin: 6px 0 0; color: #d00; font-weight: bold; font-size: 0.875em; }
#form_wrap .has_error input,
#form_wrap .has_error select,
#form_wrap .has_error textarea { border-color: #d00; background-color: #fff5f5; }

/* エラー一覧（ul.error_message）は form_gl の CSS（左右 50px・赤枠・角丸）をそのまま使う */
ul.error_message li { list-style: disc inside; }

.groupNote { margin: 0 0 12px; }
.h3DesignA1 { margin: 24px 0 8px; font-size: 1.1em; font-weight: bold; }

@media screen and (max-width: 600px) {
  #form_wrap .partsInput input.partsName { width: 9em; }
}

/* reCAPTCHA（確認画面） */
.recaptchaArea { display: flex; flex-direction: column; align-items: flex-start; margin: 0 0 40px; }
.recaptchaArea .recaptchaerror { margin: 8px 0 0; color: #d00; font-weight: bold; }

/* 同意画面の同意文：確認画面と同じ白いカードにして左右に余白を取る */
.agreeText {
  background: #fff;
  border-radius: 24px;
  margin: 0 50px 50px;
  padding: 50px;
  line-height: 1.9;
}
.agreeText ol.agreement { list-style: none; margin: 0; padding: 0; }   /* 番号は本文に書いてあるので付けない */
.agreeText ol.agreement > li + li { margin-top: 1em; }
.agreeText ul { list-style: none; margin: 8px 0 8px 1em; padding: 0; }
@media screen and (max-width: 768px) {
  .agreeText { margin: 0 25px 40px; padding: 25px; }
}

/* form_gl の「.form_group > div > div { width: 48% }」（旧2列レイアウト用）を、PHPフォームの部品では解除する */
#form_wrap .form_group > div > .partsInput,
#form_wrap .form_group > div > .dateInput,
#form_wrap .form_group > div > .choiceList,
#form_wrap .form_group > div > .inputWithUnit {
  width: 100%;
  margin: 0;
  padding-left: 0;
  border-left: none;
  font-size: inherit;
}

/* 確認画面のボタン：「戻る」「送信」を横に並べる（form_gl と同じく左寄せ） */
.submitBtns { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; }
.submitBtns button { display: inline-block; }
.submitBtns button#backBtn { margin-right: 0; }

/* 「個人情報に関するご質問・ご相談はこちら」の矢印（form_gl の icon_form_arr.svg の代わり） */
.txtLinkA1::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M1 6h9M6.5 2.5L10 6l-3.5 3.5' fill='none' stroke='%23282828' stroke-width='1.6'/%3E%3C/svg%3E");
  border-radius: 50%;
}
/* 確認画面：reCAPTCHA とボタンの左端を白いカードとそろえる */
@media screen and (min-width: 769px) {
  .articleFormConfirm .recaptchaArea,
  .articleFormConfirm .submitBtns { margin-left: 50px; }
}

/* 条件付き項目（Field::showWhen）：hidden を grid / block 指定より優先する */
.form_group[hidden] { display: none !important; }
/* 1つだけのチェックボックス（FlagField）：チェックボックス自体が見出し */
#form_wrap .flagItem { display: inline-flex; align-items: center; gap: 4px; font-weight: bold; font-size: 18px; cursor: pointer; }
#form_wrap .form_group.conditional { padding-left: 32px; }
/* 同意文の番号付きリスト（番号を本文に書かないパターン） */
.agreeText ol.listDecimal { list-style: decimal; margin: 0; padding-left: 1.5em; }
.agreeText ol.listDecimal > li + li { margin-top: 1em; }
.agreeText .h3DesignA1:first-child { margin-top: 0; }
.agreeText p { margin: 8px 0 0; padding: 0; }
.agreeText ol.listDecimal > li { margin-bottom: 0; padding-bottom: 0; }

/* form_gl の項目名決め打ち指定（.form_group.user_name { width: 50% } など）が、同じ送信名の項目に効かないようにする */
#form_wrap .grid-container > .form_group { width: auto; }

/* 入力画面の上に出す案内（サイト設定 intro_html。例：決算説明会の開催概要） */
.eventInfo { background: #fff; border-radius: 24px; margin: 0 50px 50px; padding: 40px 50px; }
.eventInfo h2.h2DesignA1 { margin: 0 0 16px; padding: 0; font-size: 28px; }
.eventInfo h3.h3DesignA1 { margin: 24px 0 4px; padding: 0; }
.eventInfo p { margin: 4px 0 0 !important; padding: 0; }   /* form_gl の「h2 直後の p に下余白 160px」を打ち消す */
@media screen and (max-width: 768px) {
  .eventInfo { padding: 25px; margin: 0 25px 40px; }
}

/* 同意画面の上の案内（サイト設定 agree_notice_html。旧の赤枠） */
.agreeNotice { border: 3px solid #f00; border-radius: 16px; background: #fff; margin: 0 50px 32px; padding: 16px 24px; line-height: 1.8; }
@media screen and (max-width: 768px) { .agreeNotice { margin: 0 25px 24px; } }

/* 入力欄の上の固定 HTML（Field::lead）。.alertBox は旧フォームの「対象地域を確認する」のような赤枠の案内 */
.fieldLead, #form_wrap .form_group > div > .fieldLead { display: block; width: 100%; max-width: none; float: none; margin: 0 0 12px; }
.fieldLead .note { margin: 0 0 8px; }
.alertBox { border: 2px solid #d32f2f; border-radius: 8px; background: #fff; padding: 12px 16px; color: #d32f2f; line-height: 1.8; }
.alertBox a { color: #0000ff; text-decoration: underline; }
.alertBox .alertLinks { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 4px 0 0 1em; }
.alertBox .alertLinks a::before { content: "＞"; color: #d32f2f; text-decoration: none; display: inline-block; margin-right: 2px; }

/* 合計金額（TotalField） */
.totalBox { display: flex; align-items: baseline; gap: 6px; }
.totalBox .totalValue { font-size: 1.5em; font-weight: bold; min-width: 6em; text-align: right; padding: 8px 16px; background: #fff; border-radius: 8px; }
.totalBox .totalUnit { font-size: 1em; }

/* 大見出しの下の1行（サイト設定 sub_heading。旧 sub_title） */
.subHeading { margin: -16px 0 24px; font-size: 1.1em; font-weight: bold; color: #333; }

/* 入力画面冒頭の案内（サイト設定 intro_html）・資料ダウンロードのボタン（サイト設定 downloads） */
.introText { margin: 0 0 24px; line-height: 1.8; }
.downloadBtns { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 24px 0 32px; }