/* ============================================================
   全幅レイアウト差分（採用案専用）

   ヒーローを全幅にし、ステッパーと一体化させる。
   フッター強化、受付期間の2ブロック化、STEP4/6のアイコン差し替え。

   ※ c-base / c-shell / c-form / c-blocks の後に読み込むこと。本ファイルの上書きは
     同じ詳細度＋後勝ちに頼っているため、順番を入れ替えると崩れる。
   ============================================================ */

/* ============================================================
   1. 幅の制御
   全幅ブロックのため wrapper の左右paddingを外し、
   内側の各要素で720pxに収める
   ============================================================ */
.wrapper {
  max-width: none;
  padding: 0;
}
.c-header {
  padding: 20px 16px 18px;
}

/* masthead 以外のコンテンツは620pxに収める */
.wrapper .l-form,
.wrapper .l-thanks,
.wrapper .l-info,
.wrapper .l-main__privacy,
.wrapper .l-submit,
.wrapper .c-messages,
.wrapper .c-question {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

div[role='main'] {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px;
}
.wrapper > div[role='main'] {
  max-width: none;
  padding: 0;
}
.wrapper > div[role='main'] > .c-masthead {
  margin-left: 0;
  margin-right: 0;
}

.wrapper > div[role='main'] > *:not(.c-masthead) {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

.wrapper > div[role='main'] > form {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px;
}
.wrapper > .l-thanks {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px;
}
.wrapper > .c-masthead {
  margin-left: 0;
  margin-right: 0;
}

/* ============================================================
   2. ヒーロー ＋ ステッパー一体ブロック
   帯は padding-bottom を持たず、ステッパーカードを
   下端に食い込ませて境界を跨がせる
   ============================================================ */
.c-masthead {
  position: relative;
  max-width: none;
  margin: 0 0 24px;
  padding: 0;
  background: #f6f3ec;
}

/* 写真を帯全体に敷く */
.c-masthead::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('/images/design/hero-desk.png') center/cover no-repeat;
  opacity: 0.42;
}

/* その上からグラデーションを重ね、下端を白へ溶かす */
.c-masthead::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(231, 246, 234, 0) 0%,
    rgba(231, 246, 234, 0.12) 52%,
    rgba(255, 255, 255, 0.6) 82%,
    #fff 100%
  );
}

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

/* ヒーロー部（上半分・写真＋タイトル／全幅） */
.c-masthead .c-hero {
  max-width: none;
  margin: 0;
  padding: 30px 24px 30px;
  overflow: visible;
  background: none;
  border-radius: 0;
  box-shadow: none;
}

.c-masthead .c-hero::before {
  display: none;
}

/* ステッパー部（下半分・白／下のコンテンツと同じ幅に揃える）
   下のコンテンツは max-width:720px + padding:0 16px = 実質588px。
   狭い画面でも同じ左右16pxが空くよう width で追従させる */
.c-masthead .c-stepper-card {
  width: calc(100% - 32px);
  max-width: 688px;
  margin: 0 auto;
  padding: 20px 24px 22px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 3px 12px rgba(90, 140, 105, 0.1);
}

/* ============================================================
   3. 見出し
   下の装飾線は使わない（サブ見出しの横線と重複するため）
   ============================================================ */
.c-title span {
  padding-bottom: 0;
}
.c-title span::after {
  display: none;
}

/* ============================================================
   4. 受付期間（STEP1）
   正方形に近い2ブロック。スマホでも横並びを維持する
   ============================================================ */
.c-period {
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 12px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.c-period__node {
  justify-content: center;
  flex: 1 1 0;
  gap: 0;
  min-width: 0;
  padding: 16px 10px 17px;
}

.c-period__ic {
  width: 17px;
  height: 17px;
  margin-bottom: 5px;
}
.c-period__cap {
  margin-bottom: 9px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
}

.c-period__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1.25;
}
.c-period__date .y {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.c-period__date .md {
  font-size: 19.5px;
  font-weight: 900;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--ink);
}
.c-period__date .md .w {
  margin-left: 2px;
}
.c-period__date .t {
  margin-top: 1px;
  font-size: 15.5px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.c-period__arrow {
  align-self: center;
  flex: 0 0 auto;
  font-size: 20px;
  font-weight: 900;
  -webkit-text-stroke: 1.6px currentColor;
}

/* ============================================================
   5. 学年ラジオ（STEP1）
   広い幅では6等分の1行。狭い幅では3列×2段にして
   タップ領域を確保しつつカードからはみ出さないようにする
   ============================================================ */
.l-form__col-2:has(> label > input[name='grade']) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

@media (min-width: 520px) {
  .l-form__col-2:has(> label > input[name='grade']) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.l-form__col-2:has(> label > input[name='grade']) label {
  justify-content: center;
  margin: 0;
  padding: 9px 4px;
  font-size: 13.5px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* ============================================================
   6. ツールチップ
   濃い緑ベタは主張が強すぎるため、白地＋緑の細枠に変える
   ============================================================ */
.tooltip .tooltiptext {
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.85;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(40, 80, 50, 0.14);
}

/* 吹き出しの三角 */
.tooltip .tooltiptext::before,
.tooltip .tooltiptext::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  border: 7px solid transparent;
}

.tooltip .tooltiptext::before {
  margin-left: -7px;
  border-top-color: var(--line);
}
.tooltip .tooltiptext::after {
  margin-left: -7px;
  margin-top: -2px;
  border-top-color: #fff;
}

/* 中の強調（元HTMLの style="font-weight:bold" が付いた span）は緑で拾う */
.tooltip .tooltiptext span {
  color: var(--green-deep);
}
.tooltip .tooltiptext a {
  color: var(--green-deep);
  font-weight: 700;
}

/* ============================================================
   7. 枠線の使い分け
   破線＝注意・案内（l-info）／実線＋淡い地色＝問い合わせ先
   ※ c-common 側の破線指定を同じ詳細度で上書きしている
   ============================================================ */
.l-thanks--pending .l-thanks__contact,
.l-thanks--done .l-thanks__contact {
  background: var(--cream);
  border: 1px solid var(--line);
}

.l-thanks--pending .l-thanks__contact .l-thanks__hd,
.l-thanks--done .l-thanks__contact .l-thanks__hd {
  color: var(--muted);
}

.l-thanks--done .l-thanks__contact {
  text-align: left;
  font-weight: 500;
}

/* 注意書きボックス内はテキストリンク（ボタン化しない） */
.l-info__message a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--green-deep);
}

.l-info__message a:hover {
  color: var(--green);
}

/* ============================================================
   8. 完了カードのアイコン差し替え
   ============================================================ */
/* STEP4：封筒＋発信線（線の長さを揃えたもの） */
.l-thanks--pending .l-thanks__title::before {
  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.8 7.4h3.4M18.8 10.5h3.4M18.8 13.6h3.4'/%3E%3C/svg%3E");
}

/* STEP6：チェックマーク */
.l-thanks--done .l-thanks__title::before {
  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='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-10'/%3E%3C/svg%3E");
}

/* ============================================================
   9. フッター強化
   ============================================================ */
.c-footer {
  max-width: none;
  margin-top: 44px;
  padding: 30px 16px 34px;
  background: var(--cream);
  border-top: 2px solid var(--line);
}

.c-footer__company {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  max-width: 720px;
  margin: 0 auto;
}

.c-footer__tel {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.c-footer__tel a {
  text-decoration: none;
  color: var(--green-deep);
}
.c-footer__tel a:hover {
  color: var(--green);
}
.c-footer__address {
  font-size: 13px;
}

/* .c-footer p{margin:0} より詳細度を上げて margin-top を通す */
.c-footer .c-footer__rights {
  width: 100%;
  margin-top: 12px;
  padding-top: 12px;
  font-size: 12.5px;
  text-align: center;
  color: #9aa39c;
  border-top: 1px solid var(--line);
}

/* ============================================================
   12. 本文エリアの地色
   白いカードを浮かせて左右の余白を意図的に見せる
   ============================================================ */

body {
  background: #fcfbf8;
}

/* 帯の下端は白へ溶けているので、地色に合わせて終端を揃える */
.c-masthead::after {
  background: linear-gradient(
    180deg,
    rgba(231, 246, 234, 0) 0%,
    rgba(231, 246, 234, 0.12) 52%,
    rgba(252, 251, 248, 0.6) 82%,
    #fcfbf8 100%
  );
}

/* フッターを地色と揃え、上線だけで区切る */
.c-footer {
  background: #fcfbf8;
}

/* カードの白を地色から少し浮かせる */
.l-form__container,
.c-question,
.l-thanks__container,
.c-masthead .c-stepper-card {
  box-shadow: 0 6px 22px rgba(120, 140, 120, 0.09);
}

/* 案内ボックス・注記は白のままだと沈むので、境界をはっきりさせる */
.l-submit__note {
  background: #fff;
  border: 1px solid var(--line);
}