/* application2.css - モダンデザイン版 申込フォーム固有スタイル */
/* request2.css の CSS変数 (--r2-*) を共有 */

/* ===== シリアルナンバー入力 ===== */
.serial-entries {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.serial-entry {
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--r2-border);
  border-radius: var(--r2-radius-sm);
  background: #f8fafc;
  position: relative;
}

.serial-entry-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.serial-field-name label,
.serial-field-sn label {
  display: block;
  font-weight: 600;
  font-size: var(--fs-14);
  margin-bottom: 0.3rem;
  color: var(--r2-text);
}

.serial-entry-remove {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--r2-danger);
  background: #fff;
  color: var(--r2-danger);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.serial-entry-remove:hover {
  background: var(--r2-danger);
  color: #fff;
}

.serial-add-wrap {
  margin-top: 1rem;
}

@media (max-width: 600px) {
  .serial-entry-fields {
    grid-template-columns: 1fr;
  }

  .serial-entry {
    padding: 1rem;
  }
}

.field-note--danger {
  color: var(--r2-danger);
  font-weight: 700;
}

/* ===== 告知事項：構造化入力 ===== */
.declaration-fields {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.decl-field label {
  display: block;
  font-weight: 600;
  font-size: var(--fs-note);
  margin-bottom: 0.3rem;
}

.decl-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.input-unit {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.input-unit input {
  flex: 1;
  min-width: 0;
  width: auto;
}

.input-unit .unit {
  flex-shrink: 0;
  font-size: var(--fs-note);
  color: var(--r2-text-muted);
  white-space: nowrap;
}

/* ===== 保険金請求：複数エントリ ===== */
.claim-entries {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.claim-entry {
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--r2-border);
  border-radius: var(--r2-radius-sm);
  background: #f8fafc;
  position: relative;
}

.claim-entry-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 2.6rem;
  height: 2.6rem;
  border: none;
  background: #ef4444;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  padding: 0;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--r2-transition);
}

.claim-entry-remove:hover {
  background: #dc2626;
}

@media (max-width: 600px) {
  .decl-field-row {
    grid-template-columns: 1fr;
  }

  .claim-entry {
    padding: 1rem;
  }
}

/* ===== サブラベル ===== */
.label-sub {
  font-size: var(--fs-note);
  font-weight: 400;
  color: var(--r2-text-muted);
}

/* ===== セクションタイトル ===== */
.request-section .section-title {
  font-size: clamp(2.4rem, 2rem + 1vw, 3.2rem);
  color: var(--r2-text);
  border-left: 0;
  padding-left: 0;
  text-align: center;
  margin-bottom: 1.6rem;
}

.text-emphasis {
  font-weight: 700;
}

/* ===== フィールド：数値右寄せ ===== */
.field-number {
  text-align: right;
}

/* ===== 払込方法 readonly ===== */
#paymentMethod.payment-readonly {
  color: #000;
  opacity: 1;
}

#paymentMethod.payment-transparent {
  background: transparent;
  border-color: var(--r2-border);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: none;
  text-align: left;
  text-align-last: left;
}

#paymentMethodLabel.payment-transparent {
  background: transparent;
}

#paymentMethod.payment-readonly option {
  color: #000;
}

/* ===== 性別セレクト ===== */
#individualGender {
  width: 20ch;
  text-align: center;
  text-align-last: center;
}

/* ===== テキストエリア高さ ===== */
#aircraftSerials,
#usagePurpose {
  min-height: 60px;
  resize: none;
  overflow: hidden;
}

#addressKanjiBase,
#addressKanjiDetail,
#addressKanaBase,
#addressKanaDetail,
#storageAddress {
  min-height: 2.8rem;
  resize: none;
  overflow: hidden;
}

#storageAddress {
  min-height: 4rem;
}

/* ===== フィールドノート ===== */
.field-note {
  margin-top: 0.5rem;
  font-size: var(--fs-note);
  color: var(--r2-text-muted);
  line-height: 1.7;
}

.address-continue-mark {
  color: var(--r2-danger);
}

/* ===== インラインフィールド（郵便番号・電話・日付） ===== */
.field-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.field-inline select,
.field-inline input {
  width: auto;
  min-width: 8em;
  flex: 0 0 auto;
}

.field-inline--stack {
  align-items: center;
}

.field-inline .field-prompt {
  flex: 1 1 100%;
  order: -1;
  margin: 0 0 0.2rem;
}

.field-inline--zip input {
  max-width: 8rem;
  text-align: center;
}

.field-inline--tel input {
  max-width: 9rem;
}

.field-inline--date select {
  max-width: 14em;
  text-align: center;
  text-align-last: center;
}

.field-separator {
  display: inline-block;
  padding: 0 0.2rem;
  color: var(--r2-text-muted);
}

.field-suffix {
  margin-left: 0.4rem;
  font-size: var(--fs-note);
}

.field-margin-top {
  margin-top: 0.4rem;
}

/* ===== ラベルブロック ===== */
.form-label-block {
  display: block;
  font-weight: 600;
  font-size: var(--fs-base);
  margin-bottom: 0.4rem;
  color: var(--r2-text);
}

.label-optional {
  color: var(--r2-danger);
  font-weight: 400;
}

.label-deep-green {
  color: #0a7c3e;
}

/* ===== ネストグループ（告知事項） ===== */
.nested-group {
  margin-top: 0.8rem;
}

/* ===== 区分別エリア ===== */
.corporation-only,
.insured-extra,
.storage-extra {
  margin-top: 1rem;
}

/* ===== メモ欄 ===== */
.form-note-block {
  margin-top: 0.4rem;
}

/* ===== 郵便番号補助 ===== */
.zip-helper {
  margin-top: 0.6rem;
}

.zip-info {
  font-size: var(--fs-note);
  color: var(--r2-primary);
  margin-top: 0.3rem;
}

.zip-error {
  font-size: var(--fs-note);
  color: var(--r2-danger);
  margin-top: 0.3rem;
}

.addr-candidates {
  margin-top: 0.8rem;
  padding: 0.8rem;
  border: 1px solid var(--r2-border);
  border-radius: var(--r2-radius-sm);
  background: #f8fafc;
  display: grid;
  gap: 0.4rem;
}

.addr-candidates button {
  text-align: left;
  border: 1px solid var(--r2-border);
  background: #fff;
  padding: 0.6rem 0.8rem;
  border-radius: var(--r2-radius-sm);
  cursor: pointer;
  transition: border-color var(--r2-transition), box-shadow var(--r2-transition);
}

.addr-candidates button:hover,
.addr-candidates button:focus-visible {
  border-color: var(--r2-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.12);
}

.zip-mark {
  margin-left: 0.4rem;
  font-weight: 700;
}

.zip-result textarea {
  min-height: 80px;
}

.zip-autofill {
  resize: vertical;
}

/* ===== 住所ベースフィールド ===== */
#addressKanjiBase,
#addressKanaBase {
  font-weight: 700;
  border: none;
  box-shadow: none;
  background: transparent;
}

#addressKanjiBase.is-invalid {
  color: var(--r2-danger);
}

#storageAddress.is-invalid {
  color: var(--r2-danger);
}

/* ===== セレクト幅制限 ===== */
#contractType,
#planPremium,
#paymentMethod,
#insuredSame,
#storageSame,
#dupInsurance,
#claimHistory,
#rejectionHistory {
  width: min(320px, 100%);
}

label[for="contractType"],
label[for="planPremium"],
label[for="paymentMethod"],
label[for="insuredSame"],
label[for="storageSame"],
label[for="dupInsurance"],
label[for="claimHistory"],
label[for="rejectionHistory"] {
  display: block;
}

/* ===== フォーム入力のスタイル上書き ===== */
#applicationForm input,
#applicationForm select,
#applicationForm textarea {
  background-color: #f8fafc;
  font-size: var(--fs-base);
}

#applicationForm input:not([type="hidden"]):focus,
#applicationForm select:focus,
#applicationForm textarea:focus {
  background: #fff;
  border-color: var(--r2-primary);
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15);
  outline: none;
}

#addressKanjiBase,
#addressKanaBase {
  background: #fff !important;
}

#addressKanjiBase:focus,
#addressKanaBase:focus {
  background: #fff !important;
  border-color: var(--r2-primary);
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15);
}

/* ===== 個人情報注意書きエリア ===== */
.form-notes {
  margin-top: 2rem;
  padding: 1.6rem 2rem;
  background: #f8fafc;
  border-radius: var(--r2-radius-sm);
  border: 1px solid var(--r2-border);
}

.form-notes .note {
  margin: 0;
  color: var(--r2-text-muted);
}

/* ===== レスポンシブ ===== */
@media (max-width: 768px) {
  .field-inline {
    flex-wrap: nowrap;
  }

  .field-inline--tel input,
  .field-inline--zip input,
  .field-inline--date select {
    max-width: 100%;
    flex: 1 0 auto;
  }

  #contractType,
  #planPremium,
  #paymentMethod {
    text-align: center;
    text-align-last: center;
  }

  #planPremium {
    text-align: center;
  }

  #applicationForm select {
    font-size: var(--fs-base);
  }
}

@media (max-width: 480px) {
  #applicationForm select {
    font-size: var(--fs-base);
  }
}

@media (min-width: 769px) {
  #contractType,
  #planPremium,
  #paymentMethod {
    width: 25%;
    text-align: center;
    text-align-last: center;
  }

  #planPremium {
    text-align: center;
  }
}