/* =========================================================
   春光学園 — エントリーフォーム (entry.html) ページ固有CSS
   設計の正解: page_analysis/entry_design.png (1042px論理キャンバス)
   実測値ベースで幾何を一致 / 入力しやすさ最優先
   ========================================================= */

/* ページ全体ラッパ(装飾の絶対配置の基準) */
.entry-wrap{
  position:relative;
  padding:24px 0 40px;
  overflow:hidden;
}

/* ページタイトル「エントリーフォーム」(新丸ゴ・水色) */
.entry-wrap .page-title{
  text-align:center;
  font-family:var(--font-r);
  color:var(--aqua);
  font-size:24px;
  letter-spacing:.34em;
  font-weight:500;
  margin:18px 0 0;
  line-height:1.5;
  padding-left:.34em;
}

/* タイトル下の点線 */
.entry-wrap .dots{
  height:3px;border:none;
  background:radial-gradient(circle closest-side, var(--aqua-line) 96%, transparent) center/11px 3px repeat-x;
  margin:24px 22px 6px;
}

/* ---- フォーム本体 ---- */
.entry-form{
  position:relative;z-index:1;
  max-width:600px;
  margin:0 auto;
  padding:26px 22px 8px;
}

/* 1項目(ラベル行 + 入力 + エラー) */
.ef-field{margin-bottom:18px}

/* ラベル行(必須バッジ + テキスト) */
.ef-label{
  display:flex;align-items:center;gap:9px;
  margin-bottom:9px;
}
.ef-badge{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--aqua);
  color:#fff;
  font-family:var(--font-r);
  font-size:11px;font-weight:500;letter-spacing:.04em;
  padding:4px 8px;border-radius:5px;
  line-height:1.2;flex-shrink:0;
}
.ef-label-txt{
  font-family:var(--font-g);
  color:var(--ink);
  font-size:14.5px;
  font-weight:500;
  letter-spacing:.04em;
}

/* 入力コントロール共通 */
/* 設計実測: 白地・黒1px枠・角ほぼ無し(素のフォーム枠) */
.entry-form input[type="text"],
.entry-form input[type="email"],
.entry-form input[type="tel"],
.entry-form textarea{
  font-family:var(--font-g);
  font-size:15px;
  color:var(--ink);
  background:#fff;
  border:1px solid #000;
  border-radius:1px;
  padding:11px 12px;
  width:100%;
  line-height:1.5;
  letter-spacing:.02em;
  transition:border-color .25s,box-shadow .25s;
  -webkit-appearance:none;appearance:none;
}
.entry-form input::placeholder,
.entry-form textarea::placeholder{
  color:#B8AEA0;
  letter-spacing:.04em;
}
.entry-form input:focus,
.entry-form textarea:focus{
  outline:none;
  border-color:var(--aqua);
  box-shadow:0 0 0 3px rgba(70,190,221,.18);
}
.entry-form textarea{
  resize:vertical;
  min-height:118px;
}

/* 分割入力(郵便番号・電話番号) */
.ef-split{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.ef-split .ef-sep{color:var(--ink2);font-size:15px;font-weight:500;padding:0 1px}
.ef-zip-1,.ef-zip-2{max-width:88px}
.ef-tel-seg{max-width:88px}

/* バリデーション: エラー時の入力枠を赤く */
.entry-form .ef-field.has-error input,
.entry-form .ef-field.has-error textarea{
  border-color:#E0786F;
  background:#FFF8F7;
}
/* 赤文字エラーメッセージ(未入力ボックスの下) */
.ef-error{
  display:none;
  color:#D8584C;
  font-family:var(--font-g);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.02em;
  line-height:1.6;
  margin-top:7px;
}
.ef-field.has-error .ef-error{display:block}

/* ---- 送信ボタン ---- */
.ef-submit-wrap{text-align:center;margin:24px 0 6px}
/* 設計実測: 送信ボタンは濃い水色 #46BEDD・小さめ角丸 */
.ef-submit{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--aqua);
  color:#fff;
  font-family:var(--font-r);
  font-size:15px;font-weight:500;
  letter-spacing:.3em;
  padding:9px 30px 9px 34px;
  border:none;border-radius:5px;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(70,190,221,.30);
  transition:transform .4s var(--ease-soft),background .35s,box-shadow .35s;
}
.ef-submit:hover{transform:translateY(-1px);background:var(--aqua-d);box-shadow:0 9px 22px rgba(47,167,199,.42)}
.ef-submit:active{transform:translateY(1px) scale(.99)}

/* ---- 装飾(水彩の葉・木) ---- */
.entry-deco{position:absolute;pointer-events:none;z-index:0}
/* 左・郵便番号あたりの葉 */
.entry-deco.d-leaf-l{width:50px;top:300px;left:-6px;opacity:.9}
/* 右・メッセージ本文あたりの二段の木 */
.entry-deco.d-tree-r{width:58px;top:470px;right:-12px;opacity:.9}
/* SP(〜859px)では装飾が入力欄に干渉するため非表示(従来どおり)。
   PC(≥860)では width:min(maxW, calc(50% - CH)) が余白に応じて自動縮小し、
   画面内に収めつつ入力欄に被らせない(2026-06-26 非表示→縮小に変更) */
@media (max-width:859px){
  .entry-deco{display:none}
}

/* ---- 送信完了画面 ---- */
.ef-done{
  display:none;
  max-width:640px;
  margin:0 auto;
  padding:48px 26px 40px;
  text-align:center;
}
.ef-done.is-shown{display:block}
.ef-done__sakura{width:96px;margin:0 auto 22px;opacity:.95}
.ef-done h2{
  font-family:var(--font-r);
  color:var(--aqua);
  font-size:20px;
  letter-spacing:.1em;
  font-weight:500;
  line-height:1.8;
  margin-bottom:18px;
}
.ef-done p{
  font-family:var(--font-g);
  color:var(--ink2);
  font-size:14px;
  line-height:2.1;
  letter-spacing:.04em;
}
.ef-done .btn-pill{margin-top:26px}

/* =========================================================
   PC レイアウト — 設計を1042px論理キャンバスで実測し1px一致
   実測(設計, 論理px):
     タイトル text y208-233 (cap25) / 点線 y293
     入力枠 左399 右848 幅449 / 各高32 / 行ピッチ71.5
     ラベルbadge左225 / textarea高145(y712-858)
     送信ボタン w86 h25 中央(cx519, y925-950)
   render幅1389 → 論理×1.333。下記は論理値を1.333倍した実px。
   ========================================================= */
@media (min-width:860px){
  .entry-wrap{padding:0 0 70px}

  /* タイトル: 設計 text y208-233(cap25論理→約33px実)/ x373-658 中央
     設計実測: ink率8.35%(細め) / text幅285論理=380px実。
     現状は weight500+ls.24emで ink12.3%/幅406px → 太く広い。
     weight400・ls.20emで設計の細さ・幅に一致させる。 */
  .entry-wrap .page-title{
    font-size:38px;
    font-weight:400;           /* 設計の細いストロークに合わせ Medium→Regular */
    letter-spacing:.17em;      /* 設計 text幅285論理(380px実)に一致 */
    margin:129px 0 0;          /* 設計: header下から title text top y208(=実277)まで */
    padding-left:.17em;
    line-height:1.2;
  }
  /* 点線: 設計 title text底(y233)→点線(y293)= 60論理 → 80px実 */
  .entry-wrap .dots{
    max-width:none;
    margin:64px 4.0% 0;        /* title下→点線(設計y293=実391) */
  }

  /* フォーム: 設計の列構造に左アンカー一致
     form左=badge左225論理(=21.6%)・form右=入力右848論理(=81.4%)
     → form width=623論理=59.8%・left=21.6%
     列: ラベル174論理(=27.9%) : 入力449論理(=72.1%) */
  .entry-form{
    max-width:none;
    width:59.8%;
    margin-left:21.6%;
    margin-right:auto;
    padding:84px 0 0;          /* 点線(y293)→1項目box top(y356)= 63論理 → 84px実 */
  }
  .ef-field{
    display:grid;
    grid-template-columns:27.9% 1fr;   /* ラベル列174 : 入力列449 */
    align-items:center;
    column-gap:0;
    margin-bottom:0;
  }
  /* 行ピッチ71.5論理→95px実 / box outer約43px → ギャップ=95-43=52px */
  .ef-field[data-field="name"],
  .ef-field[data-field="email"],
  .ef-field[data-field="zip"],
  .ef-field[data-field="address"],
  .ef-field[data-field="tel"]{
    align-items:center;
    margin-bottom:52px;
  }
  .ef-field[data-field="message"]{
    align-items:start;
    margin-bottom:0;
  }
  .ef-label{
    margin-bottom:0;
    padding-top:0;
    justify-content:flex-start;
    gap:9px;
  }
  .ef-field[data-field="message"] .ef-label{padding-top:10px}
  /* ラベル: 設計のink高14論理→font約15.5論理=21px実(現状16px=12論理で小)
     設計は Regular。現状 weight500 で太いので 400 に。 */
  .ef-label-txt{
    font-size:21px;
    font-weight:400;
    letter-spacing:.04em;
    white-space:nowrap;
    color:var(--ink);
  }
  /* 必須バッジ: 設計 44×24.5論理=58×33px実(現状29×16論理=39×21pxで小)
     設計のバッジ文字は細め。padding拡大+font拡大+weight400。 */
  .ef-badge{
    font-size:14.5px;
    font-weight:400;
    padding:7px 13px;
    border-radius:6px;
    letter-spacing:.07em;
  }
  /* エラーは入力列(2列目)に収める */
  .ef-field .ef-error{grid-column:2;margin-top:8px}

  /* 入力欄: 設計 高さ32論理→外形約43px(border1+padding+lh) / 幅=入力列いっぱい=449論理 */
  .entry-form input[type="text"],
  .entry-form input[type="email"],
  .entry-form input[type="tel"],
  .entry-form textarea{
    font-size:15.5px;
    padding:10px 14px;
    line-height:1.4;
    border-radius:1px;
  }
  /* textarea: 設計 高さ145論理→193px実 */
  .entry-form textarea{min-height:193px}

  /* 分割欄: 設計 各69.5論理→93px実 / box間=24論理→32px実(gap12+sep+gap12) */
  .ef-split{gap:12px}
  .ef-zip-1,.ef-zip-2{max-width:93px}
  .ef-tel-seg{max-width:93px}
  .ef-split .ef-sep{padding:0}

  /* 送信: 設計 box w86論理→115px・中央(form全幅ではなくページ中央=入力列の中で偏る前提)
     設計cx519論理(≒ページ中央521) → form内では入力列中央寄りに見える。
     form全幅(225-848)の中で中央は536論理。設計cx519は form中央より17左。
     視覚的にはform全幅中央でほぼ一致 */
  .ef-submit-wrap{
    grid-column:1 / -1;
    text-align:center;
    margin:80px 0 0;           /* textarea底(y858)→送信top(y925)= 67論理→89px実 */
  }
  .ef-submit{
    font-size:15px;
    letter-spacing:.34em;
    padding:3px 29px 3px 33px; /* 設計 box h25論理→33px実・w86論理→115px実 */
    border-radius:5px;
  }

  /* 装飾: 設計の葉(左・郵便番号〜住所付近) / 木(右・本文付近)。
     フォームは中央寄せ(830px)のため、画面が狭くなっても本文に被らないよう
     min() で列の外側にクランプ(親=entry-wrap全幅 → 50%=画面中央)。 */
  .entry-deco.d-leaf-l{width:min(96px, calc(50% - 417px));top:417px;left:max(8px, calc(50% - 505px));opacity:.95}
  .entry-deco.d-tree-r{width:min(104px, calc(50% - 459px));top:709px;right:max(8px, calc(50% - 555px));opacity:.95}

  .ef-done h2{font-size:24px}
  .ef-done p{font-size:15.5px}
}