/* ============================================================
   フォトン算数オンライン｜入塾申し込みフォーム
   3. フォーム（カード／入力行／入力部品／ラジオ／ツールチップ）

   STEP1・2・3・5 が使う。入力モード（ラベル上・入力下）と
   確認モード（ラベル左・値右）の2つを 8〜10章で切り替える。

   【読み込み順】c-base → c-shell → c-error → c-form → c-blocks
                → c-layout-full → c-motion →（ページ固有）
   順番を入れ替えると打ち消し関係が崩れる。
   ============================================================ */

/* ============================================================
   8. カード ＋ セクション見出し
   ============================================================ */
.l-form {
  margin: 0;
}

.l-form__container {
  margin-bottom: 18px;
  padding: 6px 22px 22px;
  background: var(--card);
  border-top: 5px solid var(--green);
  border-radius: 24px;
  box-shadow: 0 6px 20px rgba(120, 140, 120, 0.08);
}

.l-form__container--parent {
  border-top-color: var(--blue);
}
.l-form__container--survey {
  border-top-color: var(--alert);
}

/* カード内のセクション見出し。STEP2 の c-question__header も同じ見た目を共有する */
.sec-h,
.c-question__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 0 8px;
}

.sec-h .ic,
.c-question__header::before {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
}

.sec-h .ic svg {
  display: block;
  width: 24px;
  height: 24px;
}
.sec-h .ic1 {
  background: #d6f0df;
  color: #2a9650;
}
.sec-h .ic2 {
  background: var(--blue-tint);
  color: #3f7fd0;
}
.sec-h .ic3 {
  background: var(--alert-tint);
  color: var(--alert);
}

.sec-h h2,
.c-question__header {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.55;
  color: #1f9550;
}

.sec-h .cap {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
}

.l-form__container--parent .sec-h h2 {
  color: var(--blue-deep);
}
.l-form__container--survey .sec-h h2 {
  color: var(--alert-deep);
}

/* STEP2 の質問見出し（アンケート＝オレンジ） */
.c-question__header {
  color: var(--alert-deep);
}

.c-question__header::before {
  content: '';
  background-color: var(--alert-tint);
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e8821e' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.1 9a3 3 0 1 1 5.8 1c0 2-3 2.2-3 4'/%3E%3Cline x1='12' y1='18' x2='12' y2='18'/%3E%3C/svg%3E");
}

/* ============================================================
   9. フォーム行（入力モード：ラベル上・入力下）
   ============================================================ */
.l-form__row {
  padding: 16px 0;
  border-bottom: 1px dashed var(--line);
}
.l-form__row:last-of-type {
  border-bottom: none;
}

.l-form__col-1 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 700;
}

.l-form__col-1 > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.l-form__required::after {
  content: '必須';
  padding: 3px 10px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 700;
  font-feature-settings: normal;
  letter-spacing: 0.04em;
  line-height: 1.5;
  white-space: nowrap;
  color: #fff;
  background: var(--req);
  border-radius: 999px;
}

.l-form__col-2 {
  display: block;
}

.l-form__note {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--muted);
}
.l-form__col-2 > .l-form__note {
  margin-top: 6px;
}

/* ============================================================
   10. フォーム行（確認モード：ラベル左・値右）
   ============================================================ */
.l-form--confirm .l-form__row {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: baseline;
  gap: 6px 16px;
  padding: 13px 0;
}

.l-form--confirm .l-form__col-1 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--muted);
}

/* 確認画面の郵便番号：「〒」と番号を同じ行に並べる */
.l-form--confirm .l-form__col-2 > div:has(> .l-form__note) {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.l-form--confirm .l-form__col-2 > div > .l-form__note {
  display: inline;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

/* 「（カナ）」など括弧付きの補記は、入れ子の有無にかかわらず素の文字として流す
   （元HTMLで span のネスト構造が行ごとに異なるため） */
.l-form--confirm .l-form__col-1 span {
  display: inline;
}

.l-form--confirm .l-form__col-2 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--ink);
  word-break: break-all;
}

/* 決済金額など、表の中で強調する行 */
.l-form--confirm .l-form__row--total {
  align-items: center;
  margin-top: 8px;
  padding: 15px 18px;
  background: var(--green-tint);
  border-bottom: none;
  border-radius: 16px;
}

@media (max-width: 480px) {
  .l-form--confirm .l-form__row--total {
    grid-template-columns: 1fr;
    gap: 2px;
    align-items: start;
  }
}

.l-form--confirm .l-form__row--total .l-form__col-1 {
  font-size: 14px;
  color: var(--green-deep);
}

.l-form--confirm .l-form__row--total .l-form__col-2 {
  font-size: 25px;
  font-weight: 900;
  word-break: keep-all;
  overflow-wrap: normal;
  letter-spacing: 0.01em;
  color: var(--green-deep);
}

/* アンケート回答のピル表示（STEP3） */
.l-form--confirm .l-form__container--survey .l-form__row {
  grid-template-columns: 1fr;
  gap: 10px;
}
.l-form--confirm .l-form__container--survey .l-form__col-1 {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}
.l-form--confirm .l-form__container--survey .l-form__col-2 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 15px;
}
.l-form--confirm .l-form__container--survey .l-form__col-2 br {
  display: none;
}

.l-form--confirm .l-form__container--survey .l-form__col-2 > span {
  padding: 7px 15px;
  font-size: 14px;
  font-weight: 700;
  color: var(--green-deep);
  background: var(--green-tint);
  border-radius: 999px;
}

/* 「その他」の自由記述。タグではなく、ラベル＋本文の1ブロックとして扱う */
.l-form--confirm .l-form__container--survey .l-form__free {
  flex: 1 1 100%;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}

.l-form--confirm .l-form__container--survey .l-form__free-hd {
  display: block;
  margin-bottom: 4px;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  background: none;
  border-radius: 0;
}

.l-form--confirm .l-form__container--survey .l-form__free-body {
  display: block;
  padding: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.85;
  color: var(--ink);
  background: none;
  border-radius: 0;
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
  white-space: pre-wrap;
}

/* ============================================================
   11. 決済ページの補助（Stripe注記）
   ============================================================ */

.l-submit__note .l-submit__note-hd {
  display: block;
  margin-bottom: 5px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}

/* ============================================================
   12. 入力部品
   ============================================================ */
.l-form input[type='text'],
.l-form input[type='tel'],
.l-form input[type='email'],
.l-form input[type='date'],
.c-question input[type='text'],
.c-question textarea {
  width: 100%;
  padding: 12px 15px;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--cream);
  border: 2px solid transparent;
  border-radius: 14px;
  outline: none;
  transition: 0.18s;
}

.l-form input::placeholder,
.c-question input::placeholder,
.c-question textarea::placeholder {
  color: #c4bba8;
}

.l-form input:focus,
.c-question input[type='text']:focus,
.c-question textarea:focus {
  border-color: var(--green);
  background: #fff;
}

.l-form__zipcode {
  max-width: 340px;
}
.l-form__col-2 > div {
  margin: 4px 0 0;
}

/* 郵便番号：都道府県などと同じ「ラベルが上・入力欄が下」の形式に揃える */
.l-form__col-2 > div:has(> .l-form__zipcode) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin: 0;
}

/* 「〒」は不要 */
.l-form__col-2 > div:has(> .l-form__zipcode) > .l-form__note:first-child {
  display: none;
}

/* 項目ラベルの下に置く小見出し（郵便番号・都道府県など）は
   ※の補足と区別するため、少しだけ大きく太くする（色はグレーのまま） */
.l-form__sub {
  font-size: 14px;
  font-weight: 700;
  color: #5d6660;
}

.l-form__school {
  display: flex;
  align-items: center;
  gap: 9px;
}
.l-form__school input {
  flex: 1;
}

/* ============================================================
   13. ラジオボタン（ピル型）
   ============================================================ */
.l-form__radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.l-form__col-2 label {
  display: inline-flex;
  align-items: center;
  position: relative;
  margin: 0 8px 8px 0;
  padding: 9px 17px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: 0.16s;
}

.l-form__col-2 label:has(.l-form__radio:checked) {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}
.l-form__col-2 label:has(.l-form__radio:focus-visible) {
  box-shadow: 0 0 0 4px rgba(60, 180, 100, 0.16);
}

/* コース選択は縦積みのリスト型 */
#course-options {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
#course-options label {
  width: 100%;
  justify-content: flex-start;
  padding: 11px 18px 11px 46px;
  border-radius: 14px;
}

#course-options label::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 50%;
  transition: 0.16s;
}

#course-options label:has(.l-form__radio:checked) {
  background: var(--green-tint);
  color: var(--green-deep);
}
#course-options label:has(.l-form__radio:checked)::before {
  border-color: var(--green);
  background: var(--green);
}

#course-options label:has(.l-form__radio:checked)::after {
  content: '';
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translate(0, -60%) rotate(45deg);
  box-sizing: border-box;
  width: 5px;
  height: 9px;
  border: 2.2px solid #fff;
  border-top: 0;
  border-left: 0;
}

/* ============================================================
   14. ツールチップ
   ============================================================ */
.tooltip {
  display: inline-grid;
  place-items: center;
  position: relative;
  width: 18px;
  height: 18px;
  font-size: 11.5px;
  font-weight: 800;
  color: #fff;
  background: var(--green);
  border-radius: 50%;
  cursor: help;
}

.tooltip::before {
  content: '?';
}
.tooltip::after {
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: auto;

  background: transparent;
}

.tooltip .tooltiptext {
  position: absolute;
  left: 50%;
  bottom: 150%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(320px, 78vw);
  padding: 13px 17px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.7;
  text-align: left;
  text-wrap: pretty;
  white-space: normal;
  overflow-wrap: anywhere;
  line-break: strict;
  color: #fff;
  background: var(--green-deep);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(40, 80, 50, 0.25);
  opacity: 0;
  visibility: hidden;
  z-index: 9;
  transition: 0.15s;
}

.tooltip .tooltiptext a {
  color: #cde7d3;
  font-weight: 700;
}
.tooltip:hover .tooltiptext {
  opacity: 1;
  visibility: visible;
}