@charset "UTF-8";

/* ==========================================================
   登録申し込みフォーム専用スタイル
   ・トークン／共通コンポーネント（c-section, c-button, p-flow 等）は
     style.css を踏襲。本ファイルはフォーム固有部分のみ。
   ========================================================== */

/* ==========================================================
   Object > Component（フォーム用の小物）
   ========================================================== */

/* 必須／任意バッジ */
.c-req,
.c-any {
  display: inline-block;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  color: #ffffff;
  padding: 2px 10px;
  border-radius: 4px;
}
.c-req { background-color: var(--color-accent); }  /* 必須＝オレンジ */
.c-any { background-color: var(--color-sub); }     /* 任意＝オリーブ */

/* フォーム各セクション見出し（プレーン・中央・濃緑） */
.p-form-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-xl);
  color: var(--color-green-dark);
  text-align: center;
  margin-bottom: var(--space-section-inner);
}

/* button要素でも c-button が使えるように補正 */
button.c-button {
  border: none;
  cursor: pointer;
  font-family: var(--font-base);
}

/* 登録フォームはセクション間の余白を控えめに */
.c-section {
  padding: var(--space-section-inner) 0;
}


/* ==========================================================
   Object > Project
   ========================================================== */

/* ----- p-form-head（ページ見出し） ----- */
.p-form-head {
  padding: var(--space-section-inner) 0;
}

.p-form-head__inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  display: flex;
  flex-direction: column;
  gap: var(--space-content);
}

@media (min-width: 768px) {
  .p-form-head__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .p-form-head__body { flex: 1; }
  .p-form-head__photo { flex-shrink: 0; }
}

.p-form-head__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: 1.4;
  color: var(--color-main);
  margin: var(--space-element) 0 12px;
}

@media (min-width: 768px) {
  .p-form-head__title { font-size: var(--fs-3xl); }
}

.p-form-head__lead {
  font-size: var(--fs-base);
  line-height: 1.8;
}

/* リード1行目を明朝体・大きめで強調 */
.p-form-head__lead-em {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
}

@media (min-width: 768px) {
  .p-form-head__lead-em { font-size: var(--fs-xl); }
}

/* 原寸ママ（クロップ・拡大なし） */
.p-form-head__photo img {
  width: auto;
  max-width: 100%;
}


/* ----- p-form（フォーム本体） ----- */
.p-form {
  margin: 0 auto;
  padding: var(--space-section-inner) var(--space-content);
  background-color: var(--color-bg-offwhite);   /* #f8f8f4 */
  border: 1px solid var(--color-sub);            /* 枠線 #879638 */
  border-radius: var(--radius-lg);
}

@media (min-width: 768px) {
  /* 左右パディングを広めに */
  .p-form {
    padding-left: var(--space-section);
    padding-right: var(--space-section);
  }
}

/* フォーム内の小見出し（お客様情報のご入力／興味を持った理由／ご質問・ご相談 共通） */
.p-form__heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--color-green-dark);
  margin-bottom: var(--space-content);
}

/* 1項目（ラベル＋入力） */
.p-form__field {
  display: grid;
  gap: 8px;
  padding: 14px 0;
}

@media (min-width: 768px) {
  .p-form__field {
    grid-template-columns: 168px 1fr;
    align-items: center;
    gap: 20px;
  }
}

/* 興味を持った理由／ご質問・ご相談：全幅・ラベルを小見出し扱いに。
   ブロックの境目として上に区切り線（合計2本のみ） */
.p-form__field--top {
  display: block;
  margin-top: var(--space-content);
  padding-top: var(--space-content);
  border-top: 1px dashed var(--color-border);
}

.p-form__field--top > .p-form__label {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  color: var(--color-green-dark);
  margin-bottom: var(--space-element);
}

.p-form__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}

/* 通常項目（グリッド）のラベルは 必須/任意 バッジを右端へ */
.p-form__field:not(.p-form__field--top) > .p-form__label {
  justify-content: space-between;
}

.p-form__label-note {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--color-main);
}

/* 入力要素共通 */
.p-form__input,
.p-form__select,
.p-form__textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-base);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--color-text);
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.p-form__input::placeholder,
.p-form__textarea::placeholder {
  color: #aaa;
}

.p-form__input:focus,
.p-form__select:focus,
.p-form__textarea:focus {
  outline: 2px solid var(--color-sub);
  outline-offset: 1px;
}

.p-form__textarea {
  min-height: 120px;
  resize: vertical;
}

/* セレクトは reset で矢印が消えるため、ドロップダウン矢印を付与 */
.p-form__select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5l4 4 4-4' fill='none' stroke='%2368428e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

/* 興味を持った理由：チェック2列 */
.p-form__checks {
  display: grid;
  gap: 12px;
}

@media (min-width: 600px) {
  .p-form__checks { grid-template-columns: repeat(2, 1fr); }
}

.p-form__check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

/* reset.css で appearance:none のため、チェックボックスを自前で描画 */
.p-form__check input[type="checkbox"] {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-color: #ffffff;
  border: 1px solid var(--color-sub);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.p-form__check input[type="checkbox"]:checked {
  background-color: var(--color-sub);
}

.p-form__check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* 「その他」の自由記入は2列ぶん使って全幅 */
.p-form__checks .p-form__input {
  grid-column: 1 / -1;
}

/* 同意チェック */
.p-form__agree {
  display: grid;
  gap: 12px;
  justify-items: start;   /* 左寄せ */
  margin: var(--space-content) 0;
}

.p-form__agree a {
  color: var(--color-main);   /* 緑（プライバシーポリシー／会員規約リンク） */
  font-weight: 700;
  text-decoration: underline;
}

/* 送信ボタン */
.p-form__submit {
  margin-top: var(--space-content);
}


/* ----- p-assure（安心してお申し込みください） ----- */
.p-assure__list {
  display: grid;
  gap: var(--space-content);
}

@media (min-width: 768px) {
  .p-assure__list { grid-template-columns: repeat(3, 1fr); }
  /* 項目間に点線の縦区切り */
  .p-assure__item + .p-assure__item {
    border-left: 2px dotted var(--color-sub);
  }
}

.p-assure__item {
  text-align: center;
}

.p-assure__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  margin-bottom: 12px;
}

.p-assure__icon img {
  width: 100%;
}

.p-assure__text {
  font-weight: 700;
  line-height: 1.6;
}


/* ----- p-flow-box（登録〜入会の流れ：枠線ボックス・中は色なし） ----- */
/* 登録フォームでは 流れ／特典／ステップ をフォームと同じ全幅に */
.p-flow-box,
.p-flow__bonus,
.p-flow__list {
  max-width: none;
}

.p-flow-box {
  margin: 0 auto var(--space-section-inner);
  padding: var(--space-section-inner) var(--space-content);
  border: 1px solid var(--color-sub);   /* 枠色 #879638 */
  border-radius: var(--radius-lg);
}

@media (min-width: 768px) {
  /* 左右の余白を広めに（フォームと揃える） */
  .p-flow-box,
  .p-flow__bonus {
    padding-left: var(--space-section);
    padding-right: var(--space-section);
  }
}

.p-flow-box__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-xl);
  color: var(--color-green-dark);
  text-align: center;
  margin-bottom: var(--space-content);
}


/* ----- p-contact（お問い合わせ） ----- */
.p-contact {
  text-align: center;
}

/* セクション下の区切り線（#879638） */
.p-contact .c-section__inner {
  padding-bottom: var(--space-section-inner);
  border-bottom: 1px solid var(--color-sub);
}

.p-contact__lead {
  margin-bottom: var(--space-element);
}

.p-contact__tel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: var(--fs-3xl);
  line-height: 1.2;
  color: var(--color-main);
}

.p-contact__tel img {
  width: 0.9em;
}

/* お問い合わせ見出しとリード文の間を詰める */
.p-contact .p-form-title {
  margin-bottom: var(--space-element);
}

.p-contact__hours {
  margin-top: 8px;
  font-size: var(--fs-base);
}


/* ==========================================================
   Layout（フォーム用フッター）
   ========================================================== */
.l-form-footer__main {
  background-color: var(--color-bg-offwhite);   /* #f8f8f4 */
}

/* リーフはデザインカンプ準拠でコンテンツ幅の左右外側に配置（帯両端ではなく内側） */
.l-form-footer__inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: var(--space-content) var(--container-padding);
  display: flex;
  flex-direction: column;
  gap: var(--space-element);
  align-items: center;
  background-image: url("../images/fv-leaf-left.png"), url("../images/form-footer-leaf-right.png");
  background-repeat: no-repeat, no-repeat;
  background-position: left bottom, right bottom;
  background-size: 92px auto, 92px auto;   /* デザインカンプ準拠の小ぶりなリーフ */
}

@media (min-width: 768px) {
  .l-form-footer__inner {
    flex-direction: row;
    justify-content: space-between;
  }
}

.l-form-footer__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--color-text);   /* 黒（フッターロゴ文字） */
}

.l-form-footer__logo img { width: 28px; }

.l-form-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 0;
}

.l-form-footer__nav li:not(:last-child) {
  padding-right: 16px;
  margin-right: 16px;
  border-right: 1px solid var(--color-sub);
}

.l-form-footer__nav a { font-size: var(--fs-base); }
.l-form-footer__nav a:hover { color: var(--color-main); }

.l-form-footer__copyright {
  background-color: var(--color-green-dark);
  color: #ffffff;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 14px var(--container-padding);
}


/* ==========================================================
   入力確認画面（confirm.html）／申込完了画面（thanks.html）
   ・ページ見出し p-form-head・フッター l-form-footer は本ファイル既存を流用
   ・確認値はバックエンド連携前提の静的サンプル（ガワ）
   ========================================================== */

/* ----- p-confirm（確認内容：フォーム枠 p-form を踏襲） ----- */
.p-confirm {
  margin: 0 auto;
  padding: var(--space-section-inner) var(--space-content);
  background-color: var(--color-bg-offwhite);   /* #f8f8f4 */
  border: 1px solid var(--color-sub);            /* 枠線 #879638 */
  border-radius: var(--radius-lg);
}

@media (min-width: 768px) {
  .p-confirm {
    padding-left: var(--space-section);
    padding-right: var(--space-section);
  }
}

.p-confirm__lead {
  margin-bottom: var(--space-content);
  font-size: var(--fs-base);
}

/* 1項目（ラベル＋確認値）：入力フォーム p-form__field と同じ並び */
.p-confirm__row {
  display: grid;
  gap: 6px;
  padding: 16px 0;
  border-bottom: 1px dashed var(--color-border);
}

.p-confirm__row:last-of-type { border-bottom: none; }

@media (min-width: 768px) {
  .p-confirm__row {
    grid-template-columns: 168px 1fr;
    align-items: baseline;
    gap: 20px;
  }
}

.p-confirm__label {
  font-weight: 700;
  color: var(--color-green-dark);
}

.p-confirm__value {
  font-size: var(--fs-base);
  line-height: 1.7;
  word-break: break-word;
}

/* 確認画面のボタン2つ（修正する／送信する） */
.p-confirm__actions {
  display: flex;
  flex-direction: column-reverse;   /* モバイルは送信を上に */
  align-items: center;
  gap: var(--space-element);
  margin-top: var(--space-content);
}

@media (min-width: 600px) {
  .p-confirm__actions {
    flex-direction: row;
    justify-content: center;
  }
}

.p-confirm__actions .c-button { max-width: 320px; }

/* 戻る（修正する）：白地に緑枠のサブボタン（▶を◀に） */
.c-button--back {
  background-color: #ffffff;
  color: var(--color-main);
  border: 2px solid var(--color-main);
  box-shadow: none;
}

.c-button--back::after { content: none; }

.c-button--back::before {
  content: "◀";
  font-size: 0.7em;
  margin-right: 10px;
  vertical-align: middle;
}


/* ----- p-thanks（申込完了メッセージ） ----- */
.p-thanks {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.p-thanks__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  margin: 0 auto var(--space-content);
  background-color: var(--color-main);
  border-radius: 50%;
}

/* CSSのみのチェックマーク */
.p-thanks__icon::after {
  content: "";
  width: 30px;
  height: 16px;
  margin-top: -6px;
  border-left: 4px solid #ffffff;
  border-bottom: 4px solid #ffffff;
  transform: rotate(-45deg);
}

.p-thanks__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-xl);
  color: var(--color-green-dark);
  margin-bottom: var(--space-content);
}

@media (min-width: 768px) {
  .p-thanks__title { font-size: var(--fs-2xl); }
}

.p-thanks__text {
  font-size: var(--fs-base);
  line-height: 1.9;
  margin-bottom: var(--space-section-inner);
}

.p-thanks__actions {
  display: flex;
  justify-content: center;
}

.p-thanks__actions .c-button { max-width: 360px; }


/* ==========================================================
   トップページ（LP）へ戻るリンク
   ・style.css は別担当が編集中のため変更せず、本ファイルに定義
   ========================================================== */
.p-back-lp {
  max-width: var(--container-width);
  margin: -56px auto 0;   /* 見出しブロック直下へ寄せる（上の余白を詰める） */
  padding: 0 var(--container-padding);
}

.p-back-lp__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--color-main);
  text-decoration: none;
}

.p-back-lp__link::before {
  content: "\25C0";   /* ◀ */
  font-size: 0.8em;
}

.p-back-lp__link:hover {
  text-decoration: underline;
}


/* ==========================================================
   スマホ表示の個別調整
   ・style.css は別担当が編集中のため変更せず、フォーム側の本ファイルに集約
   ・768px未満（スマホ／小型タブレット）に適用
   ========================================================== */
@media (max-width: 767px) {

  /* ① 「興味を持った理由」：【複数選択可】は別行（2段）のまま、
        見出しテキスト「このプログラムに興味を持った理由」を1行に収める（折り返し禁止） */
  .p-form__label:has(.p-form__label-note) {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    white-space: nowrap;   /* 見出しテキストを1行に */
  }

  /* ② フォーム用フッターのナビ（運営者情報／プライバシーポリシー／特商法表記）を横一列に
        ＝ 既定の横並びのまま1行で収める（折り返し禁止） */
  .l-form-footer__nav {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
  }

  /* ③ ページ見出し「無料登録申し込みフォーム」を1行で表示（折り返さない） */
  .p-form-head__title {
    white-space: nowrap;
  }

}