/* お問い合わせ（/contact/ /en/contact/）と送信完了（thanks）。スマホ基準。900px 以上でPC組み、1100px 以上でフォームを2列（ご案内＋フォーム）にする。
   入力・エラー・確認の3状態は同じページ内で切り替える（main[data-state]）。部品は components.css（.field .input .chip .check .steps .btn）を使う。 */

/* ============================================================ ページ見出し（背景：コーヒー豆） */
.phead {
  padding-top: var(--header-h);
}

.phead__inner {
  padding-block: 36px 48px;
}

.phead__crumb {
  font-size: 11px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.1em;
  color: var(--cream-sub);
}

.phead__crumb li { display: inline; }
.phead__crumb a:hover { text-decoration: underline; text-underline-offset: 4px; }
.phead__crumb [aria-current] { color: var(--cream-text); }

.phead__label {
  margin-top: 24px;
  font-family: var(--ff-en);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.02em;
  color: var(--copper-light);
}

.phead__title {
  margin-top: 8px;
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: 28px;
  line-height: 43px;
  letter-spacing: 0.04em;
  color: var(--cream-text);
}

.phead__title:focus { outline: none; }

.phead__lead {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 300;
  line-height: 26.6px;
  letter-spacing: 0.02em;
  color: var(--cream-sub);
}

@media (min-width: 900px) {
  .phead__inner { padding-block: 80px 96px; }
  .phead__crumb { font-size: 12px; line-height: 19px; }
  .phead__label { margin-top: 32px; font-size: 20px; line-height: 28px; }
  .phead__title { margin-top: 12px; font-size: 46px; line-height: 69px; }
  .phead__lead { max-width: 640px; margin-top: 24px; font-size: 16px; line-height: 32px; }
}

/* 状態ごとの見出しの出し分け（JS 無効では入力状態のまま） */
.contact[data-state="input"] .only-confirm,
.contact[data-state="confirm"] .only-input { display: none; }
[data-view][hidden], .contact [hidden] { display: none !important; }

/* 英語: 字間 0 の箇所（Figma EN） */
html[lang="en"] .phead__crumb { letter-spacing: 0.06em; }
html[lang="en"] .phead__title { font-family: var(--ff-en); font-weight: 400; letter-spacing: 0; line-height: 35px; }
html[lang="en"] .phead__lead { letter-spacing: 0; }

@media (min-width: 900px) {
  html[lang="en"] .phead__title { line-height: 59.8px; }
}

/* ============================================================ 入力（フォーム＋ご案内） */
.cform { background: var(--paper); }

.cform__main {
  width: min(var(--wrap-max), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
  padding-block: 40px 64px;
}

.cform .steps { margin-bottom: 32px; }

/* エラーのまとめ */
.csummary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: -8px 0 32px;
  padding: 14px 16px;
  border-left: 3px solid var(--error);
  background: var(--error-soft);
}

.csummary[hidden] { display: none; }

.csummary__title {
  font-size: 13px;
  font-weight: 500;
  line-height: 22.1px;
  letter-spacing: 0.02em;
  color: var(--error);
}

.csummary__text {
  font-size: 12px;
  font-weight: 300;
  line-height: 21.6px;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}

/* お問い合わせの種類 */
.ctype__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.ctype__label .field__req {
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 500;
  line-height: 15px;
  letter-spacing: 0.04em;
}

.ctype__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.ctype .field__error { margin-top: 10px; }

/* 入力欄 */
.cform .field__label { line-height: 22px; }

.cfields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: 24px;
  align-items: start;
}

.field__error[hidden] { display: none; }

/* エラー時の入力欄は Figma で 55px（1.5px 線）。ブラウザは 1.5px の線を 1px に丸めるので、上下の余白で高さを合わせる */
.field.is-error .input,
.field.is-error .select { padding-block: 14.5px; }

.select { color: var(--ink); }
.select.is-empty { color: var(--ink-2); font-weight: 300; }
.select option { color: var(--ink); }

/* 同意 */
.cagree { margin-top: 24px; }

.cagree .check { display: flex; align-items: center; gap: 10px; }
.cagree .check__box { margin-top: 0; }
.cagree .check__text {
  font-size: 13px;
  font-weight: 400;
  line-height: 20.8px;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}

.cagree .check__text a {
  font-weight: 400;
  color: var(--plum);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cagree .check__text a:hover { color: var(--plum-soft); }
.cagree .field__error { margin-top: 8px; }

.cform__submit { margin-top: 28px; }

/* ハニーポット（見えない・読み上げない・Tab で入らない） */
.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ご案内（薄い茶色の囲み。スマホはフォームの下に帯で出す） */
.cguide {
  display: flex;
  flex-direction: column;
  padding: 48px max(var(--gutter), calc((100% - var(--wrap-max)) / 2)) 56px;
  background: var(--brown-light);
}

.cguide__label {
  font-family: var(--ff-en);
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: 0.02em;
  color: var(--copper);
}

.cguide__title {
  margin-top: 6px;
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 27px;
  letter-spacing: 0.04em;
  color: var(--plum);
}

.cguide__text {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 300;
  line-height: 26.6px;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}

.cguide__mail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--brown-line);
}

.cguide__mail-title {
  order: 1;
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 27px;
  letter-spacing: 0.04em;
  color: var(--plum);
}

.cguide__mail-note {
  order: 2;
  font-size: 14px;
  font-weight: 300;
  line-height: 26.6px;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}

.cguide__mail-addr {
  order: 3;
  align-self: flex-start;
  font-family: var(--ff-en);
  font-weight: 400;
  font-size: 17px;
  line-height: 25.5px;
  letter-spacing: 0.02em;
  color: var(--plum);
}

.cguide__mail-addr:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (min-width: 900px) {
  .cform__main {
    width: min(720px, calc(100% - 2 * var(--gutter)));
    margin-block: 120px 128px;
    padding: 48px;
    border: 1px solid var(--rule);
    background: #fff;
  }

  .csummary { margin: 0 0 28px; padding: 16px 20px; }
  .csummary__title { font-size: 14px; line-height: 23.8px; }
  .csummary__text { font-size: 13px; line-height: 23.4px; }

  .ctype__label { gap: 10px; letter-spacing: 0; color: var(--plum); }
  .ctype__label .field__req { padding: 1px 7px; font-size: 11px; font-weight: 400; line-height: 17.6px; letter-spacing: 0.08em; }
  .ctype__chips { gap: 10px; }
  /* PC の選択中チップは線なし（42px）。スマホは線あり（44px） */
  .ctype__chips .chip__input:checked + .chip__label { height: 42px; border-width: 0; }

  .cfields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 28px; }
  .field--wide { grid-column: 1 / -1; }

  .cagree { margin-top: 28px; }
  .cagree .check { gap: 12px; }
  .cagree .check__box { width: 18px; height: 18px; border-radius: 2px; }
  .cagree .check__text { font-size: 14px; font-weight: 300; line-height: 22.4px; letter-spacing: 0.02em; }
  .cform__submit { margin-top: 32px; }

  .cguide { padding-block: 56px 64px; }
}

@media (min-width: 1100px) {
  .cform {
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    column-gap: 64px;
    align-items: start;
    width: min(1200px, calc(100% - 2 * var(--gutter)));
    margin-inline: auto;
    padding-block: 120px 128px;
  }

  .cform__main { order: 2; width: auto; margin: 0; }

  .cguide {
    order: 1;
    padding: 44px 40px;
  }

  .cguide__label { font-size: 18px; line-height: 25.2px; }
  .cguide__title { margin-top: 10px; font-size: 28px; line-height: 44.8px; letter-spacing: 0.04em; }
  .cguide__text { margin-top: 16px; font-size: 15px; line-height: 29.25px; letter-spacing: 0.02em; }

  .cguide__mail { margin-top: 36px; padding-top: 28px; }
  .cguide__mail-title { order: 1; font-family: var(--ff-sans); font-size: 14px; line-height: 22.4px; letter-spacing: 0.06em; }
  .cguide__mail-addr { order: 2; font-size: 18px; line-height: 27px; letter-spacing: 0.02em; }
  .cguide__mail-note { order: 3; font-size: 13px; line-height: 23.4px; letter-spacing: 0.02em; }
}

/* 英語 */
html[lang="en"] .ctype__label,
html[lang="en"] .ctype__label .field__req { letter-spacing: 0; }
html[lang="en"] .field__req,
html[lang="en"] .field__error,
html[lang="en"] .csummary__title,
html[lang="en"] .csummary__text,
html[lang="en"] .cagree .check__text,
html[lang="en"] .step__label { letter-spacing: 0; }

/* 選択チップの字間は PC のみ 0（Figma EN スマホは 0.04em のまま） */
@media (min-width: 900px) { html[lang="en"] .chip__label { letter-spacing: 0; } }

html[lang="en"] .cguide__title { font-family: var(--ff-en); font-weight: 400; letter-spacing: 0; }
html[lang="en"] .cguide__text,
html[lang="en"] .cguide__mail-note,
html[lang="en"] .cguide__mail-title { letter-spacing: 0; }
html[lang="en"] .cguide__mail-title { font-family: var(--ff-en); font-weight: 400; }

@media (min-width: 1100px) {
  html[lang="en"] .cguide__title { line-height: 36.4px; }
  html[lang="en"] .cguide__mail-title { font-family: var(--ff-sans); font-weight: 500; }
}

/* ============================================================ 確認 */
.cconfirm { background: var(--paper); }

.cconfirm[hidden] { display: none; }

.cconfirm__card {
  width: min(var(--wrap-max), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
  padding-block: 40px 64px;
}

.cconfirm .steps { margin-bottom: 28px; }

.clist {
  border-top: 1px solid var(--rule);
}

.clist__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-block: 14px;
  border-bottom: 1px solid var(--rule);
}

.clist__row dt {
  font-size: 12px;
  font-weight: 400;
  line-height: 19px;
  letter-spacing: 0.04em;
  color: var(--plum-soft);
}

.clist__row dd {
  font-size: 14px;
  font-weight: 300;
  line-height: 25px;
  letter-spacing: 0.02em;
  color: var(--ink);
  white-space: pre-wrap;
}

.clist__row dd.is-empty { color: var(--ink-2); }

.cconfirm__foot {
  display: flex;
  flex-direction: column;
}

.cconfirm__note {
  order: 1;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 300;
  line-height: 23.4px;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}

.cconfirm__btns {
  order: 2;
  display: flex;
  flex-direction: column-reverse;
  gap: 12px;
  margin-top: 24px;
}

.cconfirm__btns .btn { width: 100%; }

.cconfirm__foot .csummary { order: 3; margin: 24px 0 0; }

.cconfirm .btn.is-busy { opacity: 0.6; pointer-events: none; }

@media (min-width: 900px) {
  .cconfirm { padding-block: 112px 128px; }

  .cconfirm__card {
    width: min(880px, calc(100% - 2 * var(--gutter)));
    padding: 48px 56px 56px;
    border: 1px solid var(--rule);
    background: #fff;
  }

  .cconfirm .steps { margin-bottom: 36px; }

  .clist__row {
    flex-direction: row;
    gap: 32px;
    padding-block: 18px;
  }

  .clist__row dt { flex: none; width: 220px; font-size: 14px; line-height: 25.2px; letter-spacing: 0.02em; }
  .clist__row dd { flex: 1 1 auto; min-width: 0; font-size: 15px; line-height: 27px; }

  .cconfirm__btns {
    order: 1;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 14px;
    margin-top: 40px;
  }

  .cconfirm__btns .btn { width: auto; }

  .cconfirm__note { order: 2; margin-top: 16px; text-align: center; }
  .cconfirm__foot .csummary { order: 0; margin: 40px 0 0; }
}

html[lang="en"] .clist__row dt,
html[lang="en"] .clist__row dd,
html[lang="en"] .cconfirm__note { letter-spacing: 0; }

/* ============================================================ 送信完了 */
.cthanks {
  background: var(--paper);
}

.cthanks__inner {
  width: min(var(--wrap-max), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
  padding-block: 40px 56px;
}

.cthanks .steps { margin-bottom: 32px; }

.cthanks .icon-circle { width: 56px; height: 56px; }
.cthanks .icon-circle img { width: 28px; height: 28px; }

.cthanks__title {
  margin-top: 16px;
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 28.8px;
  letter-spacing: 0.04em;
  color: var(--plum);
}

.cthanks__text {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 300;
  line-height: 26.6px;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}

.cthanks__box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 20px;
  padding: 18px 20px;
  background: var(--brown-light);
}

.cthanks__box-text {
  font-size: 13px;
  font-weight: 300;
  line-height: 23.4px;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}

.cthanks__box-addr {
  align-self: flex-start;
  font-family: var(--ff-en);
  font-weight: 400;
  font-size: 17px;
  line-height: 25.5px;
  letter-spacing: 0.02em;
  color: var(--plum);
}

.cthanks__box-addr:hover { text-decoration: underline; text-underline-offset: 4px; }

.cthanks__btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}

/* お待ちいただく間に */
.cwait {
  padding: 64px 0 72px;
  background: var(--plum-light);
}

.cwait__inner {
  width: min(var(--wrap-max), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
}

.cwait__label {
  font-family: var(--ff-en);
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: 0.02em;
  color: var(--copper);
}

.cwait__title {
  margin-top: 8px;
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 38.4px;
  letter-spacing: 0.04em;
  color: var(--plum);
}

.cwait__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.tcard {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--plum-line);
  background: #fff;
}

.tcard__body { display: flex; flex-direction: column; gap: 4px; }

.tcard__en {
  font-family: var(--ff-en);
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  line-height: 18.2px;
  letter-spacing: 0.02em;
  color: var(--copper);
}

.tcard__title {
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: 17px;
  line-height: 25.5px;
  letter-spacing: 0.04em;
  color: var(--plum);
}

.tcard__text {
  font-size: 13px;
  font-weight: 300;
  line-height: 23.4px;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}

.tcard__link {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 22.4px;
  letter-spacing: 0.06em;
  color: var(--plum);
}

.tcard__arrow {
  font-family: var(--ff-en);
  font-size: 16px;
  line-height: 19.2px;
  letter-spacing: 0;
}

/* カード全体をリンクの範囲にする */
.tcard { position: relative; }
.tcard__link::after { content: ""; position: absolute; inset: 0; }

@media (min-width: 900px) {
  .cthanks__inner {
    max-width: 720px;
    padding-block: 112px 120px;
    text-align: center;
  }

  .cthanks .steps { justify-content: center; margin-bottom: 48px; }
  .cthanks .icon-circle { margin-inline: auto; }

  .cthanks__title { margin-top: 28px; font-size: 28px; line-height: 44.8px; }
  .cthanks__text { margin-top: 16px; font-size: 16px; line-height: 32px; letter-spacing: 0.02em; }

  .cthanks__box {
    align-items: center;
    margin-top: 32px;
    padding: 24px 32px;
    background: var(--mist);
  }

  .cthanks__box-text { font-size: 14px; line-height: 25.2px; }
  .cthanks__box-addr { align-self: center; font-size: 18px; line-height: 27px; }

  .cthanks__btns {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 14px;
    margin-top: 40px;
  }

  .cwait { padding-block: 104px 112px; }
  .cwait__label { font-size: 18px; line-height: 25.2px; }
  .cwait__title { margin-top: 10px; font-size: 28px; line-height: 44.8px; }
  .cwait__list { margin-top: 44px; }
}

@media (min-width: 1100px) {
  .cwait__list { flex-direction: row; gap: 24px; }
  .tcard { flex: 1 1 0; min-width: 0; justify-content: space-between; gap: 0; padding: 32px; }
  .tcard__body { gap: 8px; }
  .tcard__en { font-size: 16px; line-height: 22.4px; }
  .tcard__title { font-size: 22px; line-height: 33px; letter-spacing: 0.04em; }
  .tcard__text { font-size: 14px; line-height: 25.9px; }
  .tcard__link { gap: 10px; padding-top: 24px; }
}

html[lang="en"] .cthanks__title,
html[lang="en"] .cwait__title,
html[lang="en"] .tcard__title { font-family: var(--ff-en); font-weight: 400; letter-spacing: 0; }
html[lang="en"] .cthanks__title { line-height: 25.2px; }
html[lang="en"] .cwait__title { line-height: 33.6px; }
html[lang="en"] .tcard__title { line-height: 23.8px; }
html[lang="en"] .cthanks__text,
html[lang="en"] .cthanks__box-text,
html[lang="en"] .tcard__text { letter-spacing: 0; }

@media (min-width: 900px) {
  html[lang="en"] .cthanks__title { line-height: 36.4px; }
  html[lang="en"] .cwait__title { line-height: 36.4px; }
}

@media (min-width: 1100px) {
  html[lang="en"] .tcard__title { line-height: 31.9px; }
}

/* 英語スマホ: Figma は手順表示を約 0.852 倍で作っている（ラベルが長く 342px に収まらないため。
   文字は 11.09px / 11.06px、丸は 23.9px）。zoom は使わず、寸法を --z 倍で実値指定する */
@media (max-width: 899.98px) {
  html[lang="en"] .contact .steps {
    --z: 0.852;
    gap: calc(14px * var(--z));
    white-space: nowrap;
  }
  html[lang="en"] .contact .step { gap: calc(10px * var(--z)); }
  html[lang="en"] .contact .step__num {
    width: calc(28px * var(--z));
    height: calc(28px * var(--z));
    border-width: calc(1px * var(--z));
    font-size: calc(13px * var(--z));
  }
  html[lang="en"] .contact .step__label { font-size: calc(13px * var(--z)); }
  html[lang="en"] .contact .steps__line { width: calc(40px * var(--z)); height: calc(1px * var(--z)); }
}

/* 英語スマホの最小幅（〜379px）はさらに縮めて 312px に収める */
@media (max-width: 379.98px) {
  html[lang="en"] .contact .steps { --z: 0.74; }
}