@charset "UTF-8";

.p-preorder-component-form .c-form-item__body {
  gap: 12px;
}

/* 郵便番号は幅が狭い(88px/104px)のに、通常のpadding-right(44px:アイコン用)が効いて
   「921」等が入りきらず右が切れ、左に寄って見えていた（＝「左寄り」の正体）。
   モバイル同様に左右を詰める。値は短く左寄せなので、右端の✓/×とは重ならない。 */
.p-preorder-component-form .c-form-control-wrap--zip-short .c-form-control,
.p-preorder-component-form .c-form-control-wrap--zip-long .c-form-control {
  padding-right: 10px !important;
  padding-left: 10px !important;
}

.p-preorder-component-form .c-form-control {
  display: block;
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  padding: 12px 16px;
  border: 1px solid var(--c-form-color-border, #d9d9d9);
  border-radius: var(--c-form-radius, 4px);
  background: var(--c-form-color-white, #fff);
  color: var(--c-form-color-text, #212121);
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  appearance: none;
}

.p-preorder-component-form .c-form-control--select {
  cursor: pointer;
}

/* 入力OKの色は共有CSS（preorder-shared/preorder_form.css）の
   --preorder-color-valid / --preorder-color-valid-bg に集約している。
   ここでブランドのティール（#1ab2b1）を直接指定していると、共有CSSより
   後に読み込まれるぶん上書きしてしまうため、同じ変数を参照する。
   PCLコメント（行639）「エラーなし時の背景色が青い」対応。 */
.p-preorder-component-form .c-form-control-wrap.is-valid .c-form-control {
  border-color: var(--preorder-color-valid, #1f9d55);
  background: var(--preorder-color-valid-bg, #f2faf5);
}

.p-preorder-component-form .c-form-control-wrap.is-error .c-form-control {
  border-color: var(--c-form-color-error, #df1111);
  background: var(--c-form-color-error-bg, #fff2f3);
}

.p-preorder-component-form .c-form-control-wrap.is-valid .c-form-control {
  padding-right: 48px;
}

/* エラー時は×アイコンを表示しない（下の .c-form-status-icon--ng 非表示ルール参照）ため、
   アイコン用のpaddingも確保しない。padding分で入力済みの内容が隠れるのを防ぐ。 */
.p-preorder-component-form .c-form-control-wrap.is-error .c-form-control {
  padding-right: 16px;
}

.p-preorder-component-form .c-form-control-wrap > .c-form-status-icon {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: block;
  color: var(--c-form-color-green-5, #1ab2b1);
  pointer-events: none;
  transform: translateY(-50%);
}

.p-preorder-component-form .c-form-control-wrap > .c-form-status-icon--ng {
  display: none;
}

.p-preorder-component-form .c-form-control-wrap > .c-form-status-icon--ng {
  color: var(--c-form-color-error, #df1111);
}

.p-preorder-component-form .p-preorder-family__field .errorMessage {
  margin: 0;
}

@media screen and (min-width: 768px) {
  .p-preorder-component-form .p-preorder-family {
    width: 100%;
    margin: 0;
  }

  .p-preorder-component-form .p-preorder-family__list {
    display: grid;
    overflow: hidden;
    /* 年齢列は入力欄(固定96px、flex-shrink不可)+gap(8px)+単位「歳」で
       128px前後を要するため、列幅の下限をpadding(左右32px)込みで
       余裕を持たせる（旧132pxでは列が下限付近まで縮んだ際に「歳」が
       枠外へはみ出していた）。
       エラーメッセージを2行目へ折り返させるため各セルを flex-wrap:wrap に
       したので、下限が内容とぴったりだと「歳」まで2行目へ落ちてしまう。
       168px→176pxへ8pxだけ余裕を足す。 */
    grid-template-columns: minmax(300px, 1.45fr) minmax(176px, 0.65fr) repeat(3, minmax(170px, 1fr));
    gap: 0;
    border: 1px solid var(--c-form-color-border, #d9d9d9);
    border-radius: 8px;
    background: #f7f9fb;
  }

  .p-preorder-component-form .p-preorder-family__pc-head {
    display: flex;
    min-height: 59px;
    box-sizing: border-box;
    align-items: center;
    padding: 14px 20px;
    border-left: 1px solid var(--c-form-color-white, #fff);
    background: #c7ecea;
    color: var(--c-form-color-text, #002b52);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
  }

  .p-preorder-component-form .p-preorder-family__pc-head:first-child {
    border-left: 0;
  }

  .p-preorder-component-form .p-preorder-family__card {
    display: contents;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .p-preorder-component-form .p-preorder-family__card[hidden] {
    display: none !important;
  }

  .p-preorder-component-form .p-preorder-family__header {
    display: none;
  }

  .p-preorder-component-form .p-preorder-family__rows,
  .p-preorder-component-form .p-preorder-family__row {
    display: contents;
    overflow: visible;
    border: 0;
    border-radius: 0;
  }

  .p-preorder-component-form .p-preorder-family__label {
    display: none;
  }

  /* エラーメッセージ（[id$="_errmsg"]、flex-basis:100%）を2行目へ折り返させるため
     wrap にする。メッセージが無いときは空のspanが display:none で
     フレックス項目にならないため、従来どおり1行のまま描画される。

     align-content は flex-start。セルの高さは行内で最も高いセル（＝メッセージが
     2行になったセル）に合わせて伸びるため、中央揃えのままだとメッセージの行数に
     応じて入力欄の位置が上下にずれてしまう。上詰めにして、どのセルでも入力欄が
     セル上端（padding分）から始まるように揃える。
     align-items は center のまま。これは各行の中での揃え方なので、「1人目」や
     「歳」が入力欄と縦中央で揃う従来の見た目を保つ。 */
  .p-preorder-component-form .p-preorder-family__field {
    display: flex;
    min-height: 81px;
    box-sizing: border-box;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    gap: 12px;
    padding: 16px;
    border-top: 1px solid var(--c-form-color-border, #d9d9d9);
    border-left: 1px solid var(--c-form-color-border, #d9d9d9);
    background: #f7f9fb;
  }

  .p-preorder-component-form .p-preorder-family__row:first-child .p-preorder-family__field {
    border-left: 0;
  }

  .p-preorder-component-form .p-preorder-family__pc-number {
    display: block;
    flex: 0 0 48px;
    color: var(--c-form-color-text, #002b52);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
  }

  .p-preorder-component-form .p-preorder-family .c-form-control-wrap,
  .p-preorder-component-form .p-preorder-family .c-form-control-wrap--select {
    width: 100%;
    min-width: 0;
    max-width: 190px;
    flex: 1 1 0;
  }

  .p-preorder-component-form .p-preorder-family__row:first-child .c-form-control-wrap,
  .p-preorder-component-form .p-preorder-family__row:first-child .c-form-control-wrap--select {
    /* 共有CSS（preorder-shared/preorder_form.css）側の同セレクタが
       width/min-width を 278px に固定しており、CSS仕様上 min-width は
       max-width より優先されるため、max-width だけを上書きしても
       実際の描画幅は278pxのままになっていた。width/min-width/flex-basis
       も明示的に上書きし、278pxの指定を完全に無効化する。 */
    width: 100%;
    max-width: 224px;
    flex: 0 0 224px;
    flex-basis: 224px;
  }

  /* 家族セレクトは幅が狭く、通常のpadding(左16px/右34px)で「選択してください」が
     見切れていた。左右を詰めて文字領域を確保する。 */
  .p-preorder-component-form .p-preorder-family .c-form-control--select {
    padding-left: 10px !important;
    padding-right: 26px !important;
    background-position: right 8px center !important;
  }

  .p-preorder-component-form .p-preorder-family__field--age {
    gap: 8px;
  }

  .p-preorder-component-form .p-preorder-family__field--age .c-form-control-wrap {
    width: 96px;
    min-width: 64px;
    flex: 0 1 96px;
  }

  .p-preorder-component-form .p-preorder-family__field--age .c-form-control {
    text-align: left;
  }

  /* デスクトップの家族欄はかつて flex-wrap:nowrap だったため、フィールド単位の
     エラーメッセージ(先頭に content:"×" が付く)が select の右へ押し出されて
     見切れており、その対処としてデスクトップでは非表示にしていた。
     フィールドを wrap にしてメッセージを2行目に置けるようにしたため、
     デスクトップでもモバイルと同じく文言を表示する。
     年齢欄は共有CSSの狭幅ブレークポイントで nowrap 指定があるので、
     ここで併せて wrap に戻す。 */
  .p-preorder-component-form .p-preorder-family__field--age {
    flex-wrap: wrap;
    align-content: flex-start;
  }

  .p-preorder-component-form .p-preorder-family__field > [id$="_errmsg"] {
    display: block;
    flex: 0 0 100%;
    min-width: 100%;
    order: 3;
    margin-top: 4px;
  }

  /* 文言が無いときに空のspanが行を占有しないようにする（共有CSSと同じ指定を
     このブロック内でも明示し、上の display:block に負けないようにする）。 */
  .p-preorder-component-form .p-preorder-family__field > [id$="_errmsg"]:empty {
    display: none !important;
  }

  .p-preorder-component-form .p-preorder-family__actions {
    margin-top: 24px;
  }

  .p-preorder-component-form .p-preorder-family__remove:not([hidden]) {
    display: inline-flex;
  }
}

/* preorder-layout-1280:end */
/* preorder-field-balance:start */
@media screen and (min-width: 768px) {
  .p-preorder-component-form .c-form-item__body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
  }

  .p-preorder-component-form .c-form-item__body > [id$="_errmsg"] {
    order: -2;
    flex: 0 0 100%;
  }

  .p-preorder-component-form .c-form-item__body > .errorMessage,
  .p-preorder-component-form .c-form-item__body > .errorMessage2 {
    flex: 0 0 100%;
  }

  .p-preorder-component-form .c-form-item__body br,
  .p-preorder-component-form .floatDList br {
    display: none;
  }

  .p-preorder-component-form .p-preorder-inline-text {
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    color: var(--c-form-color-text, #212121);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.8;
    white-space: nowrap;
  }

  .p-preorder-component-form .noteList,
  .p-preorder-component-form .nmlText {
    flex: 0 0 100%;
    width: 100%;
    margin: 4px 0 0;
  }

  .p-preorder-component-form .p-preorder-field-body--name {
    display: grid;
    grid-template-columns: 32px 240px 32px 240px;
    gap: 12px 16px;
    align-items: center;
  }

  .p-preorder-component-form #kana_err .p-preorder-field-body--name {
    grid-template-columns: 40px 240px 40px 240px;
  }

  .p-preorder-component-form .p-preorder-field-body--name > [id$="_errmsg"],
  .p-preorder-component-form .p-preorder-field-body--name .c-form-field__example {
    grid-column: 1 / -1;
  }

  .p-preorder-component-form .p-preorder-field-body--name .p-preorder-inline-text {
    min-height: 50px;
  }

  .p-preorder-component-form .p-preorder-field-body--name .c-form-control-wrap {
    width: 240px;
    max-width: 240px;
  }

  .p-preorder-component-form .p-preorder-field-body--date {
    gap: 12px 8px;
  }

  .p-preorder-component-form .c-form-control-wrap--date-era {
    width: 316px;
  }

  .p-preorder-component-form .c-form-control-wrap--date-year {
    width: 144px;
  }

  .p-preorder-component-form .c-form-control-wrap--date-part {
    width: 160px;
  }

  .p-preorder-component-form .c-form-control-wrap--preorder-number,
  .p-preorder-component-form .c-form-control-wrap--area {
    width: 144px;
  }

  .p-preorder-component-form .c-form-control-wrap--full {
    width: 100%;
  }

  .p-preorder-component-form .form__postalcode,
  .p-preorder-component-form .form__address,
  .p-preorder-component-form .form__tel {
    flex: 0 0 100%;
    width: 100%;
    margin: 0;
    gap: 12px 16px;
  }

  .p-preorder-component-form .form__address {
    align-items: center;
  }

  .p-preorder-component-form .form__address .c-form-control-wrap--select {
    width: 316px;
  }

  .p-preorder-component-form .form__address .c-form-control-wrap:not(.c-form-control-wrap--select) {
    width: 424px;
  }

  .p-preorder-component-form .form__address .p-preorder-inline-text {
    flex: 0 0 100%;
    min-height: auto;
    margin-top: 4px;
  }

  .p-preorder-component-form .form__postalcode .p-preorder-inline-text,
  .p-preorder-component-form .form__tel .p-preorder-inline-text {
    min-height: 50px;
  }

  .p-preorder-component-form .floatDList {
    flex: 0 0 100%;
    display: grid;
    width: 100%;
    grid-template-columns: 224px minmax(0, 1fr);
    gap: 0 40px;
    margin: 0;
  }

  .p-preorder-component-form .floatDList dt,
  .p-preorder-component-form .floatDList dd {
    min-height: 82px;
    box-sizing: border-box;
    margin: 0;
    padding: 16px 0;
    border-top: 1px solid var(--c-form-color-border, #d9d9d9);
  }

  .p-preorder-component-form .floatDList dt:first-of-type,
  .p-preorder-component-form .floatDList dd:first-of-type {
    border-top: 0;
  }

  .p-preorder-component-form .floatDList dt {
    display: flex;
    align-items: center;
    color: var(--c-form-color-text, #212121);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.8;
  }

  .p-preorder-component-form .floatDList dd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .p-preorder-component-form .floatDList dd > [id$="_errmsg"] {
    flex: 0 0 100%;
  }

  .p-preorder-component-form .floatDList .p-preorder-inline-text {
    min-height: 50px;
  }

  .p-preorder-component-form .floatDList .noteList {
    flex: 0 0 100%;
    margin-top: 0;
  }

  .p-preorder-component-form .floatDList .c-form-control-wrap:not(.c-form-control-wrap--preorder-number):not(.c-form-control-wrap--select) {
    width: 424px;
  }
}

/* preorder-land-owner-wrap:end */

/* preorder-mobile-375-balance:start */
@media screen and (max-width: 767px) {
  .p-preorder-component-form,
  .p-preorder-component-form * {
    box-sizing: border-box;
  }

  .p-preorder-component-form {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .p-preorder-component-form .p-preorder-item-list,
  .p-preorder-component-form .p-preorder-form-item,
  .p-preorder-component-form .c-form-item__head,
  .p-preorder-component-form .c-form-item__body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .p-preorder-component-form .p-preorder-form-item {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 16px;
    padding: 24px 0 28px !important;
  }

  .p-preorder-component-form .p-preorder-form-item + .p-preorder-form-item {
    padding-top: 24px !important;
  }

  .p-preorder-component-form .c-form-item__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 10px;
  }

  .p-preorder-component-form .c-form-item__title {
    width: auto !important;
    max-width: 100%;
    padding: 0;
    line-height: 1.7;
    overflow-wrap: break-word;
  }

  .p-preorder-component-form .required .c-form-item__title {
    max-width: calc(100% - 72px);
  }

  .p-preorder-component-form .c-form-item__head .c-form-tag {
    flex: 0 0 auto;
    margin-top: 0;
  }

  .p-preorder-component-form .c-form-item__body,
  .p-preorder-component-form .p-preorder-field-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 8px;
  }

  .p-preorder-component-form .c-form-control-wrap,
  .p-preorder-component-form .c-form-control-wrap--select {
    min-width: 0;
    max-width: 100%;
  }

  .p-preorder-component-form .c-form-control {
    max-width: 100%;
  }

  .p-preorder-component-form .p-preorder-inline-text {
    max-width: 100%;
    min-height: auto;
    line-height: 1.7;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .p-preorder-component-form .c-form-control-wrap + .p-preorder-inline-text {
    display: inline-flex;
    flex: 0 0 auto;
    width: auto;
    min-height: 50px;
    align-items: center;
    white-space: nowrap;
  }

  .p-preorder-component-form .p-preorder-line-break {
    flex: 0 0 100%;
    width: 100%;
    height: 0;
    min-height: 0;
  }

  .p-preorder-component-form .p-preorder-line-break + .p-preorder-inline-text,
  .p-preorder-component-form .noteList,
  .p-preorder-component-form .nmlText {
    flex: 0 0 100%;
    width: 100%;
    margin: 4px 0 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .p-preorder-component-form .p-preorder-field-body--name {
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 12px 8px;
    align-items: center;
  }

  .p-preorder-component-form #kana_err .p-preorder-field-body--name {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .p-preorder-component-form .p-preorder-field-body--name > [id$="_errmsg"],
  .p-preorder-component-form .p-preorder-field-body--name .c-form-field__example {
    grid-column: 1 / -1;
  }

  .p-preorder-component-form .p-preorder-field-body--name .p-preorder-inline-text {
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    white-space: nowrap;
  }

  .p-preorder-component-form .p-preorder-field-body--date {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 6px;
  }

  .p-preorder-component-form .p-preorder-field-body--date .c-form-control-wrap--date-era {
    flex: 0 0 100%;
    width: 100% !important;
  }

  .p-preorder-component-form .p-preorder-field-body--date .p-preorder-line-break {
    display: none !important;
    flex-basis: 0 !important;
    width: 0 !important;
  }

  .p-preorder-component-form .p-preorder-field-body--date .c-form-control-wrap--date-year {
    flex: 1 1 78px;
    width: 78px !important;
    max-width: 86px;
  }

  .p-preorder-component-form .p-preorder-field-body--date .c-form-control-wrap--date-part {
    flex: 1 1 70px;
    width: 70px !important;
    max-width: 78px;
  }

  .p-preorder-component-form .p-preorder-field-body--date .c-form-control-wrap + .p-preorder-inline-text {
    flex: 0 0 auto;
    min-width: 16px;
    min-height: 50px;
  }

  .p-preorder-component-form .c-form-control-wrap--preorder-number,
  .p-preorder-component-form .c-form-control-wrap--preorder-number-secondary,
  .p-preorder-component-form .c-form-control-wrap--area {
    flex: 0 1 132px !important;
    width: 132px !important;
    max-width: calc(100% - 48px);
  }

  .p-preorder-component-form .floatDList {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0;
  }

  .p-preorder-component-form .floatDList dt {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 4px 0 10px !important;
    border: 0 !important;
    line-height: 1.7;
    overflow-wrap: break-word;
  }

  .p-preorder-component-form .floatDList dd {
    display: flex !important;
    width: 100% !important;
    min-height: 0 !important;
    flex-wrap: wrap;
    align-items: center !important;
    gap: 8px;
    padding: 0 0 22px !important;
    border: 0 !important;
    line-height: 1.7;
  }

  .p-preorder-component-form .floatDList dd + dt {
    padding-top: 8px !important;
  }

  .p-preorder-component-form .floatDList .c-form-control-wrap:not(.c-form-control-wrap--preorder-number):not(.c-form-control-wrap--preorder-number-secondary):not(.c-form-control-wrap--select):not(.c-form-control-wrap--area) {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .p-preorder-component-form .floatDList .c-form-control-wrap--select {
    flex: 0 0 100%;
    width: 100% !important;
  }

  .p-preorder-component-form .floatDList .c-form-control-wrap--preorder-number,
  .p-preorder-component-form .floatDList .c-form-control-wrap--preorder-number-secondary,
  .p-preorder-component-form .floatDList .c-form-control-wrap--area {
    flex: 0 1 132px !important;
    width: 132px !important;
    max-width: calc(100% - 48px);
  }

  .p-preorder-component-form .floatDList dd > [id$="_errmsg"] {
    flex: 0 0 100%;
    width: 100%;
  }

  .p-preorder-component-form .form__postalcode,
  .p-preorder-component-form .form__address,
  .p-preorder-component-form .form__tel {
    width: 100%;
    max-width: 100%;
    gap: 10px 8px;
  }

  .p-preorder-component-form .form__address .c-form-control-wrap--select,
  .p-preorder-component-form .form__address .c-form-control-wrap:not(.c-form-control-wrap--select) {
    width: 100% !important;
    max-width: 100% !important;
  }

  .p-preorder-component-form #shikin_err .c-form-item__body,
  .p-preorder-component-form #hiyou_err .c-form-item__body {
    overflow: hidden;
  }

  .p-preorder-component-form #shikin_err .floatDList dd,
  .p-preorder-component-form #hiyou_err .floatDList dd {
    padding-bottom: 20px !important;
  }

}

/* preorder-mobile-375-balance:end */

/* preorder-mobile-name-progress:start */
@media screen and (max-width: 767px) {
  .p-preorder-component-form .p-preorder-field-body--name .p-preorder-line-break {
    display: none !important;
  }

  .p-preorder-component-form .p-preorder-field-body--name .c-form-control-wrap,
  .p-preorder-component-form .p-preorder-field-body--name .c-form-control-wrap--name {
    grid-column: 2;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .p-preorder-component-form .p-preorder-field-body--name .c-form-control {
    width: 100% !important;
    min-width: 0 !important;
  }

  .p-preorder-component-form .p-form-progress-anchor {
    right: auto !important;
    bottom: 18px !important;
    left: 50% !important;
    width: 335px !important;
    max-width: calc(100vw - 40px) !important;
    height: 58px !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
  }
}

/* preorder-tablet-balance:end */

/* preorder-definition-common-progress-flow:start */
.p-preorder-component-form .p-form-progress-anchor {
  position: fixed;
  right: 40px;
  bottom: 40px;
  left: auto;
  width: 92px;
  height: 92px;
  margin: 0;
  transform: none;
  pointer-events: none;
}

/* preorder-definition-pc-breakpoint-fix:end */

/* preorder-definition-detail-tuning:start */

/* preorder-label-vertical-align-20260720:start */
/* form.cgi(preorder_definition.css)ではラベルがフィールド(高さ50px)の縦中央に
   揃うが、form2以降は align-items:start でラベルが上寄せになり、フィールドの
   文字中央より約12px高く見えていた（見出しと項目の上位置ズレ）。
   ラベル枠に先頭フィールドと同じ高さ(50px)を与え縦中央寄せして揃える。
   本文が複数行(例:住所)でも先頭フィールドに揃う。 */

/* preorder-label-vertical-align-20260720:end */

/* preorder-definition-detail-tuning:end */

/* preorder-definition-responsive-refine:start */

.p-preorder-component-form #term_year_err .c-form-item__body {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.p-preorder-component-form #term_year_err .c-form-control-wrap + .p-preorder-inline-text {
  width: auto;
  min-height: auto;
  flex: 0 0 auto;
  margin-top: 0;
  line-height: 1.6;
  white-space: nowrap;
}

/* preorder-definition-sp-container-fix-20260719:end */

/* preorder-definition-polish-review6-20260719:start */

/* preorder-definition-polish-review6-20260719:end */

/* preorder-definition-final-review7-20260719:start */

.p-preorder-component-form .c-form-item__head {
  display: flex !important;
  align-content: flex-start !important;
}

.p-preorder-component-form .c-form-item__body > :first-child,
.p-preorder-component-form .p-preorder-field-body > :first-child {
  margin-top: 0 !important;
}

/* preorder-definition-final-review7-20260719:end */

/* preorder-definition-final-review8-20260719:start */
.p-preorder-component-form .p-preorder-form-item {
  align-items: flex-start !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--c-form-color-border, #d9d9d9) !important;
}

.p-preorder-component-form .c-form-item__head,
.p-preorder-component-form .c-form-item__body,
.p-preorder-component-form .p-preorder-field-body {
  align-self: flex-start !important;
  align-items: flex-start !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.p-preorder-component-form .c-form-item__tag,
.p-preorder-component-form .c-form-tag {
  align-self: flex-start !important;
  margin-top: 0 !important;
}

.p-preorder-component-form .noteList {
  padding-left: 0 !important;
}

.p-preorder-component-form .p-form-progress-anchor {
  z-index: 2147483000 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition:
    opacity 0.24s ease,
    transform 0.24s ease,
    visibility 0s linear 0s !important;
}

.p-preorder-component-form .p-form-progress-anchor.is-progress-hidden {
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(12px) !important;
  transition:
    opacity 0.24s ease,
    transform 0.24s ease,
    visibility 0s linear 0.24s !important;
}

/* preorder-definition-final-review8-20260719:end */

/* preorder-definition-final-review9-20260719:start */
@media screen and (max-width: 767px) {
  .p-preorder-component-form #built_err .p-preorder-field-body--date,
  .p-preorder-component-form #shunkou_err .p-preorder-field-body--date,
  .p-preorder-component-form #hire_err .p-preorder-field-body--date {
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px 6px !important;
  }

  .p-preorder-component-form #built_err .p-preorder-field-body--date > .c-form-error,
  .p-preorder-component-form #shunkou_err .p-preorder-field-body--date > .c-form-error,
  .p-preorder-component-form #hire_err .p-preorder-field-body--date > .c-form-error {
    flex: 1 1 100% !important;
    width: 100% !important;
    order: 10;
  }

  .p-preorder-component-form #built_err .p-preorder-field-body--date .p-preorder-line-break--after-year,
  .p-preorder-component-form #shunkou_err .p-preorder-field-body--date .p-preorder-line-break--after-year,
  .p-preorder-component-form #hire_err .p-preorder-field-body--date .p-preorder-line-break--after-year {
    display: none !important;
  }

  .p-preorder-component-form #built_err .p-preorder-field-body--date .c-form-control-wrap--date-era,
  .p-preorder-component-form #shunkou_err .p-preorder-field-body--date .c-form-control-wrap--date-era,
  .p-preorder-component-form #hire_err .p-preorder-field-body--date .c-form-control-wrap--date-era {
    width: 82px !important;
    max-width: 82px !important;
    flex: 0 0 82px !important;
  }

  .p-preorder-component-form #built_err .p-preorder-field-body--date .c-form-control-wrap--date-year,
  .p-preorder-component-form #shunkou_err .p-preorder-field-body--date .c-form-control-wrap--date-year,
  .p-preorder-component-form #hire_err .p-preorder-field-body--date .c-form-control-wrap--date-year {
    width: 80px !important;
    max-width: 80px !important;
    flex: 0 0 80px !important;
  }

  .p-preorder-component-form #built_err .p-preorder-field-body--date .c-form-control-wrap--date-part,
  .p-preorder-component-form #shunkou_err .p-preorder-field-body--date .c-form-control-wrap--date-part,
  .p-preorder-component-form #hire_err .p-preorder-field-body--date .c-form-control-wrap--date-part {
    width: 68px !important;
    max-width: 68px !important;
    flex: 0 0 68px !important;
  }

  .p-preorder-component-form #hire_err .noteList {
    order: 20 !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    margin-top: 4px !important;
  }

  .p-preorder-component-form #place_price_err .p-preorder-field-body,
  .p-preorder-component-form #mansion_price_err .p-preorder-field-body {
    align-items: center !important;
    gap: 8px !important;
  }

  .p-preorder-component-form #place_price_err .p-preorder-inline-text,
  .p-preorder-component-form #mansion_price_err .p-preorder-inline-text {
    display: inline-flex !important;
    min-height: 50px !important;
    align-items: center !important;
  }
}

/* preorder-definition-final-review9-20260719:end */

/* preorder-definition-status-family-balance-20260719:start */
.p-preorder-component-form .c-form-control-wrap > .c-form-status-icon {
  right: 14px !important;
  width: 16px !important;
  height: 16px !important;
}

.p-preorder-component-form .c-form-control-wrap--select > .c-form-status-icon {
  right: 14px !important;
}

/* select で✓/×を表示中は、矢印(background-image)のみ隠してアイコンと入れ替える。
   padding は通常時と同じままにし、選択前後で文字位置・見た目の幅が変わらないようにする。
   （以前は padding-right:48px に変えていたため、通常時(desktop 34px)から
   文字位置がずれ「フィールド幅が変わった」ように見えていた。） */
.p-preorder-component-form .c-form-control-wrap--select.is-valid .c-form-control--select {
  background-image: none !important;
}

.p-preorder-component-form .c-form-control {
  padding-right: 48px;
}

.p-preorder-component-form .c-form-control--select {
  padding-right: 68px;
}

.p-preorder-component-form .c-form-control-wrap--date-era > .c-form-status-icon,
.p-preorder-component-form .c-form-control-wrap--date-part > .c-form-status-icon {
  right: 28px !important;
}

.p-preorder-component-form .c-form-control-wrap--date-year > .c-form-status-icon,
.p-preorder-component-form #age_err .c-form-control-wrap--select > .c-form-status-icon,
.p-preorder-component-form #term_year_err .c-form-control-wrap--select > .c-form-status-icon {
  right: 12px !important;
}

.p-preorder-component-form .c-form-control-wrap--date-era > .c-form-status-icon,
.p-preorder-component-form .c-form-control-wrap--date-part > .c-form-status-icon{
  display: none;
}

/* 生年月日(#birth_err)はPC・スマートフォンともに1行に整える。
   他の日付項目(#hire_err等)の幅や折り返しには影響させない。 */
#birth_err .p-preorder-field-body--date {
  align-items: center !important;
  flex-wrap: wrap !important;
  column-gap: 8px !important;
  row-gap: 8px !important;
}

/* 初期表示では空の旧エラー領域を詰める。文言が入った場合の行と余白は残す。 */
#birth_err .p-preorder-field-body--date > #birth_errmsg:empty {
  display: none !important;
}

#birth_err .p-preorder-field-body--date > #birth_errmsg:not(:empty) {
  display: block !important;
  flex: 1 1 100% !important;
  width: 100% !important;
  order: 10;
}

#birth_err .p-preorder-field-body--date .p-preorder-line-break {
  display: none !important;
}

#birth_err .p-preorder-field-body--date .c-form-control-wrap--date-era {
  width: 112px !important;
  max-width: 112px !important;
  min-width: 112px !important;
  flex: 0 0 112px !important;
}

#birth_err .p-preorder-field-body--date .c-form-control-wrap--date-year {
  width: 96px !important;
  max-width: 96px !important;
  min-width: 96px !important;
  flex: 0 0 96px !important;
}

#birth_err .p-preorder-field-body--date .c-form-control-wrap--date-part {
  width: 88px !important;
  max-width: 88px !important;
  min-width: 88px !important;
  flex: 0 0 88px !important;
}

/* 選択文字と状態アイコンの表示領域を確保する。 */
#birth_err .p-preorder-field-body--date .c-form-control-wrap--date-era .c-form-control,
#birth_err .p-preorder-field-body--date .c-form-control-wrap--date-year .c-form-control,
#birth_err .p-preorder-field-body--date .c-form-control-wrap--date-part .c-form-control {
  padding-left: 12px !important;
  padding-right: 40px !important;
}

/* エラー文は独立した行として全幅を占め、従来の上下余白を維持する。 */
#birth_err .p-preorder-field-body--date > .c-form-error {
  flex: 1 1 100% !important;
  width: 100% !important;
  order: 10;
}

@media screen and (max-width: 767px) {
  #birth_err .p-preorder-field-body--date .p-preorder-line-break {
    display: none !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    height: 0 !important;
  }

  #birth_err .p-preorder-field-body--date {
    column-gap: 4px !important;
  }

  #birth_err .p-preorder-field-body--date .c-form-control-wrap--date-era {
    width: 65px !important;
    max-width: 65px !important;
    min-width: 65px !important;
    flex-basis: 65px !important;
  }

  #birth_err .p-preorder-field-body--date .c-form-control-wrap--date-year {
    width: 60px !important;
    max-width: 60px !important;
    min-width: 60px !important;
    flex-basis: 60px !important;
  }

  #birth_err .p-preorder-field-body--date .c-form-control-wrap--date-part {
    width: 60px !important;
    max-width: 65px !important;
    min-width: 65px !important;
    flex-basis: 65px !important;
  }
  
  #birth_err .p-preorder-field-body--date .c-form-control-wrap--date-era .c-form-control,
  #birth_err .p-preorder-field-body--date .c-form-control-wrap--date-year .c-form-control,
  #birth_err .p-preorder-field-body--date .c-form-control-wrap--date-part .c-form-control{
    padding-right: 24px !important;
  }
}

/* 電話番号は幅が狭く、通常時のpadding-right(base 48px)でプレースホルダーが
   途中で切れていた。アイコン非表示の通常時は14pxまで詰める。
   ✓/×表示中はアイコン分の余白(24px)を確保する。 */
.p-preorder-component-form .form__tel .c-form-control {
  padding-right: 14px !important;
}

.p-preorder-component-form .p-preorder-family__field .errorMessage {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
}

/* preorder-definition-status-family-balance-20260719:end */

/* preorder-definition-error-icon-position-20260719:start */
/* select は OK(✓)・NG(×) とも text項目と同じ右端(14px)に揃える。 */
.p-preorder-component-form .c-form-control-wrap--select.is-error > .c-form-status-icon--ng {
  right: 14px !important;
}

@media screen and (max-width: 767px) {
  .p-preorder-component-form .c-form-control-wrap--select.is-error > .c-form-status-icon--ng {
    right: 14px !important;
  }
}

/* preorder-definition-error-icon-position-20260719:end */

/* preorder-definition-account-field-stable-20260719:start */
.p-preorder-component-form .c-form-control-wrap--account,
.p-preorder-component-form .c-form-control-wrap--account.is-focus,
.p-preorder-component-form .c-form-control-wrap--account.is-valid,
.p-preorder-component-form .c-form-control-wrap--account.is-error,
.p-preorder-component-form .c-form-control-wrap--account.is-touched {
  width: 192px !important;
  min-width: 192px !important;
  max-width: 192px !important;
  flex: 0 0 192px !important;
}

/* preorder-definition-branch-field-stable-20260719:end */

/* preorder-confirm-summary-style-20260720:start */
/* 確認画面(confirm.cgi)のサマリが使うクラスは、これまで読み込まれる
   どのCSSにも定義が無く（p-preorder-confirm-* は全CSSに0件、
   p-preorder-money-group* は preorder_definition.css のみ＝confirmは非読込）、
   実質ノースタイルになっていた。confirm が読み込む本ファイルへ、
   変数はフォールバック付きで定義を集約する。 */
.p-preorder-component-form .p-preorder-confirm-value {
  margin: 0;
  color: var(--c-form-color-text, #1f2933);
  font-size: 16px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.p-preorder-component-form .p-preorder-confirm-unit-value {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: var(--c-form-color-text, #1f2933);
  font-size: 16px;
  line-height: 1.8;
}

.p-preorder-component-form .p-preorder-form__unit {
  color: var(--c-form-color-text, #1f2933);
  font-size: 14px;
  line-height: 1.6;
}

.p-preorder-component-form .p-preorder-confirm-address {
  display: grid;
  gap: 2px;
}

.p-preorder-component-form .p-preorder-confirm-address__line {
  color: var(--c-form-color-text, #1f2933);
  font-size: 16px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.p-preorder-component-form .p-preorder-money-group {
  display: grid;
  gap: 0;
  max-width: 760px;
}

.p-preorder-component-form .p-preorder-money-group__row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  padding: 12px 0;
}

.p-preorder-component-form .p-preorder-money-group__row:first-child {
  padding-top: 0;
}

.p-preorder-component-form .p-preorder-money-group__label {
  margin: 0;
  color: var(--c-form-color-text, #1f2933);
  font-weight: 700;
  line-height: 1.6;
}

.p-preorder-component-form .p-preorder-money-group__control {
  display: grid;
  gap: 8px;
  align-content: start;
  color: var(--c-form-color-text, #1f2933);
  font-variant-numeric: tabular-nums;
}

@media screen and (max-width: 767px) {
  .p-preorder-component-form .p-preorder-money-group__row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 10px 0;
  }
}

/* preorder-confirm-summary-style-20260720:end */

/* preorder-birthdate-one-line:start */
/* myhomeの#birth_err（本人の生年月日）は、既存の
   .c-form-control-wrap--date-era/-year/-part + line-break非表示の仕組みで
   既にスマホ1行表示が実装済み（このファイル内 #birth_err 関連ルールを参照）。
   ここでの追加上書きは不要（過去に誤ったセレクタで追加し、逆に既存の
   動作を上書きしてしまっていたため削除した）。 */
/* preorder-birthdate-one-line:end */

/* 見出しと必須/任意ラベルを、本文全体ではなく先頭フィールドの高さに揃える。 */
@media screen and (min-width: 768px) {
  .p-preorder-component-form .c-form-item__head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 16px !important;
    min-height: 50px !important;
    align-self: start !important;
    align-items: center !important;
    align-content: center !important;
  }

  .p-preorder-component-form .c-form-item__head .c-form-item__title {
    display: flex !important;
    min-height: 50px !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.4 !important;
  }

  .p-preorder-component-form .c-form-item__head .c-form-item__tag,
  .p-preorder-component-form .c-form-item__head .c-form-tag {
    align-self: center !important;
  }

  .p-preorder-component-form .c-form-item__body > [id$="_errmsg"]:empty {
    display: none !important;
  }
}

/* ---- STEP表示：スマホ時の横スクロール抑止（2026-09-24） ---- */
@media screen and (max-width: 767px) {
  .p-preorder-definition__flow .c-form-flow--preorder,
  .l-form-page__flow .c-form-flow--preorder {
    overflow-x: visible !important;
  }

  /* 可変幅の5番目より「内容確認」の文字幅が広い場合も右端へはみ出させない。 */
  .c-form-flow--preorder .c-form-flow__item:nth-child(5) {
    align-items: flex-end !important;
  }
}