/* ============================================================
   component-form.css — お問い合わせの部品（c-）
   ============================================================ */

.c-contact__title {
  font-weight: var(--fw-normal);
  font-size: clamp(2.5rem, 4.67vw, 5.62rem);
  line-height: 1.14;
  letter-spacing: var(--ls-md);
}

/* --- フォーム -------------------------------------------- */
.c-formwrap {
  background: var(--color-bg-article);
  color: var(--color-text-dark);
  padding: var(--space-10) var(--gutter) var(--space-6);
  display: flex;
  justify-content: center;
}

.c-form { width: min(100%, 74.75rem); }

.c-form__title {
  margin-block-start: 1rem;
  font-weight: var(--fw-normal);
  font-size: clamp(1.1875rem, 2.08vw, 2.6rem);
  line-height: 1.3;
  letter-spacing: var(--ls-md);
}

.c-form__title--light { color: var(--color-text); }

.c-form__body { margin-block-start: var(--space-9); }

.c-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.c-field { display: block; }

.c-form__body > .c-field,
.c-form__row + .c-field { margin-block-start: var(--space-4); }

.c-field__label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  /* カンプのラベルは太字 */
  font-weight: var(--fw-bold);
  font-size: clamp(0.9375rem, 1.115vw, 1.4rem);
  letter-spacing: var(--ls-md);
}

.c-badge {
  /* カンプ実測：46×26pxの角丸の札。文字は白 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.875rem;
  padding: 1px var(--space-2);
  border-radius: 3px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.9375rem;
  letter-spacing: var(--ls-sm);
}

.c-badge--any { background: rgb(var(--rgb-dark) / .28); }

.c-field__input {
  width: 100%;
  margin-block-start: var(--space-3);
  padding: var(--space-4);
  font-size: clamp(0.9375rem, 1.047vw, 1.2563rem);
  color: var(--color-text-dark);
  background: var(--color-bg-light-2);
  border: 1px solid rgb(var(--rgb-dark) / .18);
}

textarea.c-field__input { resize: vertical; }

.c-field__select {
  transition: border-color var(--dur) var(--ease);
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 22px center, right 16px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.c-form__note {
  margin-block-start: 0.1875rem;
  font-size: var(--fs-2xs);
  line-height: 1.95;
  letter-spacing: var(--ls-xs);
  color: var(--color-text-dark-72);
}

.c-form__link {
  color: var(--color-accent-deep);
  text-decoration: underline;
  transition: color var(--dur) var(--ease);
}

.c-form__link svg {
  display: inline-block;
  margin-inline: var(--space-2) 0;
  vertical-align: -1px;
}

.c-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-10);
  /* カンプ実測：ボタンは603×92px */
  width: min(100%, 37.6875rem);
  margin-block-start: var(--space-7);
  padding: var(--space-6) var(--space-8);
  background: var(--color-accent);
  color: var(--color-on-accent);
  border: 0;
  font-size: var(--fs-md);
  letter-spacing: var(--ls-xl);
  transition: background-color var(--dur) var(--ease);
}

@media (min-width: 768px) {
  .c-formwrap { padding-block: 53px 9px; }
  .c-form__row { grid-template-columns: 1fr 1fr; }
}

@media (hover: hover) and (pointer: fine) {
  .c-submit:hover { background: var(--color-accent-hover); }
}

/* --- お問い合わせからの流れ ------------------------------ */
.c-flowsec {
  background: var(--color-bg-cta-from);
  padding-block: 26px 12px;
}

.c-flow__list {
  gap: var(--space-6);
  margin-block-start: 16px;
}

.c-flow { position: relative; }

.c-flow__head {
  display: flex;
  align-items: center;
  /* カンプ実測：円の右端239px→番号254px＝15px */
  gap: 15px;
}

.c-flow__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  /* カンプ実測：直径100px・線2px・中のアイコンは白で約52px（2026-09-09）。
     1240〜1919pxは列幅に連れて縮める（固定だと本文の幅が105pxしか残らない） */
  width: var(--flow-icon, 6.25rem);
  height: var(--flow-icon, 6.25rem);
  border: 2px solid var(--color-accent);
  border-radius: 50%;
  color: var(--color-text);
}

.c-flow__icon svg { width: calc(var(--flow-icon, 6.25rem) * 0.52); height: calc(var(--flow-icon, 6.25rem) * 0.52); }

.c-flow__no {
  font-family: var(--font-en);
  /* カンプ実測：番号のインクは22px高。1239px以下は固定値、1240px以上は下でXD比例 */
  font-size: 1.5rem;
  letter-spacing: var(--ls-md);
  color: var(--color-accent);
}

.c-flow__title {
  margin-block-start: var(--space-2);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  letter-spacing: 0.005em;
  color: var(--color-text-93);
}

.c-flow__body {
  margin-block-start: var(--space-4);
  /* 1239px以下は15px以上（案件の決まり）。1240px以上は下でカンプどおりに戻す */
  font-size: 0.9375rem;
  line-height: 2.25;
  letter-spacing: 0.005em;
  color: var(--color-text-85);
  padding-inline-start: 113px;
  /* 文節で折り返す。句読点や語の途中で切らない（2026-09-09） */
  word-break: auto-phrase;
  text-wrap: pretty;
}

.c-flow__arrow { display: none; }

.c-flow--last .c-flow__arrow { display: none; }

@media (min-width: 1240px) {
  .c-flow__arrow {
    display: block;
    position: absolute;
    inset-inline-end: -0.5rem;
    inset-block-start: calc(var(--flow-icon, 6.25rem) / 2 - 0.72rem);
    width: clamp(2rem, 2.656vw, 3.1875rem);
    height: auto;
    color: var(--color-accent);
  }

  .c-flow--last .c-flow__arrow { display: none; }
}

/* --- プライバシーポリシー -------------------------------- */
.c-page-hero--short { min-height: 18.75rem; }


@media (hover: hover) and (pointer: fine) {
  /* 元の色（#f98d00）と差し色（#fb8a02）はほぼ同じで変化が見えなかった。本文の黒に変える（2026-09-26） */
  .c-form__link:hover { color: rgb(var(--rgb-dark)); }
  .c-field__select:hover { border-color: var(--color-accent); }
  .c-policy__intro a:hover { color: var(--color-accent-deep); }
}

/* 流れの見出しはカンプではフォームの見出しより小さい */
.c-flowsec .c-form__title {
  font-size: clamp(1.1875rem, 1.927vw, 2.4rem);
}

/* XD実測：流れの見出しは画面端から144px（本文の列より45px内側） */
@media (min-width: 1240px) {
  .c-flowsec .c-label,
  .c-flowsec .c-form__title,
  .c-flowsec .c-flow__list { padding-inline-start: 45px; }
  .c-flowsec .c-form__title { margin-block-start: 0; }
}


@media (min-width: 1240px) {
  .c-flow__body { font-size: var(--fs-3xs); }
  .c-badge { font-size: 0.75rem; }
}


/* お問い合わせのCTA帯：カンプ実測 見出しは1行で517×45px（お知らせ詳細は641px・別の大きさ）
   お問い合わせからの流れは2列以上に並ぶ幅で高さをそろえる（2026-09-09） */


@media (min-width: 1240px) {
  .c-cta-band--slim.c-cta-band--photo.c-cta-band--contact .c-cta-band__en { font-size: clamp(1.75rem, 2.255vw, 2.7063rem); }

}


/* 流れの見出しは768px以上でも1行に収まるので、2行分の高さは確保しない（空きが出るため・2026-09-09） */


@media (min-width: 1240px) {
  .c-flow__no { font-size: clamp(1.5rem, 1.646vw, 1.975rem); }
  .c-flow__body { font-size: clamp(0.9375rem, 0.833vw, 1rem); }
  /* カンプ実測：注意書きはインク18px高・601px幅 */
  .c-form__note { font-size: clamp(0.9375rem, 0.911vw, 1.0938rem); }
}


/* カンプ実測（2026-09-09）：自由記入欄 y1745-1885（140px高）／注意書きのインク1959／
   ボタン2028-2121／区画の下端2181（ボタンの下に60px） */
@media (min-width: 1240px) {
  textarea.c-field__input { height: 8.75rem; min-height: 0; margin-block-start: calc(var(--space-3) + 9px); }
  .c-form__note { margin-block-start: 57px; }
  .c-submit { margin-block-start: 6px; }
  .c-formwrap { padding-block: 53px 58px; }
}


/* 1240〜1799px：列が狭いので円を縮め、本文は列いっぱいに使い、1920px用の固定改行は効かせない。
   見出しも列に収まる大きさにする（「ご提案・お見積り」が途中で折れないように）。2026-09-09 */
@media (min-width: 1240px) {
  .c-flow { --flow-icon: clamp(4rem, 5.208vw, 6.25rem); }
  .c-flow__body { padding-inline-start: 0; }
  .c-flow__body br { display: none; }
  .c-flow__title { font-size: clamp(0.9375rem, 1.042vw, 1.25rem); letter-spacing: 0; word-break: auto-phrase; }
  /* 円と見出しの間隔も幅に連れて縮める（1240pxで見出し「完成・お引き渡し」が語の途中で折れていた） */
  .c-flow__head { gap: clamp(0.5rem, 0.781vw, 0.9375rem); }
}

@media (min-width: 1800px) {
  .c-flow__body { padding-inline-start: calc(var(--flow-icon, 6.25rem) + 15px); }
  .c-flow__body br { display: inline; }
}

/* --- プライバシーポリシー（2026-09-09 割烹富士サイトのレイアウトに合わせた） ----
   左に目次の箱、右に本文。条項は1列で縦積み。1239px以下は目次を上に積む。
   ヒーロー・下部の帯・フッターはお問い合わせと同じ。 */
.c-privacy__title {
  font-weight: var(--fw-normal);
  font-size: clamp(2.5rem, 4.67vw, 5.62rem);
  line-height: 1.14;
  letter-spacing: var(--ls-md);
}
.c-page-hero--sm .c-privacy__title { margin-block-start: 5px; }
/* 767px以下は「プライバシー／ポリシー」で改行（園田さん指示 2026-09-11）。768px以上は1行 */
@media (min-width: 768px) {
  .c-privacy__title br { display: none; }
}

.c-policywrap {
  background: var(--color-bg-light-3);
  color: var(--color-text-dark);
  padding-block: var(--space-6) var(--space-12);
}
.c-breadcrumb--dark { color: var(--color-text-dark-66); }
.c-breadcrumb--dark .c-breadcrumb__current { color: rgb(var(--rgb-dark) / .85); }

.c-policy-layout {
  max-width: 70rem;
  margin-inline: auto;
  display: grid;
  grid-template-areas: "crumb" "toc" "main";
  row-gap: 1.875rem;
  align-items: start;
}
.c-policy-layout__crumb { grid-area: crumb; }
.c-policy-layout__toc { grid-area: toc; }
.c-policy-layout__main { grid-area: main; }

/* 目次の箱 */
.c-toc {
  background: var(--color-bg-card);
  border: 1px solid var(--color-line-dark);
  padding: var(--space-6);
}
.c-toc__title {
  font-size: 1.125rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  margin-block-end: var(--space-4);
}
.c-toc__list { list-style: none; }
.c-toc__link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding-block: 0.625rem;
  border-block-end: 1px solid var(--color-line-dark);
  font-size: 0.9375rem;
  color: var(--color-text-dark-85);
  text-decoration: none;
}
.c-toc__link::before {
  content: "";
  flex: none;
  width: 0.4em;
  height: 0.4em;
  border-block-start: 1.5px solid var(--color-accent);
  border-inline-end: 1.5px solid var(--color-accent);
  rotate: 45deg;
}
.c-toc__link:hover { color: var(--color-accent); }

/* 導入文・更新日 */
.c-policy__intro {
  font-size: clamp(0.9375rem, 0.833vw, 1rem);
  line-height: 2.1;
  color: rgb(var(--rgb-dark) / .85);
  word-break: auto-phrase;
  text-wrap: pretty;
}
.c-policy__updated {
  margin-block-start: 0.875rem;
  text-align: end;
  font-size: 0.9375rem;
  color: var(--color-text-dark-66);
}

/* 条項（1列で縦積み） */
.c-policy__stack {
  margin-block-start: 1.875rem;
  display: grid;
  row-gap: 1.125rem;
}
.c-policy {
  background: var(--color-bg-card);
  border: 1px solid var(--color-line-dark);
  padding: 1.5rem 1.25rem;
}
.c-policy__head {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-block-end: var(--space-4);
  padding-block-end: 0.875rem;
  border-block-end: 1px solid var(--color-line-dark);
  font-size: 1.125rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
}
.c-policy__no {
  flex: none;
  width: 2.125rem;
  height: 2.125rem;
  display: grid;
  place-items: center;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-en);
  font-weight: var(--fw-semibold);
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
}
.c-policy__body {
  font-size: clamp(0.9375rem, 0.833vw, 1rem);
  line-height: 2;
  color: rgb(var(--rgb-dark) / .85);
  word-break: auto-phrase;
  text-wrap: pretty;
}
.c-policy__body + .c-policy__body,
.c-policy__items + .c-policy__body { margin-block-start: 0.75rem; }
.c-policy__items {
  margin-block: 0.75rem;
  list-style: none;
  display: grid;
  row-gap: 0.4375rem;
}
/* 印は行内に置き、2行目以降をぶら下げる（flex にすると語固定の span が別の列になるため） */
.c-policy__item {
  padding-inline-start: 1.25em;
  text-indent: -1.25em;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: rgb(var(--rgb-dark) / .85);
  word-break: auto-phrase;
  text-wrap: pretty;
}
.c-policy__item::before {
  content: "・";
  display: inline-block;
  width: 1.25em;
  text-indent: 0;
  color: var(--color-accent);
}

/* 06 の窓口の表 */
.c-policy__contact {
  margin-block-start: 0.875rem;
  background: var(--color-bg-light-3);
  border: 1px solid var(--color-line-dark);
  padding: 1.125rem 1.375rem;
}
.c-policy__company {
  font-size: 0.9375rem;
  font-weight: var(--fw-bold);
  margin-block-end: 0.625rem;
  word-break: auto-phrase;
}
.c-policy__table {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1.5rem;
  row-gap: 0.5rem;
  font-size: 0.9375rem;
  color: rgb(var(--rgb-dark) / .85);
}
.c-policy__key { color: var(--color-text-dark-66); }
/* メールアドレスなど長い1語は列の幅で折り返す（375pxで横スクロール62pxが出た。2026-09-14） */
.c-policy__table dd { min-width: 0; overflow-wrap: anywhere; }

@media (min-width: 768px) {
  .c-policy { padding: 1.75rem 2rem; }
}

@media (min-width: 1240px) {
  .c-policy-layout {
    grid-template-columns: 15rem 1fr;
    grid-template-areas: "crumb crumb" "toc main";
    column-gap: 2.875rem;
  }
  .c-policy__head { font-size: clamp(1.125rem, 1.094vw, 1.3125rem); }
}


/* CF7 のフォーム直下にも同じ間隔（2026-09-11） */
.c-form__cf7 > .c-field,
.c-form__row + .c-field { margin-block-start: var(--space-4); }
/* --- Contact Form 7 用（WordPress版だけで効く。静的HTMLには CF7 の部品が無い） ----
   フォーム本体（.c-form__cf7）に .c-form__body と同じ並びを当て、部品を包む span は幅いっぱいにする。
   送信ボタンは input なので中に矢印を置けない。包みの p に矢印を描いて、文字と矢印の組が中央に来るように文字を左へ寄せる（2026-09-11） */
.c-form__body--cf7 { display: contents; }
.c-form__cf7 { margin-block-start: var(--space-9); }
.c-form__cf7 .wpcf7-form-control-wrap { display: block; }
.c-form__cf7 .c-form__submit {
  position: relative;
  width: min(100%, 37.6875rem);
  margin: var(--space-7) 0 0;
}
.c-form__cf7 .c-submit {
  width: 100%;
  margin: 0;
  padding-inline-end: calc(var(--space-8) + 4.625rem);
  cursor: pointer;
}
.c-form__cf7 .c-form__submit::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: calc(50% + 4rem);
  width: 2.125rem;
  height: 0.625rem;
  translate: 0 -50%;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='10' viewBox='0 0 36 10' fill='none' stroke='%23fff' stroke-width='1.2'%3E%3Cpath d='M0 5h35M30 1l5 4-5 4'/%3E%3C/svg%3E");
  pointer-events: none;
}
.c-form__cf7 .wpcf7-spinner { display: none; }
.c-form__cf7 .wpcf7-not-valid-tip {
  display: block;
  margin-block-start: 0.25rem;
  font-size: 0.8125rem;
  color: var(--color-accent);
}
.c-form__cf7 .wpcf7-response-output {
  margin: var(--space-6) 0 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-accent);
  font-size: 0.9375rem;
}
.c-form__cf7 .wpcf7-response-output:empty { display: none; }

@media (min-width: 1240px) {
  .c-form__cf7 .c-form__submit { margin-block-start: 6px; }
}