/* ============================================================
   フォトン算数オンライン｜入塾申し込みフォーム
   4. ブロック（案内／ボタン／完了カード／ローディング／フッター）

   各ページの下半分に置かれる部品。

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

/* ============================================================
   15. 案内ボックス
   ============================================================ */
.l-info {
  margin: 16px 0 4px;
}

.l-info__message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 15px 17px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.8;
  color: var(--ink);
  background: #fff;
  border: 2px dashed var(--green);
  border-radius: 18px;
}

.l-info__icon {
  flex: 0 0 auto;
}

/* ============================================================
   16. プライバシーポリシー
   ============================================================ */
.l-main__privacy {
  margin: 18px 0 20px;
  font-size: 14.5px;
  text-align: center;
  color: var(--muted);
}
.l-main__privacy a {
  font-weight: 700;
}

/* ============================================================
   17. ボタン
   ============================================================ */
.l-submit {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}

.l-submit__btn {
  appearance: none;
  width: 100%;
  max-width: 300px;
  padding: 16px 0;
  font-family: 'Noto Sans JP';
  font-size: 17.5px;
  font-weight: 700;
  color: #fff;
  background: var(--green);
  border: none;
  border-radius: 999px;
  box-shadow: 0 6px 0 var(--green-deep);
  cursor: pointer;
  transition: 0.12s;
}

.l-submit__btn:hover {
  transform: translateY(2px);
  box-shadow: 0 4px 0 var(--green-deep);
}

.l-back__btn {
  appearance: none;
  width: 100%;
  max-width: 300px;
  padding: 13px 0;
  font-family: 'Noto Sans JP';
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: 0.15s;
}

.l-back__btn:hover {
  border-color: var(--green);
  color: var(--green-deep);
}

.l-submit__note {
  max-width: 460px;
  margin: 16px auto 0;
  padding: 14px 16px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.85;
  text-align: left;
  color: var(--muted);
  background: var(--cream);
  border-radius: 16px;
}

/* ============================================================
   18. 完了カード（STEP4／STEP6 共通）
   ============================================================ */
.l-thanks {
  margin: 0;
}

.l-thanks__container {
  padding: 6px 24px 28px;
  background: var(--card);
  border-radius: 28px;
  box-shadow: 0 6px 20px rgba(120, 140, 120, 0.08);
}

.l-thanks__title {
  padding: 26px 0 6px;
  text-align: center;
}

.l-thanks__title::before {
  content: '';
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
}

.l-thanks__title h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.l-thanks__title h2 span {
  display: block;
}

/* 状態バッジ（文言はHTML側に置く） */
.l-thanks__badge {
  display: block;
  width: fit-content;
  margin: 16px auto 0;
  padding: 6px 18px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
}

/* ブロック見出し（【お問い合わせ先】など。文言はHTML側） */
.l-thanks__hd {
  display: block;
  margin-bottom: 4px;
  font-size: 14.5px;
  font-weight: 700;
}

.l-thanks__text {
  margin-top: 22px;
  font-size: 15px;
  line-height: 1.95;
  color: var(--ink);
}
.l-thanks__text a {
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--green-tint);
}
.l-thanks__text a:hover {
  border-bottom-color: var(--green);
}

.l-thanks__btn {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* ---- 未完了（STEP4／注意喚起・オレンジ） ---- */
.l-thanks--pending .l-thanks__container {
  border-top: 5px solid var(--alert);
}

.l-thanks--pending .l-thanks__title::before {
  background-color: var(--alert-tint);
  background-size: 38px 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 24 24' fill='none' stroke='%23e8821e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8.4l7.2 4.8 7.2-4.8'/%3E%3Crect x='2' y='5' width='14.4' height='11' rx='2'/%3E%3Cpath d='M18.4 9.5h4.2M19.6 12.6h3M20.8 6.4h2.4'/%3E%3C/svg%3E");
}

.l-thanks--pending .l-thanks__title h2 {
  font-size: 21px;
  color: var(--alert-deep);
}

.l-thanks--pending .l-thanks__title h2 .sub {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--muted);
}

.l-thanks--pending .l-thanks__badge {
  color: #fff;
  background: var(--alert);
}
.l-thanks--pending .l-thanks__text > div {
  margin-bottom: 16px;
}
.l-thanks--pending .l-thanks__lead {
  padding: 18px 20px;
  background: var(--cream);
  border-radius: 18px;
}
.l-thanks--pending .l-thanks__lead > div {
  text-align: left;
}
.l-thanks--pending .l-thanks__lead .note {
  font-size: 14.5px;
  color: #5d6660;
}
.l-thanks--done .l-thanks__text .note {
  display: block;
  margin-top: 6px;
  font-size: 14.5px;
  color: #5d6660;
}

.l-thanks--pending .l-thanks__contact {
  padding: 16px 20px;
  font-size: 14.5px;
  background: #fff;
  border: 2px dashed var(--green);
  border-radius: 18px;
}

.l-thanks--pending .l-thanks__contact .l-thanks__hd {
  color: var(--green-deep);
}

/* ---- 完了（STEP6／達成・グリーン） ---- */
.l-thanks--done .l-thanks__container {
  border-top: 5px solid var(--green);
}

.l-thanks--done .l-thanks__title::before {
  background-color: var(--green-tint);
  background-size: 40px 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='%2312a725' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.6' y='4.2' width='11.6' height='14.4' rx='1.8'/%3E%3Cpath d='M4.3 8.2h6.2M4.3 11.2h6.2M4.3 14.2h3.6'/%3E%3Cpath d='M15.4 6.1h5.1a1.5 1.5 0 0 1 1.5 1.5v9.8a1.5 1.5 0 0 1-1.5 1.5h-5.1z'/%3E%3Cpath d='M15.4 6.1v12.8'/%3E%3Cpath d='M17.4 9.3h2.6M17.4 12.1h2.6'/%3E%3Cpath d='M8.9 21.4l1.9-.5 6.1-6.1-1.4-1.4-6.1 6.1z'/%3E%3C/svg%3E");
  animation: pop 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

@keyframes pop {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.l-thanks--done .l-thanks__title h2 {
  font-size: 22px;
  color: var(--green-deep);
}
.l-thanks--done .l-thanks__badge {
  color: #fff;
  background: var(--green);
}

.l-thanks--done .l-thanks__text p:not([class]) {
  margin: 0;
  padding: 18px 20px;
  background: var(--cream);
  border-radius: 18px;
}
.l-thanks--done .l-thanks__text p span {
  display: block;
}

.l-thanks--done .l-thanks__contact {
  margin-top: 16px;
  padding: 16px 20px;
  font-size: 14.5px;
  font-weight: 700;
  text-align: center;
  background: #fff;
  border: 2px dashed var(--green);
  border-radius: 18px;
}

.l-thanks--done .l-thanks__contact .l-thanks__hd {
  color: var(--green-deep);
}

/* ============================================================
   19. ローディング
   ============================================================ */
/* .is-hide だけでは #l-loading（詳細度 1,0,0）に負けるので、
   クラスを重ねて詳細度を上げる（1,1,0） */
.is-hide {
  display: none;
}
#l-loading.is-hide {
  display: none;
}

#l-loading {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.86);
  z-index: 40;
}

.l-loading__spinner {
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  color: var(--green-deep);
}

.l-spinner {
  display: block;
  width: 38px;
  height: 38px;
  margin: 0 auto 10px;
  border: 4px solid var(--green-tint);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================================
   20. フッター
   ============================================================ */
.c-footer {
  margin-top: 34px;
  font-size: 13px;
  line-height: 1.8;
  text-align: center;
  color: var(--muted);
}
.c-footer p {
  margin: 0;
}