@charset "UTF-8";
/* =====================================================================
   Phase 2D 追加 — PC目視フィードバック3点
   1. 「必要なのは現場経験」PCレイアウト
   2. 開閉時の画面ジャンプ（JS側: phase2c.js のアンカー補正と対）
   3. 応募フォームのUI
   phase2d.css の後に読み込む。
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. 必要なのは現場経験：中央コンテナ内に 左テキスト｜右写真 を並べる
   --------------------------------------------------------------------- */
.p2d-s4-photo{ display:none; }

@media (min-width:768px){
  .section-4{
    background-image:none !important;   /* 背景ではなく実要素で配置する */
    background-color:#fff !important;
    min-height:0 !important;
    padding-top:48px !important;
    padding-bottom:48px !important;
  }
  .section-4 .container.p2d-s4{
    max-width:1140px !important;
    margin-inline:auto !important;
    padding-left:24px;
    padding-right:24px;
  }
  .section-4 .p2d-s4 .row{
    display:flex !important;
    flex-wrap:nowrap;
    align-items:center;
    justify-content:center;
    gap:48px;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  .section-4 .p2d-s4-text{
    flex:1 1 48% !important;
    max-width:520px !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
    background:none !important;         /* 写真に重ならないのでパネルは不要 */
    box-shadow:none !important;
  }
  .section-4 .p2d-s4-text h2{
    margin-bottom:12px !important;
    text-align:left !important;
  }
  .section-4 .p2d-s4-text p{
    text-align:left !important;
    color:#1b2430 !important;
  }
  .p2d-s4-photo{
    display:block !important;
    flex:0 0 46%;
    max-width:520px;
    aspect-ratio:640 / 427;
    margin:0 !important;
    background-image:url(../img/section4-bg@2x.jpg);
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    border-radius:14px;
    box-shadow:0 10px 30px rgba(0,0,0,.18);
  }
  /* aspect-ratio 未対応環境では高さが0になり写真が消えるため、擬似要素で高さを確保する。
     427/640 = 66.71875%。対応環境では @supports not が偽になり適用されない。 */
  @supports not (aspect-ratio: 1 / 1){
    .p2d-s4-photo::before{
      content:"";
      display:block;
      padding-top:66.71875%;
    }
  }
}
@media (min-width:768px) and (max-width:1023.98px){
  .section-4 .p2d-s4 .row{ gap:24px; }
  .section-4 .p2d-s4-text{ flex:1 1 50% !important; }
  .p2d-s4-photo{ flex:0 0 46%; }
}

/* ---------------------------------------------------------------------
   2. 開閉時の画面ジャンプ対策（CSS側）
      ブラウザの自動スクロールアンカリングとJSの補正が競合しないようにする
   --------------------------------------------------------------------- */
html{ scroll-behavior:auto; }
.p2c-more-body{ overflow-anchor:none; }
.p2c-disclosure,
.p2b-letter,
.qalist{ overflow-anchor:none; }

/* ---------------------------------------------------------------------
   3. 応募フォーム：ラベル＋必須/任意 → 入力欄 の縦1カラムに統一
   （name / id / required / action は一切変更していない）
   --------------------------------------------------------------------- */
#form .wrap_block{ width:100%; }
#form #formWrap{
  width:100% !important;
  max-width:640px !important;
  margin:0 auto !important;
  font-size:16px !important;
  color:#1b2430;
}
#form table.formTable{
  display:block !important;
  width:100% !important;
  margin:0 auto 8px !important;
  font-size:16px !important;
  border-collapse:collapse;
}
#form table.formTable tbody{ display:block !important; width:100%; }
#form table.formTable tr{
  display:block !important;
  width:100%;
  margin-bottom:16px;
}
#form table.formTable tr:last-child{ margin-bottom:4px; }

/* ラベル行：項目名のすぐ横に必須/任意バッジ */
#form table.formTable th{
  display:flex !important;
  align-items:center;
  gap:8px;
  width:100% !important;
  padding:0 0 8px !important;
  background:none !important;
  border:0 !important;
  font-size:15px !important;
  font-weight:700 !important;
  line-height:1.5 !important;
  color:#1b2430 !important;
  text-align:left !important;
}
#form table.formTable td{
  display:block !important;
  width:100% !important;
  padding:0 !important;
  background:none !important;
  border:0 !important;
}

/* 必須／任意バッジは小型に。入力欄より目立たせない */
#form .spantxt,
#form .spantxt2{
  float:none !important;
  display:inline-flex !important;
  align-items:center;
  flex:0 0 auto;
  margin:0 !important;
  padding:4px 8px !important;
  border-radius:999px !important;
  font-size:11px !important;
  font-weight:800 !important;
  line-height:1.5 !important;
  letter-spacing:.04em;
  white-space:nowrap;
}
#form .spantxt{ background:#8e1b1b !important; color:#fff !important; }
#form .spantxt2{ background:#5b6673 !important; color:#fff !important; }

/* 入力欄：高さ・余白・枠・角丸・文字サイズを統一 */
#form table.formTable input[type="text"],
#form table.formTable input[type="tel"],
#form table.formTable input[type="email"],
#form table.formTable textarea{
  display:block;
  width:100% !important;
  box-sizing:border-box;
  min-height:52px;
  margin:0 !important;
  padding:12px 16px !important;
  background:#fff !important;
  border:1.5px solid #dde3ea !important;
  border-radius:10px !important;
  font-family:inherit;
  font-size:16px !important;   /* iOSの自動ズーム防止 */
  line-height:1.6 !important;
  color:#1b2430 !important;
  box-shadow:none;
  transition:border-color var(--p2c-dur-fast,160ms) var(--p2c-ease,ease),
             box-shadow var(--p2c-dur-fast,160ms) var(--p2c-ease,ease);
  -webkit-appearance:none;
  appearance:none;
}
#form table.formTable textarea{
  min-height:140px;
  resize:vertical;
}
#form table.formTable input::placeholder,
#form table.formTable textarea::placeholder{
  color:#5b6673;
  opacity:1;
}
#form table.formTable input:hover,
#form table.formTable textarea:hover{ border-color:#5b6673 !important; }
#form table.formTable input:focus,
#form table.formTable textarea:focus{
  outline:none;
  border-color:#ff7a1a !important;
  box-shadow:0 0 0 3px rgba(255,122,26,.22);
}
#form table.formTable input:focus-visible,
#form table.formTable textarea:focus-visible{
  outline:3px solid #fff;
  outline-offset:2px;
}

/* 入力完了からCTAへ自然につなげる */
#form .btn-box{
  width:100% !important;
  max-width:640px !important;
  margin:4px auto 0 !important;
  padding:0 !important;
}
#form .submitbtn{
  margin-top:8px !important;
  max-width:480px !important;
}
#form .p2c-note{ margin-top:24px !important; }

@media (max-width:767.98px){
  #form #formWrap{ max-width:none !important; }
  #form table.formTable th{ font-size:14px !important; }
  #form table.formTable tr{ margin-bottom:16px; }
}

@media (prefers-reduced-motion:reduce){
  #form table.formTable input,
  #form table.formTable textarea{ transition:none !important; }
}