@charset "UTF-8";
/* extension_form.css — 公開講座フォーム専用スタイル */

/* =============================================================================
   変数
   ============================================================================= */
:root {
  --form-key:        #004098;
  --form-border:     #c8c8c8;
  --form-bg:         #f7f8fa;
  --form-bg-section: #f0f3f7;
  --form-error:      #d9000d;
  --form-text:       #1a1a1a;
  --form-label-w:    22rem;
  --form-radius:     4px;
}

/* =============================================================================
   ステップナビゲーション
   ============================================================================= */
.p-stepList {
  display: flex;
  list-style: none;
  gap: 0;
  margin: 2.4rem 0;
  counter-reset: step;
}

.p-stepList_item {
  flex: 1;
  position: relative;
  padding: 1rem 0.5rem 1rem 3.5rem;
  font-size: 1.4rem;
  font-weight: bold;
  color: #888;
  background: #e8edf3;
  clip-path: polygon(0 0, calc(100% - 1.2rem) 0, 100% 50%, calc(100% - 1.2rem) 100%, 0 100%, 1.2rem 50%);
}
.p-stepList_item:first-child {
  padding-left: 1.5rem;
  clip-path: polygon(0 0, calc(100% - 1.2rem) 0, 100% 50%, calc(100% - 1.2rem) 100%, 0 100%);
}
.p-stepList_item::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 1.8rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #bbb;
  color: #fff;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-stepList_item:first-child::before {
  left: 0.8rem;
}
.p-stepList_item.is-current {
  color: #fff;
  background: var(--form-key);
}
.p-stepList_item.is-current::before {
  background: #fff;
  color: var(--form-key);
}

/* =============================================================================
   フォーム全体ラッパー
   ============================================================================= */
.p-form {
  width: 100%;
}

/* セクション見出し h4 */
.p-form + h4,
.p-form h4 {
  margin-top: 3.2rem;
  margin-bottom: 0;
  font-size: 1.6rem;
  font-weight: bold;
}
.p-form h4 > span {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  background: var(--form-key);
  color: #fff;
  border-radius: var(--form-radius);
}

/* =============================================================================
   フォームリスト（行コンテナ）
   ============================================================================= */
.p-form_list {
  border: 1px solid var(--form-border);
  border-radius: var(--form-radius);
  overflow: hidden;
  margin-top: 1.6rem;
}

/* =============================================================================
   フォームアイテム（1行）
   ============================================================================= */
.p-form_item {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--form-border);
}
.p-form_item:last-child {
  border-bottom: none;
}
.p-form_item.is-bt {
  border-top: 1px solid var(--form-border);
}

@media (max-width: 990px) {
  .p-form_item {
    flex-direction: column;
  }
}

/* =============================================================================
   質問（ラベル）列
   ============================================================================= */
.p-form_question {
  flex-shrink: 0;
  width: var(--form-label-w);
  padding: 1.4rem 1.6rem;
  background: var(--form-bg-section);
  font-size: 1.4rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

@media (max-width: 990px) {
  .p-form_question {
    width: 100%;
    padding: 1rem 1.2rem;
  }
}

/* 必須ラベル */
.p-form_required::after {
  content: "必須";
  display: inline-block;
  margin-left: 0.6rem;
  padding: 0.1rem 0.5rem;
  border-radius: 3px;
  background: var(--form-error);
  color: #fff;
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 1.6;
  vertical-align: middle;
}

/* =============================================================================
   回答（入力）列
   ============================================================================= */
.p-form_answer {
  flex: 1;
  padding: 1.2rem 1.6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.8rem;
  font-size: 1.4rem;
}

@media (max-width: 990px) {
  .p-form_answer {
    padding: 1rem 1.2rem;
  }
}

/* =============================================================================
   入力フィールド共通
   ============================================================================= */
.p-form_input {
  width: 100%;
  max-width: 48rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--form-border) !important;
  border-radius: var(--form-radius);
  font-size: 1.4rem;
  line-height: 1.4;
  background: #fff;
  transition: border-color 0.2s;
}
.p-form_input:focus {
  border-color: var(--form-key) !important;
  outline: none;
}
.p-form_input.is-error {
  border-color: var(--form-error) !important;
  background: #fff5f5;
}

textarea.p-form_input {
  resize: vertical;
  line-height: 1.6;
}

/* 小さいテキスト入力（泳力の距離入力等） */
.p-form_input-s {
  width: 8rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--form-border) !important;
  border-radius: var(--form-radius);
  font-size: 1.4rem;
  background: #fff;
}
.p-form_input-s.is-error {
  border-color: var(--form-error) !important;
}

/* 生年月日用テキスト入力 */
.p-form_input-birth {
  width: 9rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--form-border) !important;
  border-radius: var(--form-radius);
  font-size: 1.4rem;
  background: #fff;
}
.p-form_input-birth.is-error {
  border-color: var(--form-error) !important;
}

/* =============================================================================
   セレクトボックス
   ============================================================================= */
.p-form_select,
.p-form_select-birth {
  padding: 0.8rem 3rem 0.8rem 1rem;
  border: 1px solid var(--form-border);
  border-radius: var(--form-radius);
  font-size: 1.4rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23004098' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 1rem center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}
.p-form_select.is-error,
.p-form_select-birth.is-error {
  border-color: var(--form-error);
}
.p-form_select-birth {
  width: 8rem;
}

/* =============================================================================
   複数入力リスト（ナンバー・住所等の横並び）
   ============================================================================= */
.p-form_inputList {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.8rem 1.2rem;
}

.p-form_inputListItem {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* =============================================================================
   補助ラベル（2段目のラベル）
   ============================================================================= */
.p-form_secondLabel {
  font-size: 1.3rem;
  color: #555;
  font-weight: normal;
}

/* =============================================================================
   入力形式テキスト（例：半角入力）
   ============================================================================= */
.p-form_type {
  font-size: 1.2rem;
  color: #888;
  margin-top: 0.2rem;
}

/* =============================================================================
   エラーメッセージ
   ============================================================================= */
.p-form_errorMsg {
  color: var(--form-error);
  font-size: 1.3rem;
  font-weight: bold;
  margin-top: 0.4rem;
}

/* =============================================================================
   生年月日エリア
   ============================================================================= */
.p-form_birthArea {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.8rem;
}

.p-form_birthItem-y,
.p-form_birthItem-md {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.p-form_birthText {
  font-size: 1.4rem;
}

/* =============================================================================
   ラジオボタン
   ============================================================================= */
.p-form_radio {
  width: 1.8rem;
  height: 1.8rem;
  accent-color: var(--form-key);
  cursor: pointer;
  flex-shrink: 0;
}
.p-form_radio.is-error {
  outline: 1px solid var(--form-error);
  border-radius: 50%;
}

.p-form_radioLabel {
  font-size: 1.4rem;
  cursor: pointer;
}

/* ラジオボタンを縦並びにするグループコンテナ */
.p-form_radioGroup {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

/* ラジオ1項目（ラジオ + ラベル + 任意の追加入力を横並び） */
.p-form_radioItem {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* =============================================================================
   ボタンエリア
   ============================================================================= */
.p-form_btnArea {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.6rem;
  margin-top: 3.2rem;
}

/* =============================================================================
   送信ボタン（p-btn）
   ============================================================================= */
.p-btn {
  display: inline-flex;
  position: relative;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: 1px solid var(--form-key);
  background: #fff;
  padding: 1.2rem 3.2rem;
  min-width: 20rem;
  overflow: hidden;
  color: var(--form-key);
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  filter: drop-shadow(0px 0px 6px rgba(26, 26, 26, 0.15));
  transition: background 0.3s, color 0.3s;
  border-radius: var(--form-radius);
}
.p-btn:hover {
  background: var(--form-key);
  color: #fff;
}
.p-btn_text {
  position: relative;
  z-index: 1;
}

/* button タグ用リセット */
button.p-btn {
  -webkit-appearance: none;
  font-family: inherit;
}

/* =============================================================================
   ボタンリスト（確認画面の申込する + 戻る）
   ============================================================================= */
.p-btnList {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.6rem;
  margin-top: 3.2rem;
}

.p-btnList_item {
  /* btn-p / p-btn-back のラッパー */
}

/* 戻るボタン */
.p-btn-back {
  display: inline-flex;
  position: relative;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: 1px solid #888;
  background: #fff;
  padding: 1.2rem 3.2rem;
  min-width: 16rem;
  overflow: hidden;
  color: #555;
  font-size: 1.5rem;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  border-radius: var(--form-radius);
  transition: background 0.3s, color 0.3s;
}
.p-btn-back:hover {
  background: #555;
  color: #fff;
}
.p-btn-back_text {
  position: relative;
  z-index: 1;
}

/* =============================================================================
   情報ブロック01（リスト形式の案内）
   ============================================================================= */
.p-block01 {
  border: 1px solid var(--form-key);
  border-radius: var(--form-radius);
  padding: 1.6rem;
  margin-top: 1.6rem;
  background: var(--form-bg);
}
.p-block01_title {
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--form-key);
  margin-bottom: 0.8rem;
}
.p-block01_list {
  padding-left: 1.6rem;
  font-size: 1.4rem;
  line-height: 1.8;
}
.p-block01_list.disc {
  list-style: disc;
}
.p-block01_list li {
  list-style: disc;
}

/* =============================================================================
   情報ブロック02（選択講座一覧）
   ============================================================================= */
.p-block02 {
  border: 1px solid var(--form-border);
  border-radius: var(--form-radius);
  padding: 1.2rem 1.6rem;
  margin-top: 1.2rem;
  background: var(--form-bg);
}
.p-block02_list {
  font-size: 1.4rem;
  line-height: 1.8;
  padding-left: 1.6rem;
}
.p-block02_list.disc li {
  list-style: disc;
}

/* =============================================================================
   インデントテキスト（注意書き）
   ============================================================================= */
.p-indent-01 {
  padding-left: 1em;
  text-indent: -1em;
  font-size: 1.3rem;
  color: #555;
  line-height: 1.7;
  margin-top: 0.8rem;
}
.p-indent-01.m_top0 {
  margin-top: 0;
}

/* =============================================================================
   カラーユーティリティ
   ============================================================================= */
.ColorR {
  color: var(--form-error);
}

/* =============================================================================
   マージンユーティリティ
   ============================================================================= */
.m_top0  { margin-top: 0 !important; }
.m_top20 { margin-top: 2rem !important; }
.m_top30 { margin-top: 3rem !important; }

/* =============================================================================
   select.tpl 用：講座選択テーブル
   ============================================================================= */
.p-extension-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.4rem;
  margin-top: 1.6rem;
}
.p-extension-table th,
.p-extension-table td {
  padding: 1rem 1.4rem;
  border: 1px solid var(--form-border);
  text-align: left;
  vertical-align: middle;
}
.p-extension-table th {
  background: var(--form-bg-section);
  font-weight: bold;
  white-space: nowrap;
}
.p-extension-table td.center {
  text-align: center;
}

/* 削除ボタン */
.p-btn-delete {
  display: inline-block;
  padding: 0.4rem 1.2rem;
  border: 1px solid var(--form-error);
  border-radius: var(--form-radius);
  color: var(--form-error);
  font-size: 1.3rem;
  background: #fff;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  -webkit-appearance: none;
}
.p-btn-delete:hover {
  background: var(--form-error);
  color: #fff;
}