/* =========================================================
   p-apply.css — お申し込み(ご寄附フォーム) ページ固有
   設計(InDesign apply_design.png)実測に精密一致
   - 入力枠 = 白地 + 1px 黒罫(設計実測 #000000)
   - 必須バッジ = #46BEDD / 任意バッジ = #B2D0D1
   - 振込口座カード = クリーム地 + 水色罫
   ========================================================= */

/* ---- ページ上見出し ---- */
.apply-wrap{padding:30px 18px 40px}
.apply-title{
  text-align:center;font-family:var(--font-r);color:var(--aqua);
  font-size:27px;letter-spacing:.22em;font-weight:500;margin:6px 0 16px;
}
.apply-note{
  text-align:center;font-family:var(--font-r);color:var(--ink2);
  font-size:13px;line-height:1.9;letter-spacing:.04em;margin-bottom:8px;
}
.apply-note .em-aqua{color:var(--aqua)}
.apply-note .em-strong{color:var(--ink);font-weight:700}
.apply-hr{
  height:3px;border:none;
  background:radial-gradient(circle closest-side, var(--aqua-line) 96%, transparent) center/11px 3px repeat-x;
  margin:18px 6px 26px;
}

/* ---- フォーム共通 ---- */
.apply-form{position:relative;z-index:2;max-width:560px;margin:0 auto}
.apply-row{margin-bottom:22px}
.apply-row__head{display:flex;align-items:center;gap:10px;margin-bottom:9px}

/* 必須 / 任意 バッジ(設計実測色) */
.badge{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-r);font-size:11px;font-weight:500;letter-spacing:.06em;
  color:#fff;border-radius:5px;padding:4px 8px;line-height:1;white-space:nowrap;
}
.badge--req{background:var(--aqua)}
.badge--opt{background:#B2D0D1}

.apply-row__label{
  font-family:var(--font-g);color:var(--ink);font-size:14.5px;
  font-weight:500;letter-spacing:.04em;line-height:1.4;
}

/* 入力欄: 白地 + 1px 黒罫(設計実測) */
.f-input,.f-textarea{
  width:100%;font-family:var(--font-g);font-size:14px;color:var(--ink);
  background:#fff;border:1px solid #000;border-radius:0;
  padding:9px 11px;line-height:1.5;letter-spacing:.02em;
  transition:border-color .25s,box-shadow .25s;
}
.f-input::placeholder,.f-textarea::placeholder{color:#9A9A9A;letter-spacing:.02em}
.f-input:focus,.f-textarea:focus,.f-select:focus{
  outline:none;border-color:var(--aqua);box-shadow:0 0 0 3px rgba(70,190,221,.16);
}
.f-textarea{min-height:150px;resize:vertical}

/* セレクト(プルダウン) */
.f-select-wrap{position:relative;width:100%}
.f-select{
  width:100%;font-family:var(--font-g);font-size:14px;color:var(--ink);
  background:#fff;border:1px solid #000;border-radius:0;
  padding:9px 34px 9px 11px;line-height:1.5;cursor:pointer;
  -webkit-appearance:none;appearance:none;transition:border-color .25s,box-shadow .25s;
}
/* 設計のセレクトは矢印なしのプレーンな枠 → CSS シェブロン非表示 */
.f-select-wrap::after{content:none}
.f-select{padding-right:13px}

/* お申し込み行: セレクト + 右の備考メモ */
.apply-select-row{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.apply-select-row .f-select-wrap{flex:1;min-width:230px}
.apply-memo{
  font-family:var(--font-g);font-size:11.5px;color:var(--ink2);line-height:2.05;
  letter-spacing:.04em;padding-top:2px;
}
.apply-memo .memo-ttl{color:var(--ink2)}
.apply-memo ul{list-style:none;margin:2px 0 0}
.apply-memo li{display:flex;align-items:center;gap:6px}
.apply-memo li::before{
  content:"";width:9px;height:9px;border-radius:50%;
  border:1.5px solid #B7B7B7;flex-shrink:0;
}

/* 区切り(郵便/電話のハイフン) */
.f-segment{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.f-segment .f-input{flex:0 0 auto;text-align:center}
.f-zip{width:84px}
.f-tel{width:78px}
.f-seg-dash{color:var(--ink);font-weight:500}
.f-segment .f-hint{font-size:11.5px;color:var(--ink);letter-spacing:.04em;margin-left:4px}

/* 住所行: 入力 + 右の注記 */
.f-addr-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.f-addr-row .f-input{flex:1;min-width:0}
.f-addr-row .f-hint{font-size:11.5px;color:var(--ink);letter-spacing:.04em;white-space:nowrap}

/* ラジオ群(領収書 / 可・不可) ── 設計: 細いグレー丸 */
.f-radios{display:flex;gap:34px;flex-wrap:wrap;padding-top:4px}
.f-radio{display:inline-flex;align-items:center;gap:13px;cursor:pointer;font-size:14px;color:var(--ink);font-family:var(--font-g)}
.f-radio input{position:absolute;opacity:0;width:0;height:0}
.f-radio .dot{
  width:24px;height:24px;border-radius:50%;border:1px solid #9A9A9A;
  background:#fff;flex-shrink:0;position:relative;transition:border-color .2s;
}
.f-radio input:checked+.dot{border-color:var(--aqua)}
.f-radio input:checked+.dot::after{
  content:"";position:absolute;inset:4px;border-radius:50%;background:var(--aqua);
}
.f-radio input:focus-visible+.dot{box-shadow:0 0 0 3px rgba(70,190,221,.18)}

/* エラーメッセージ(赤文字) */
.f-error{
  display:none;color:#E0606B;font-size:12px;font-family:var(--font-g);
  letter-spacing:.02em;margin-top:6px;line-height:1.6;
}
.apply-row.has-error .f-error{display:block}
.apply-row.has-error .f-input,
.apply-row.has-error .f-textarea,
.apply-row.has-error .f-select{border-color:#E0606B;background:#FFF7F7}

/* 送信ボタン(設計: 水色 #46BEDD 白文字 小ぶり) */
.apply-submit{text-align:center;margin:30px 0 6px}
.btn-send{
  font-family:var(--font-r);font-weight:500;font-size:14px;letter-spacing:.3em;
  color:#fff;background:var(--aqua);border:none;cursor:pointer;
  padding:8px 26px;border-radius:6px;
  box-shadow:0 4px 12px rgba(70,190,221,.32);
  transition:transform .4s var(--ease-soft),background .4s,box-shadow .4s;
}
.btn-send:hover{transform:scale(1.03);background:var(--aqua-d);box-shadow:0 8px 20px rgba(47,167,199,.4)}
.btn-send:active{transform:translateY(1px) scale(.99)}

/* ---- 振込口座セクション ---- */
.bank-sec{padding:8px 18px 36px;text-align:center;position:relative;z-index:2}
.bank-lead{
  font-family:var(--font-r);font-size:14px;color:var(--ink);line-height:1.9;
  letter-spacing:.04em;margin-bottom:24px;
}
.bank-lead .em-aqua{color:var(--aqua)}
.bank-grid{display:flex;flex-direction:column;gap:18px;max-width:760px;margin:0 auto}
.bank-card{
  border:1px solid var(--aqua-line);border-radius:14px;
  background:var(--cream);padding:20px 22px;text-align:left;
}
.bank-card dl{display:grid;grid-template-columns:auto 1fr;gap:4px 8px;font-size:12.5px;line-height:1.95}
.bank-card dt{font-family:var(--font-g);color:var(--ink);white-space:nowrap;letter-spacing:.02em}
.bank-card dd{color:var(--ink);letter-spacing:.04em}
.bank-card dd.sub{grid-column:2}

/* ---- 装飾(葉・木) ---- */
.apply-deco{position:absolute;pointer-events:none;z-index:0;opacity:.95}
.apply-deco.d-leaf{width:64px;left:8px;top:300px;animation:floaty 6.5s ease-in-out infinite}
.apply-deco.d-tree{width:96px;right:6px;top:330px;animation:floaty 7s ease-in-out .5s infinite}
.apply-main{position:relative;overflow:hidden}
/* SP(〜859px)では装飾が入力欄に干渉するため非表示(従来どおり)。
   PC(≥860)では width:min(maxW, calc(50% - 439px)) が余白に応じて自動縮小し、
   画面内に収めつつ入力欄に被らせない(2026-06-26 非表示→縮小に変更) */
@media (max-width:859px){
  .apply-deco{display:none}
}

/* ---- 完了画面 ---- */
.apply-done{display:none;text-align:center;max-width:680px;margin:0 auto;padding:24px 18px 10px}
.apply-form.is-sent{display:none}
.apply-done.is-show{display:block}
.apply-done .done-sakura{width:96px;margin:0 auto 18px;opacity:.95}
.apply-done h2{
  font-family:var(--font-r);color:var(--aqua);font-size:21px;letter-spacing:.1em;
  font-weight:500;line-height:1.7;margin-bottom:18px;
}
.apply-done p{
  font-family:var(--font-g);font-size:14px;color:var(--ink2);line-height:2.1;
  letter-spacing:.03em;margin-bottom:24px;
}
.apply-done .btn-pill{margin:0 auto}

/* =========================================================
   PC (min-width:860px) — 設計(apply_design.png 2084px ÷1.5)実測一致
   render 1389px / design 2084px / scale ÷1.5
   ========================================================= */
@media (min-width:860px){
  /* 設計(apply_design.png 2084px ÷1.5 = 1389render)実測一致
     title中心≈293 / note≈350 / 点線hr≈411 / 行1枠上=497 / 行ピッチ=95px
     badge x=244-303(w59 h33) / 入力枠 L=475 W=600 */
  .apply-wrap{padding:128px 40px 30px}
  .apply-title{font-size:39px;letter-spacing:.28em;font-weight:500;margin:0 0 16px}
  .apply-note{font-size:16px;letter-spacing:.05em}
  .apply-hr{max-width:1190px;margin:34px auto 58px}

  .apply-main{max-width:1389px;margin:0 auto}

  /* 設計はセンタリングでなく左寄せ(左余白244 / 右余白149)
     行ピッチ95px = 枠42 + 行間53。padding-left 204 + wrap 40 = 244(badge左) */
  .apply-form{max-width:none;width:100%;margin:0;padding-left:0}
  .apply-row{
    display:grid;grid-template-columns:231px 600px;gap:0;
    align-items:start;margin-bottom:52px;
    justify-content:start;padding-left:204px;
  }
  .apply-row__head{margin-bottom:0;padding-top:5px;justify-content:flex-start;gap:13px}
  /* バッジ: 設計実測 w59×h33 / 文字やや大きめ */
  .badge{font-size:12.5px;letter-spacing:.1em;padding:5px 12px;border-radius:6px}

  /* 設計: HP掲載のあと大きな空き → メッセージ本文(行全体が右へ+56px)
     設計 HP badge=1172 / message badge=1564 → 間隔392(行ピッチ95込) */
  .apply-row[data-required="message"]{
    margin-top:344px;padding-left:260px;grid-template-columns:231px 600px;
  }
  .apply-row__label{font-size:16px;letter-spacing:.05em;line-height:1.5}
  .apply-row__body{min-width:0;width:600px;overflow:visible}

  /* 入力枠: 設計実測 高さ約42px / 黒1px罫 */
  .f-input,.f-textarea,.f-select{font-size:15px;padding:10px 13px;line-height:1.45}
  .f-textarea{min-height:172px} /* 枠全高≈194px(設計実測) */

  /* お申し込み行: セレクト幅は600px、備考メモは右外へ(※備考/以下プルダウン/○寄付/○寄贈)
     メモは absolute で下方へオーバーフロー → 次行ピッチ(95px)を崩さない */
  .apply-row[data-required="select"] .apply-row__body{overflow:visible;position:relative}
  .apply-select-row{gap:0;flex-wrap:nowrap;align-items:flex-start;position:static}
  .apply-select-row .f-select-wrap{flex:0 0 600px;min-width:0;width:600px}
  .apply-memo{
    position:absolute;top:2px;left:624px;width:200px;font-size:13px;
    line-height:2.05;white-space:nowrap;color:var(--ink);
  }

  /* 郵便番号/電話番号: 設計実測 box=94px / dash間≈30px / 注記は枠の右へ(改行させない) */
  .apply-row[data-required="tel-optional"] .apply-row__body{overflow:visible}
  .f-zip{width:94px}
  .f-tel{width:94px}
  .f-segment{gap:13px;flex-wrap:nowrap}
  .f-segment .f-hint{margin-left:10px;font-size:13.5px;white-space:nowrap}

  /* 住所: フル幅枠 + 右にはみ出す注記 */
  .apply-row__body .f-hint{margin-left:0}
  .f-addr-row{flex-wrap:nowrap;overflow:visible}
  .f-addr-row .f-input{flex:0 0 600px;width:600px}
  .f-addr-row .f-hint{font-size:13.5px}

  /* 領収書 / HP掲載 ラジオ: 設計 円Φ30・間隔広め(行高は入力枠と揃える) */
  .f-radios{gap:78px;padding-top:2px;min-height:42px;align-items:center}
  .f-radio{font-size:16px;gap:15px}
  .f-radio .dot{width:30px;height:30px}
  .f-radio input:checked+.dot::after{inset:6px}

  /* 送信ボタン: 設計 textarea下端(1754)→ボタン上(1844)=90px下 */
  .apply-submit{margin:90px 0 6px}
  .btn-send{font-size:15px;padding:9px 30px;letter-spacing:.3em}

  /* フォーム塊をお問い合わせと同じく中央寄せ(左右に均等な余白を作り装飾を置く) */
  .apply-main .ct-form{max-width:834px;margin:0 auto}

  /* 装飾位置(設計: 左の葉=領収書〜郵便番号付近 top≈1130 / 右の木=電話〜お礼の掲載 top≈1500)
     画面が狭くなっても本文に被らないよう min() でコンテンツ列(中央834px)の外側にクランプ。
     containing block は .apply-main(中央寄せ max1389) のため 50% = 画面中央。 */
  .apply-deco.d-leaf{width:min(104px, calc(50% - 439px));left:max(8px, calc(50% - 535px));top:1130px}
  .apply-deco.d-tree{width:min(108px, calc(50% - 439px));right:max(8px, calc(50% - 539px));top:1490px}

  /* 振込口座: 2カラム横並び(設計 各552px / gap 38px / クリーム地+水色罫) */
  .bank-sec{padding:2px 40px 80px;margin-top:-30px}
  .bank-lead{font-size:17px;margin-bottom:36px}
  .bank-grid{flex-direction:row;justify-content:center;gap:38px;max-width:1145px}
  .bank-card{flex:0 0 552px;max-width:552px;padding:26px 34px;border-radius:14px}
  .bank-card dl{font-size:14px;gap:7px 12px;line-height:2.1}

  .apply-done{padding:40px 20px 30px}
  .apply-done h2{font-size:25px}
  .apply-done p{font-size:16px}
}