/* ==========================================================================
   pages/lower.css — 07 contact / 08 thanks・404
   ========================================================================== */

/* ---- お問い合わせ ---- */
/* 注記・フォームともコンテナ幅826px（ラベル左端308→入力右端1134＝Figma）を中央寄せ・中身は左揃え */
.p-contact-note { padding: 40px 0 8px; }
.p-contact-note p {
  max-width: 826px; margin-inline: auto; text-align: left;
  font-family: var(--font-jp); font-weight: 600; font-size: 15px;
  line-height: 30px; color: var(--color-ink);
}
.p-contact-form { padding: 40px 0 72px; }
.p-contact-form .c-form { max-width: 826px; margin-inline: auto; }
.p-contact-form .c-form__submit-wrap { text-align: center; margin-top: 16px; }
/* .p-contact-form__addr-sub は components.css §8 に集約（gap:20px・サブラベル横並び） */

/* ---- サンクス ---- */
.p-thanks { padding: 120px 0 96px; text-align: center; }
.p-thanks__en {
  font-family: var(--font-en); font-weight: 700; font-size: 64px;
  line-height: 64px; letter-spacing: 6.4px; color: var(--color-main);
}
.p-thanks__title {
  font-family: var(--font-jp); font-weight: 700; font-size: 24px;
  line-height: 30px; color: var(--color-ink); margin-top: 32px;
}
.p-thanks__body {
  font-family: var(--font-jp); font-weight: 600; font-size: 16px;
  line-height: 30px; color: var(--color-ink);
  max-width: 800px; margin: 32px auto 0;
}
.p-thanks__body p + p { margin-top: 30px; }  /* Figma: 段落間に空行30px相当 */

/* ---- 404 ---- */
.p-404 { position: relative; margin-top: 60px; }
.p-404__hero {
  position: relative; width: 100%; height: 788px; overflow: hidden;
  background: var(--color-gray180) center/cover no-repeat;
}
.p-404__hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.9) 25%, rgba(255,255,255,0) 75%);
}
.p-404__overlay {
  position: absolute; inset: 0; z-index: 2;
}
.p-404__overlay .l-inner {
  height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 40px;
}
.p-404__body { max-width: 340px; }
.p-404__en {
  font-family: var(--font-en); font-weight: 700; font-size: 15px;
  letter-spacing: 1.5px; color: var(--color-main);
}
.p-404__code {
  font-family: var(--font-en); font-weight: 700; font-size: 64px;
  line-height: 64px; letter-spacing: 6.4px; color: var(--color-main); margin-top: 6px;
}
.p-404__lead {
  font-family: var(--font-jp); font-weight: 600; font-size: 16px;
  line-height: 30px; color: var(--color-ink); margin-top: 20px;
}
.p-404__desc {
  font-family: var(--font-jp); font-weight: 600; font-size: 16px;
  line-height: 30px; color: var(--color-ink); margin-top: 20px;
}
.p-404__nav { display: grid; gap: 28px; }
.p-404__nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 315px; height: 68px; padding: 0 24px; background: rgba(255,255,255,.9);
  font-family: var(--font-jp); font-weight: 600; font-size: 20px;
  letter-spacing: 2px; color: var(--color-ink);
  transition: background .2s;
}
.p-404__nav a:hover { background: #fff; }
.p-404__nav a::after {
  content: ""; flex: none; width: 24px; height: 24px;
  background: url('../../images/nengo/icons/nav-arrow-circle.svg') center/contain no-repeat;
}

@media (max-width: 767px) {
  .p-thanks__en { font-size: 44px; line-height: 48px; }
  .p-404__hero { height: auto; min-height: 320px; }
  .p-404__overlay { position: static; }
  .p-404__overlay .l-inner { flex-direction: column; align-items: flex-start; padding: 32px 20px; }
  .p-404__hero::after { background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.6)); }
  .p-404__nav a { width: 100%; }
  .p-404 { background: var(--color-bg-soft); }
}

/* --------------------------------------------------------------------------
   SP（2026-08-23）
   ⚠️ お問い合わせ／サンクス／404 は **Figma SPフレームが無い**ので弊社判断。
   「THANK YOU.」は44px/ls6.4 だと必要幅375 > 335 で2行に折れる（実測）→ 36pxで1行に収める。
   本文の中央揃えは完了画面の定型なのでそのまま（他ページの本文=左揃えとは別扱い）。
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .p-thanks__en { font-size: 36px; line-height: 44px; letter-spacing: 5.2px; }
}