/* ============================================================
   フォトン算数オンライン｜入塾申し込みフォーム
   2. ページ外枠（ヒーロー／受付期間／ステッパー／エラー）

   フォームの中身より外側にある、全ページ共通の枠。
   旧 c-stepper4.css（4ステップ版の差分）も末尾に統合した。
   エラー表示は c-error.css に分離した（全ページが読む）。

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

/* ============================================================
   4. ヒーロー（見出し帯）
   ============================================================ */
.c-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 22px;
  padding: 26px 24px;
  text-align: center;
  background: var(--green-tint);
  border-radius: 28px;
}

.c-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('/images/design/hero-desk.png') center/cover no-repeat;
  opacity: 0.4;
}

.c-hero > * {
  position: relative;
  z-index: 1;
}

.c-title {
  margin: 0;
  font-size: 33px;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  text-align: center;
  color: var(--green-deep);
  text-shadow:
    0 2px 0 rgba(255, 255, 255, 0.9),
    0 0 22px rgba(255, 255, 255, 0.85);
}

.c-title span {
  display: inline-block;
  position: relative;
  padding-bottom: 12px;
}

.c-title span::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 44px;
  height: 4px;
  text-indent: 0;
  background: var(--green);
  border-radius: 999px;
  opacity: 0.85;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.6);
}

.c-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin: 15px 0 0;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--green-deep);
  opacity: 0.9;
}

.c-subtitle::before,
.c-subtitle::after {
  content: '';
  width: 22px;
  height: 1.5px;
  background: currentColor;
  opacity: 0.4;
}

/* ============================================================
   5. 受付期間（STEP1）
   ============================================================ */
.c-period {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 18px auto 0;
}

.c-period__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 158px;
  padding: 11px 20px 12px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 5px 14px rgba(60, 120, 80, 0.12);
}

.c-period__ic {
  width: 16px;
  height: 16px;
  margin-bottom: 3px;
}
.c-period__node.start .c-period__ic {
  color: #2a9650;
}
.c-period__node.end .c-period__ic {
  color: #e07d4a;
}

.c-period__cap {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.c-period__node.start .c-period__cap {
  color: #2a9650;
}
.c-period__node.end .c-period__cap {
  color: #e07d4a;
}

.c-period__date {
  margin-top: 1px;
  font-size: 18.5px;
  font-weight: 900;
  line-height: 1.3;
  color: var(--ink);
}
.c-period__arrow {
  font-size: 27px;
  font-weight: 900;
  line-height: 1;
  color: var(--green);
}

/* ============================================================
   6. ステッパー
   ============================================================ */
.c-stepper-card {
  margin: 0 0 22px;
  padding: 18px 22px 20px;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 8px 24px rgba(90, 140, 105, 0.12);
}

/* 見出しは①の丸の左端、カウンタは④の丸の右端に揃える
   丸は各項目の中央にあるので、両端から (項目幅の半分 − 丸の半径) だけ内側に入れる */
.c-stepper-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  padding-inline: calc(100% / 8 - 34px);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.c-stepper-head .cnt {
  padding: 4px 13px;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  background: var(--green);
  border-radius: 999px;
}

.c-stepper {
  display: flex;
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.c-stepper li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 1;
  counter-increment: step;
}

/* 番号の丸 */
.c-stepper li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 13px;
  font-weight: 800;
  color: #aeb6ae;
  background: #fff;
  border: 2px solid #e1e8e2;
  border-radius: 50%;
  z-index: 1;
  transition: 0.15s;
}

/* 区間のバー */
.c-stepper li::after {
  content: '';
  position: absolute;
  top: 17px;
  left: -50%;
  width: 100%;
  height: 4px;
  background: #e8efe9;
  border-radius: 3px;
  z-index: 0;
}

.c-stepper li:first-child::after {
  display: none;
}

.c-stepper__item {
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--muted);
}

/* 通過済み */
.c-stepper li.c-stepper__done::before {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.c-stepper li.c-stepper__done::after,
.c-stepper li.c-stepper__wip::after {
  background: var(--green);
}
.c-stepper__done .c-stepper__item {
  color: var(--ink);
}

/* 現在地 */
.c-stepper li.c-stepper__wip::before {
  width: 42px;
  height: 42px;
  margin-top: -4px;
  font-size: 16px;
  color: #fff;
  background: var(--green);
  border-color: var(--green);
  box-shadow: 0 0 0 6px rgba(60, 180, 100, 0.16);
}

.c-stepper__wip .c-stepper__item {
  font-size: 12.5px;
  color: var(--green-deep);
}

/* ============================================================
   7. 4ステップ版ステッパー（.c-stepper--4 が付いた場合だけ効く）
   ============================================================ */
/* 1項目あたりの幅が広くなるので、文字を少し大きくする */
.c-stepper--4 .c-stepper__item {
  font-size: 12.5px;
  text-align: center;
}

.c-stepper--4 .c-stepper__wip .c-stepper__item {
  font-size: 13.5px;
}