/* ============ Contact / Sample 共通CSS（数値はCONTACT.pdfの機械実測。1pt=1px） ============ */
@layer page {
  .p-contact {
    /* PDF実測：タイトル左端150px。privacyと同じ比率で768pxまで縮める */
    padding-inline: var(--page-padding-150);
  }

  .p-contact__title {
    /* PDF実測130px(フォントサイズ直読)。privacyのタイトルと共通 */
    font-size: clamp(8rem, 4rem + 7.5vw, 13rem);
    font-weight: var(--fw-heavy);
    line-height: 1;
    white-space: nowrap;
  }

  /* CF7デフォルトCSS(未読み込み)が本来隠す要素。無いとエラー文言用の空p/ulがそのまま見えてしまう */
  .p-contact .screen-reader-response {
    position: absolute;
    overflow: hidden;
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
  }

  /* ここから：サンプル請求の流れ（通常Contactでは使わないブロック） */
  .p-contact__flow {
    /* PDF実測：区切り線の実効幅1280pxで固定し、.p-contact内で中央寄せ */
    width: min(128rem, 100%);
    margin-inline: auto;
    margin-block-start: 4.8rem; /* PDF実測：タイトル下端からの間隔 */
  }

  .p-contact__flow-heading {
    font-size: 2.4rem; /* PDF実測24px */
    font-weight: var(--fw-bold);
  }

  .p-contact__flow-list {
    margin-block-start: 7rem; /* PDF実測：見出し下端から1番目の項目までの間隔 */
  }

  .p-contact__flow-item + .p-contact__flow-item {
    margin-block-start: 2rem; /* PDF実測：区切り線から次の見出しまでの間隔 */
  }

  /* 最後の項目以外、本文の下に区切り線を引く */
  .p-contact__flow-item:not(:last-child) {
    padding-block-end: 2rem; /* PDF実測：本文下端から線までの間隔 */
    border-block-end: 1px solid var(--color-border);
  }

  .p-contact__flow-step {
    font-size: 2rem; /* PDF実測20px */
    font-weight: var(--fw-bold);
  }

  .p-contact__flow-text {
    margin-block-start: 1.2rem;
    font-size: 1.4rem;
    line-height: 1.8;
  }

  .p-contact__lead {
    margin-block-start: 7rem; /* PDF実測：流れセクション最終行からの間隔 */
    font-size: 1.4rem;
    line-height: 1.8;
  }

  /* サンプル請求のみ流れセクションと同じ1280px幅に揃える（通常ContactはH1と左端を揃える） */
  .p-contact__flow + .p-contact__lead {
    width: min(128rem, 100%);
    margin-inline: auto;
  }

  /* ここから：フォーム本体（CF7の出力に重ねるレイアウトCSS） */
  .p-contact__form {
    margin-block-start: 9.3rem; /* PDF実測：リード文からお名前ラベルまでの距離 */
    /* PDF実測：バッジ左端〜入力欄右端の実効幅1079pxで固定し中央寄せ */
    width: min(107.9rem, 100%);
    margin-inline: auto;
    margin-block-end: 2rem;
  }

  /* fieldsetのUAデフォルト枠線が残り、中のhidden inputしか無いのに箱が見えてしまうため消す */
  .hidden-fields-container {
    margin: 0;
    padding: 0;
    border: none;
  }

  .p-contact__row {
    display: grid;
    /* PDF実測：ラベル列264px（親が1079px固定幅のため固定remでよい） */
    grid-template-columns: 26.4rem 1fr;
    align-items: center;
  }

  .p-contact__row + .p-contact__row,
  .p-contact__row + .p-contact__survey {
    margin-block-start: 4.4rem; /* PDF実測：90pxピッチ−46px入力欄高さ */
  }

  /* サンプル商品は2行の画像グリッドのため、ラベルを1行目の高さに揃える */
  .p-contact__row--sample-items {
    align-items: start;
  }

  /* お問い合わせ内容(textarea)も高さが大きいため、他の1行入力欄と同じく上端を揃える */
  .p-contact__row:has(textarea) {
    align-items: start;
  }

  /* カタログ部数は「カタログ請求」にチェックした時だけ出す(contact.js)。display:gridに[hidden]が負けるため明示 */
  .p-contact__row[hidden] {
    display: none;
  }

  .p-contact__label {
    position: relative;
    padding-inline-start: 8.35rem; /* PDF実測：バッジ幅5.5rem+隙間2.85rem */
    font-size: 1.4rem; /* PDF実測14px */
    font-weight: var(--fw-regular);
    /* 行ボックスが大きいとバッジとテキストの上下がズレるため1にする */
    line-height: 1;
  }

  /* デザイン決定：必須/任意どちらも黒背景・白文字で統一 */
  .p-contact__label .required,
  .p-contact__label .optional {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 50%;
    translate: 0 -50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.5rem; /* PDF実測55px */
    height: 2.5rem; /* PDF実測25px */
    font-size: 1.2rem; /* PDF実測12px */
    font-weight: var(--fw-bold);
    line-height: 1; /* バッジ内テキストの視覚的重心のズレを防ぐ */
    color: var(--color-text-invert);
    background-color: var(--color-text);
  }

  .p-contact__field input[type="text"],
  .p-contact__field input[type="email"],
  .p-contact__field input[type="tel"],
  .p-contact__field textarea {
    width: 100%;
    height: 4.6rem; /* PDF実測46px */
    padding-inline: 1.6rem;
    font-size: 1.4rem;
    font-family: inherit;
    background-color: var(--color-bg);
    border: 1px solid var(--color-text); /* PDF実測：入力欄の枠線は黒 */
    border-radius: 0;
  }

  /* 属性セレクタ[type="text"]分、上のルールより詳細度が高くないと負けるため合わせる */
  .p-contact__field--zip input[type="text"] {
    width: 24.5rem; /* PDF実測245px。郵便番号だけ入力欄が狭い */
  }

  .p-contact__field textarea {
    height: 27rem; /* PDF実測270px */
    padding-block: 1.6rem;
    line-height: 1.6;
    resize: vertical;
  }

  /* お問い合わせ種別：1行目に注記とチェックボックス、エラー文は注記の下から出す */
  .p-contact__inquiry {
    display: grid;
    /* デザイン実測：注記の左端から1つ目のチェックボックスまで206px */
    grid-template-columns: 20.6rem 1fr;
    align-items: center;
  }

  /* CF7の囲みを透過させ、中のチェックボックスとエラー文を上のgridに直接並べる */
  .p-contact__inquiry .wpcf7-form-control-wrap {
    display: contents;
  }

  .p-contact__inquiry .wpcf7-not-valid-tip {
    grid-column: 1 / -1;
  }

  .p-contact__inquiry-note {
    font-size: 1.4rem;
  }

  .p-contact__inquiry .wpcf7-checkbox {
    display: flex;
    flex-wrap: wrap;
    row-gap: 1.6rem;
  }

  .p-contact__inquiry .wpcf7-list-item {
    flex: 0 0 21rem; /* デザイン実測：チェックボックスの間隔210px */
    margin: 0;
  }

  .p-contact__inquiry .wpcf7-list-item:last-child {
    flex-basis: auto;
  }

  /* カタログ部数：ネイティブの矢印を消し、下向きの矢印を背景で描く */
  .p-contact__field--catalog select {
    -webkit-appearance: none;
    appearance: none;
    width: 15rem; /* デザイン実測150px */
    height: 4.6rem; /* 他の入力欄と同じ高さ */
    padding-inline: 2.4rem 4rem;
    font-size: 1.4rem;
    font-family: inherit;
    color: var(--color-text);
    background: var(--color-bg)
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpath fill='none' stroke='%23000' d='M.5.5 6 6 11.5.5'/%3E%3C/svg%3E")
      no-repeat right 1.6rem center / 1.2rem auto;
    border: 1px solid var(--color-text);
    border-radius: 0;
    cursor: pointer;
  }

  /* サンプル商品カード */
  .p-contact__sample-items {
    display: grid;
    /* 固定4列だと親幅不足ではみ出すため、auto-fitで最大183pxを保ち列数を自動で減らす */
    grid-template-columns: repeat(auto-fit, minmax(12rem, 18.3rem));
    gap: 3rem 2.48rem; /* PDF実測：行gap64.1px／列gap24.8px */
  }

  .p-contact__sample-item {
    position: relative;
  }

  /* お気に入りが空の時の案内（デザインに無い状態）。カード1枚分の幅だと細かく折り返すため行全体に広げる */
  .p-contact__sample-empty {
    grid-column: 1 / -1;
    font-size: 1.4rem;
    line-height: 1.8;
  }

  /* 上限超え・請求不可の注意（お気に入り一覧と同じ見た目）。カードの並びの上に出す */
  .p-contact__sample-alert {
    margin-block-end: 2rem;
    padding: 0.8rem 1.6rem;
    background-color: var(--color-bg);
    color: #e60012;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    line-height: 1.4;
  }

  .p-contact__sample-item-img {
    aspect-ratio: 183 / 102.9; /* PDF実測のカード比率 */
    object-fit: cover;
    background-color: var(--color-bg-alt); /* 読み込み中のちらつき防止 */
  }

  /* 品番と個数を1行に並べ、個数を右端に寄せる */
  .p-contact__sample-item-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-block-start: 0.8rem;
  }

  .p-contact__sample-qty {
    -webkit-appearance: none;
    appearance: none;
    flex-shrink: 0;
    width: 5.4rem;
    height: 2.6rem;
    padding-inline: 0.8rem 2.4rem;
    font-size: 1.2rem; /* 品番と同じ大きさ */
    font-family: inherit;
    color: var(--color-text);
    background: var(--color-bg)
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpath fill='none' stroke='%23000' d='M.5.5 6 6 11.5.5'/%3E%3C/svg%3E")
      no-repeat right 0.8rem center / 1rem auto;
    border: 1px solid var(--color-text);
    border-radius: 0;
    cursor: pointer;
  }

  .p-contact__sample-qty-text {
    flex-shrink: 0;
    font-size: 1.2rem;
  }

  .p-contact__sample-item-name {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
    font-family: "Avenir LT Std", sans-serif;
    font-size: 1.2rem; /* PDF実測12px */
    font-weight: 800;
    letter-spacing: 0.02em;
  }

  /* アンケート：コンテンツ列を左右2分割し、チェックボックスと展示会名/媒体名の開始位置を揃える */
  .p-contact__survey {
    display: grid;
    /* PDF実測：コンテンツ列815pxのうち左434px/右381pxに分かれる */
    grid-template-columns: 26.4rem 434fr 381fr;
    /* stretchだとラベルが伸びて必須バッジとテキストがズレるためstartにする */
    align-items: start;
  }

  .p-contact__survey > .p-contact__label {
    grid-column: 1;
  }

  .p-contact__survey > .p-contact__survey-question,
  .p-contact__survey > .p-contact__survey-checkboxes {
    grid-column: 2 / 4; /* コンテンツ列全体(左右まとめて)に広げる */
  }

  .p-contact__survey > .p-contact__survey-exhibition {
    grid-column: 2;
  }

  .p-contact__survey > .p-contact__survey-media {
    grid-column: 3;
  }

  .p-contact__survey-question {
    font-size: 1.6rem; /* PDF実測16px */
  }

  .p-contact__survey-checkboxes {
    margin-block-start: 3.5rem; /* PDF実測：設問文からチェックボックス1行目までの間隔 */
  }

  /* inlineの親の中でgrid化した子が縮んで中央寄りに見えるため、親をblockにする */
  .p-contact__survey-checkboxes .wpcf7-form-control-wrap {
    display: block;
  }

  /* CF7のDOM順が既に列優先のため、grid-auto-flow:columnでそのまま2列に並べる */
  .p-contact__survey .wpcf7-checkbox {
    display: grid;
    grid-template-columns: 434fr 381fr; /* 展示会名/媒体名の列幅と揃える */
    grid-auto-flow: column;
    grid-template-rows: repeat(5, auto);
    row-gap: 3.6rem; /* PDF実測：50pxピッチ−チェックボックス実高さ分 */
    /* stretchだと各項目が伸びて中のラベルの中央揃えがズレるためcenterにする */
    align-items: center;
  }

  /* c-checkbox(common.css)の見た目を流用し、文字サイズだけこのフォーム用にする */
  :is(.p-contact__survey, .p-contact__inquiry) .wpcf7-list-item > label {
    font-size: 1.4rem; /* PDF実測14px */
  }

  /* 行ボックスの下側余白で文字がチェックボックスより沈んで見えるため1にする */
  :is(.p-contact__survey, .p-contact__inquiry) .wpcf7-list-item-label {
    line-height: 1;
  }

  :is(.p-contact__survey, .p-contact__inquiry) .wpcf7-list-item > label input {
    width: 1.2rem; /* PDF実測12px */
    height: 1.2rem;
  }

  /* 未チェック時だけ白背景にする（:checkedまで上書きすると黒に反転しなくなる） */
  :is(.p-contact__survey, .p-contact__inquiry) .wpcf7-list-item > label input:not(:checked) {
    background-color: var(--color-bg);
  }

  .p-contact__survey-exhibition,
  .p-contact__survey-media {
    margin-block-start: 3.4rem; /* PDF実測：チェックボックス最終行からの間隔 */
    display: flex;
    align-items: center;
    gap: 1.2rem;
    font-size: 1.4rem;
    white-space: nowrap;
  }

  .p-contact__survey-exhibition input,
  .p-contact__survey-media input {
    width: 28rem; /* PDF実測280px */
    height: 4.6rem;
    padding-inline: 1.6rem;
    font-size: 1.4rem;
    font-family: inherit;
    background-color: var(--color-bg);
    border: 1px solid var(--color-text); /* PDF実測：入力欄の枠線は黒 */
  }

  .p-contact__submit-row {
    /* .p-contact__form自体が.p-contact内で中央寄せ済みなので、ここはtext-alignだけでよい */
    margin-block-start: 13.9rem; /* PDF実測：媒体名入力欄からボタンまでの間隔 */
    text-align: center;
  }

  .p-contact__submit {
    /* ネイティブボタンの外観で幅・高さが歪むため消す */
    appearance: none;
    -webkit-appearance: none;
    width: 22rem; /* PDF実測220px */
    height: 4.6rem;
    font-size: 1.6rem; /* PDF実測16px */
    font-weight: var(--fw-bold);
    color: var(--color-text-invert);
    background-color: var(--color-text);
    border: none;
    border-radius: 0;
    cursor: pointer;
    /* サイト共通のaホバー(opacity 0.7)とアニメーションを揃える */
    transition: opacity var(--transition-base);
  }

  @media (hover: hover) and (pointer: fine) {
    .p-contact__submit:hover {
      opacity: 0.7;
    }
  }

  /* サンプル請求で上限超え・請求不可がある間は進ませない(js側)。ホバーより後に書いて薄さを保つ */
  .p-contact__submit:disabled {
    cursor: not-allowed;
    opacity: 0.4;
  }

  /* ここから：送信エラーの表示。CF7デフォルトCSS(未読み込み)の赤字・枠をサイトの赤に置き換える */
  .p-contact .wpcf7-not-valid-tip {
    display: block;
    margin-block-start: 0.6rem;
    color: #e60012; /* サンプル請求：不可のバッジと同じ赤 */
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
  }

  /* 入力欄の黒枠(input[type])より後・同じ強さで書き、エラーの欄だけ赤枠にする */
  .p-contact__field input.wpcf7-not-valid,
  .p-contact__field textarea.wpcf7-not-valid {
    border-color: #e60012;
  }

  .p-contact .wpcf7-response-output {
    width: min(64rem, 100%);
    margin: 3rem auto 0;
    padding: 1.2rem 1.6rem;
    background-color: var(--color-bg);
    border: 1px solid var(--color-text);
    font-size: 1.4rem;
    text-align: center;
  }

  .p-contact form:is(.invalid, .unaccepted, .spam, .failed) .wpcf7-response-output {
    color: #e60012;
    border-color: #e60012;
  }

  /* 送信前・送信中は空の枠が見えるため隠す（CF7デフォルトCSSと同じ条件） */
  .p-contact form:is(.init, .resetting, .submitting) .wpcf7-response-output {
    display: none;
  }

  /* 展示会名/媒体名の2カラムがぶつかり始める手前（計算上1150px）でアンケートだけ1カラムにする */
  @media (max-width: 1150px) and (min-width: 768px) {
    .p-contact__survey {
      grid-template-columns: 26.4rem 1fr;
    }

    .p-contact__survey > .p-contact__survey-question,
    .p-contact__survey > .p-contact__survey-checkboxes,
    .p-contact__survey > .p-contact__survey-exhibition,
    .p-contact__survey > .p-contact__survey-media {
      grid-column: 2;
    }

    .p-contact__survey .wpcf7-checkbox {
      grid-template-columns: 1fr;
      grid-auto-flow: row;
    }

    .p-contact__survey-exhibition,
    .p-contact__survey-media {
      margin-block-start: 0;
    }
  }

  @media (max-width: 767px) {
    .p-contact {
      padding-inline: 2rem; /* 下層ページ共通：SP左右余白は2remに統一 */
    }

    .p-contact__title {
      /* PC130px→SP640px時143px(PDF実測)。privacyのタイトルと共通 */
      font-size: clamp(7rem, 22.3vw, 14.3rem);
      white-space: normal;
      margin-inline-start: -2.5rem;
    }

    .p-contact__flow {
      margin-block-start: clamp(3.3rem, 8.8vw, 5.6rem);
    }

    .p-contact__flow-heading {
      font-size: clamp(1.5rem, 4.6875vw, 3rem); /* 640px実測30px */
    }

    .p-contact__flow-list {
      /* 640px実測：見出し下端から89.7px */
      margin-block-start: clamp(4.485rem, 14.015625vw, 8.97rem);
    }

    .p-contact__flow-step {
      font-size: clamp(1.2rem, 3.75vw, 2.4rem); /* 640px実測24px */
    }

    .p-contact__flow-text {
      margin-block-start: 0.5rem;
      font-size: var(--fs-sp-default);
    }

    .p-contact__lead {
      /* 通常Contact：H1下端から。実測43.3pxより詰める */
      margin-block-start: clamp(1.2rem, 3.75vw, 2.4rem);
      /* デフォルト(var(--fs-sp-default)=640px時20px)より少し大きく */
      font-size: clamp(1.1rem, 3.4375vw, 2.2rem);
    }

    /* サンプル請求側のみ、流れセクション最終行からの間隔(103.3px実測)に戻す */
    .p-contact__flow + .p-contact__lead {
      margin-block-start: clamp(5.165rem, 16.140625vw, 10.33rem);
    }

    .p-contact__form {
      /* 通常Contact：リード文下端から。実測81.5pxより詰める */
      margin-block-start: clamp(3rem, 9.375vw, 6rem);
    }

    /* サンプル請求ページのみ、元の実測値(146.5px)に戻す */
    .p-contact:has(.p-contact__flow) .p-contact__form {
      margin-block-start: clamp(7.325rem, 22.890625vw, 14.65rem);
    }

    /* SP実測：サンプル商品の行も含め、各行の下に区切り線が入る */
    .p-contact__row {
      grid-template-columns: 1fr; /* SPはラベル→入力欄の縦積み */
      row-gap: clamp(
        1rem,
        3.125vw,
        2rem
      ); /* ラベルをline-height:1にして詰まって見えるため広げる */
      padding-block-end: clamp(1.5rem, 4.6875vw, 3rem); /* 640px実測30px */
      border-block-end: 1px solid var(--color-border);
    }

    .p-contact__row + .p-contact__row,
    .p-contact__row + .p-contact__survey {
      /* 640px実測30.5px(バッジ背景基準) */
      margin-block-start: clamp(1.525rem, 4.765625vw, 3.05rem);
    }

    .p-contact__row--sample-items {
      /* 640px実測：キャプション下端から線まで57.7px */
      padding-block-end: clamp(2.885rem, 9.015625vw, 5.77rem);
    }

    .p-contact__label {
      /* SP実測：PC同様バッジの右にテキスト。バッジ背景の右端からラベルまで93px */
      padding-inline-start: clamp(4.65rem, 14.53vw, 9.3rem); /* 640px実測93px */
      font-size: var(--fs-sp-default); /* 640px時20px。320pxまで比例縮小 */
    }

    .p-contact__label .required,
    .p-contact__label .optional {
      /* 640px実測値を固定せず、320pxまで比例縮小する(他の要素と同じ考え方) */
      width: clamp(3.61rem, 11.28vw, 7.22rem); /* 640px実測72.2px */
      height: clamp(1.64rem, 5.125vw, 3.28rem); /* 640px実測32.8px */
      font-size: clamp(0.8rem, 2.5vw, 1.6rem); /* 640px実測16px */
      line-height: 1; /* 日本語フォントの行ボックス非対称でテキストが中央からズレるため */
    }

    .p-contact__field input[type="text"],
    .p-contact__field input[type="email"],
    .p-contact__field input[type="tel"],
    .p-contact__field textarea {
      height: clamp(3.2rem, 10vw, 6.4rem); /* 640px実測64px */
      font-size: clamp(0.8rem, 2.5vw, 1.6rem); /* 640px実測16px */
    }

    .p-contact__field--zip input[type="text"] {
      width: clamp(17rem, 53.125vw, 34rem); /* 640px実測340px */
    }

    .p-contact__field textarea {
      height: clamp(24.2rem, 75.625vw, 48.4rem); /* 640px実測484px */
    }

    /* お問い合わせ種別：注記・チェックボックス・エラー文を縦に積み、チェックボックスは詰めて並べる */
    .p-contact__inquiry {
      grid-template-columns: 1fr;
      row-gap: clamp(1rem, 3.125vw, 2rem);
    }

    .p-contact__inquiry-note {
      font-size: var(--fs-sp-default);
    }

    .p-contact__inquiry .wpcf7-checkbox {
      column-gap: clamp(2rem, 6.25vw, 4rem);
      row-gap: clamp(1rem, 3.125vw, 2rem);
    }

    .p-contact__inquiry .wpcf7-list-item {
      flex-basis: auto;
    }

    /* 他の入力欄と同じ高さ・文字サイズにそろえ、幅は320pxまで比例縮小する */
    .p-contact__field--catalog select {
      width: clamp(15rem, 46.875vw, 30rem);
      height: clamp(3.2rem, 10vw, 6.4rem);
      font-size: clamp(0.8rem, 2.5vw, 1.6rem);
    }

    .p-contact__sample-items {
      /* 固定幅(25.28rem)だと画面が狭い時にカラムがはみ出すため可変にする */
      grid-template-columns: repeat(2, 1fr);
      gap: 2.5rem;
    }

    .p-contact__sample-empty {
      font-size: var(--fs-sp-default);
    }

    .p-contact__sample-alert {
      padding: 1rem 1.6rem;
      font-size: var(--fs-sp-default);
    }

    .p-contact .wpcf7-not-valid-tip,
    .p-contact .wpcf7-response-output {
      font-size: var(--fs-sp-default);
    }

    /* favoritesのSPはtranslateを25%にずらすが、こちらは中心を角に合わせるためc-remove-btnの50%のまま */
    .p-contact__sample-item-remove {
      width: clamp(2.25rem, 7.03125vw, 4.5rem); /* 640px時4.5rem */
      height: clamp(2.25rem, 7.03125vw, 4.5rem);
    }

    .p-contact__sample-item-remove-icon {
      width: clamp(1.5rem, 4.6875vw, 3rem); /* 640px時3rem */
      height: clamp(1.5rem, 4.6875vw, 3rem);
    }

    .p-contact__survey {
      grid-template-columns: 1fr; /* SPはチェックボックスも1カラム */
    }

    /* PC側で2/3列目に配置した要素を、SPでは全部1列目に戻す */
    .p-contact__survey > .p-contact__survey-question,
    .p-contact__survey > .p-contact__survey-checkboxes,
    .p-contact__survey > .p-contact__survey-exhibition,
    .p-contact__survey > .p-contact__survey-media {
      grid-column: 1;
    }

    .p-contact__survey-question {
      margin-block-start: clamp(1.2rem, 3.75vw, 2.4rem);
      font-size: clamp(1.1rem, 3.4375vw, 2.2rem); /* SP実測22px */
    }

    .p-contact__survey-checkboxes {
      margin-block-start: clamp(1.2rem, 3.75vw, 2.4rem);
    }

    /* CF7のDOM順のまま縦積みにする（展示会名・媒体名の移動はcontact.jsが担当） */
    .p-contact__survey .wpcf7-checkbox {
      display: flex;
      flex-direction: column;
      /* PC版のalign-items:centerが残ると項目がジグザグになるためstretchにする */
      align-items: stretch;
      width: 100%;
      row-gap: clamp(1rem, 3.125vw, 2rem);
    }

    .p-contact__survey-exhibition,
    .p-contact__survey-media {
      margin-block: 0.5rem;
      /* チェックボックスの文字と同じ大きさに揃える */
      font-size: var(
        --fs-sp-default
      ); /* 640px時20px。チェックボックステキストと同じ */
    }

    :is(.p-contact__survey, .p-contact__inquiry) .wpcf7-list-item > label input {
      width: clamp(1.2rem, 3.75vw, 2.4rem); /* 640px実測24px */
      height: clamp(1.2rem, 3.75vw, 2.4rem);
    }

    /* flexアイテムはinputではなくCF7生成のspanのため、こちらを伸ばす */
    .p-contact__survey-exhibition .wpcf7-form-control-wrap,
    .p-contact__survey-media .wpcf7-form-control-wrap {
      flex: 1;
      min-width: 0;
    }

    .p-contact__survey-exhibition input,
    .p-contact__survey-media input {
      width: 100%;
      height: clamp(3.2rem, 10vw, 6.4rem); /* 640px実測64px */
    }

    .p-contact__submit-row {
      margin-block-start: clamp(2.8rem, 8.75vw, 5.6rem); /* 640px実測56px */
    }

    .p-contact__submit {
      /* 640px実測値を上限に320pxまで比例縮小する */
      width: clamp(15rem, 46.875vw, 30rem); /* 640px実測300px */
      height: clamp(3.22rem, 10.0625vw, 6.44rem); /* 640px実測64.4px */
      font-size: clamp(1.12rem, 3.5vw, 2.24rem); /* 640px実測22.4px */
    }
  }

  /* ============ ここから：確認・完了画面（モックに無いためデザインJPGを機械実測。1920px・640px基準） ============ */

  /* PDF実測：最後の要素からフッターまで（確認169px・完了161px）。下層共通の14remより広い */
  #main:has(.p-contact--confirm) {
    padding-block-end: 16.9rem;
  }

  #main:has(.p-contact--complete) {
    padding-block-end: 16.1rem;
  }

  /* 見出しから下は、タイトルより内側の1280px幅にそろえる（左端320px） */
  .p-contact--confirm,
  .p-contact--complete {
    .p-contact__heading,
    .p-contact__steps,
    .p-contact__intro,
    .wpcf7,
    .p-contact__complete {
      width: min(128rem, 100%);
      margin-inline: auto;
    }
  }

  .p-contact__heading {
    margin-block-start: 6.4rem; /* .p-privacy__headingと同じ位置（PDF実測） */
    font-size: 2.4rem;
    font-weight: var(--fw-bold);
    line-height: 1.5;
    letter-spacing: 0.05em;
  }

  /* 01〜03の帯：3等分の線の下に番号と名前。今の段だけ黒、他はグレー */
  .p-contact__steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-block-start: 8.7rem; /* PDF実測：見出しの行の下端から線まで */
  }

  .p-contact__step {
    padding-block-start: 2.5rem; /* PDF実測：線から文字の行の上端まで */
    font-size: 2rem; /* PDF実測20px */
    font-weight: var(--fw-bold);
    line-height: 1.5;
    color: var(--color-border);
    border-block-start: 2px solid var(--color-border);

    &.is-current {
      color: var(--color-text);
      border-color: var(--color-text);
    }
  }

  .p-contact__step-number {
    margin-inline-end: 2.5rem; /* PDF実測：番号の右端から名前まで27px */
  }

  .p-contact__intro {
    margin-block-start: 9.1rem; /* PDF実測：帯の文字の行の下端から */
    font-size: 1.4rem;
    line-height: 2.143; /* PDF実測の行送り30px÷14px */
    letter-spacing: 0.2em; /* PDF実測：文字送り16.8px */
  }

  /* 確認の表（CF7の確認フォームに書いたdl）。罫線で区切った「項目名｜入力内容」の行 */
  .p-contact__confirm {
    margin-block-start: 9.5rem; /* PDF実測：説明文の行の下端から最初の罫線まで */
    border-block-start: 1px solid var(--color-border);
  }

  .p-contact__confirm-row {
    display: grid;
    grid-template-columns: 26.2rem 1fr; /* PDF実測：項目名の列262px */
    padding-block: 2.7rem 2.6rem; /* PDF実測：罫線から文字の行まで */
    font-size: 1.6rem; /* PDF実測16px */
    line-height: 2.25; /* PDF実測：アンケートの行送り36px÷16px */
    letter-spacing: 0.05em;
    border-block-end: 1px solid var(--color-border);
  }

  /* お問い合わせ内容の改行をそのまま見せる */
  .p-contact__confirm-value {
    white-space: pre-line;
    overflow-wrap: anywhere;
  }

  /* 確認画面は入力欄より列が広く5枚入ってしまうため、デザインどおり1行4枚までにする */
  .p-contact__confirm .p-contact__sample-items {
    max-inline-size: calc(18.3rem * 4 + 2.48rem * 3);
  }

  /* サンプル商品の件数（6 / 12）は項目名の下の行に出す */
  .p-contact__confirm-count {
    display: block;
  }

  .p-contact__confirm-btns {
    display: flex;
    justify-content: center;
    gap: 3rem; /* PDF実測：ボタン間30px */
    margin-block-start: 7.8rem; /* PDF実測：最後の罫線からボタン上端まで */
  }

  /* CF7が送信ボタンの後ろに足す読み込み中の印。CF7のCSSを読まないため中身が無く、gap分だけボタンを左にずらすので外す */
  .p-contact__confirm-btns .wpcf7-spinner {
    display: none;
  }

  /* 「入力画面に戻る」。Multi-Step FormsのCSSが左に浮かせて幅を70pxにするため打ち消す */
  .p-contact__back {
    float: none;
    appearance: none;
    width: 22rem; /* PDF実測220px（送信ボタンと同じ） */
    height: 4.6rem;
    margin: 0;
    font-size: 1.6rem;
    font-family: inherit;
    font-weight: var(--fw-bold);
    color: var(--color-text);
    background-color: var(--color-bg);
    border: 1px solid var(--color-text);
    border-radius: 0;
    cursor: pointer;
    transition: opacity var(--transition-base);
  }

  @media (hover: hover) and (pointer: fine) {
    .p-contact__back:hover {
      opacity: 0.7;
    }
  }

  /* 完了画面 */
  .p-contact__complete-heading {
    margin-block-start: 9.5rem; /* PDF実測：帯の文字の行の下端から */
    font-size: 2rem; /* PDF実測20px */
    font-weight: var(--fw-bold);
    line-height: 1.5;
    letter-spacing: 0.03em;
  }

  .p-contact__complete-text {
    margin-block-start: 2.6rem; /* PDF実測：見出しの行の下端から */
    font-size: 1.4rem;
    line-height: 2.143;
    letter-spacing: 0.2em;
  }

  .p-contact__notes {
    margin-block-start: 6.5rem; /* PDF実測：本文の行の下端から上の罫線まで */
    padding-block: 3.9rem 3.6rem; /* PDF実測：罫線から注意書きの行まで */
    border-block: 1px solid var(--color-border);
  }

  .p-contact__note {
    position: relative;
    padding-inline-start: 1.5em; /* PDF実測：※から本文まで21px。2行目以降も本文の位置にそろえる */
    font-size: 1.4rem;
    line-height: 2.143;
    letter-spacing: 0.2em;

    &::before {
      content: "※";
      position: absolute;
      inset-inline-start: 0;
    }
  }

  .p-contact__top-btn {
    width: 22rem; /* PDF実測220px（c-buttonの20remより広い） */
    margin-block-start: 7.8rem; /* PDF実測：下の罫線からボタン上端まで */
    margin-inline: auto;
  }

  @media (max-width: 767px) {
    #main:has(.p-contact--confirm),
    #main:has(.p-contact--complete) {
      padding-block-end: clamp(7rem, 18.9vw, 12.1rem); /* 640px実測121px */
    }

    /* 640px時の左右余白50pxから共通の2remを引いた分（404と同じ） */
    .p-contact--confirm,
    .p-contact--complete {
      .p-contact__heading,
      .p-contact__steps,
      .p-contact__intro,
      .wpcf7,
      .p-contact__complete {
        padding-inline: clamp(0rem, -2rem + 7.8125vw, 3rem);
      }
    }

    .p-contact__heading {
      margin-block-start: clamp(3.52rem, 9.4vw, 6rem); /* 640px実測60px */
      font-size: clamp(1.758rem, 4.6875vw, 3rem); /* 640px実測30px */
    }

    .p-contact__steps {
      margin-block-start: clamp(4.86rem, 12.97vw, 8.3rem); /* 640px実測83px */
    }

    .p-contact__step {
      padding-block-start: clamp(1.17rem, 3.125vw, 2rem); /* 640px実測20px */
      font-size: clamp(1.41rem, 3.75vw, 2.4rem); /* 640px実測24px */
    }

    .p-contact__step-number {
      margin-inline-end: clamp(1.35rem, 3.6vw, 2.3rem); /* 640px実測23px */
    }

    .p-contact__intro {
      margin-block-start: clamp(
        4.77rem,
        12.73vw,
        8.15rem
      ); /* 640px実測81.5px */
      font-size: var(--fs-sp-default);
      line-height: 1.8; /* PDF実測の行送り36px÷20px */
      /* PDF実測は文字送り22px(0.1em)だが、約物詰めの無いブラウザでは2行目が溢れ4行になるため詰める */
      letter-spacing: 0.08em;
    }

    .p-contact__confirm {
      margin-block-start: clamp(1.67rem, 4.45vw, 2.85rem); /* 640px実測28.5px */
    }

    .p-contact__confirm-row {
      grid-template-columns: 31.25vw 1fr; /* 640px実測：項目名の列200px */
      padding-block: clamp(2.14rem, 5.7vw, 3.65rem); /* 640px実測36.5px */
      font-size: var(--fs-sp-default);
      line-height: 1.8;
      letter-spacing: 0.1em;
    }

    /* 長い項目（お問い合わせ内容・アンケート・サンプル商品）はSPだけ項目名の下に入力内容を出す */
    .p-contact__confirm-row--stack {
      grid-template-columns: 1fr;
      row-gap: clamp(1.99rem, 5.3vw, 3.4rem); /* 640px実測34px */
    }

    .p-contact__confirm-btns {
      flex-direction: column-reverse; /* PDF実測：SPは送信が上 */
      align-items: center;
      gap: clamp(2.05rem, 5.47vw, 3.5rem); /* 640px実測35px */
      margin-block-start: clamp(5.8rem, 15.47vw, 9.9rem); /* 640px実測99px */
    }

    .p-contact__back {
      /* .p-contact__submitのSP値と同じ（640px実測300×64.4px） */
      width: clamp(15rem, 46.875vw, 30rem);
      height: clamp(3.22rem, 10.0625vw, 6.44rem);
      font-size: clamp(1.12rem, 3.5vw, 2.24rem);
    }

    .p-contact__complete-heading {
      margin-block-start: clamp(4.75rem, 12.66vw, 8.1rem); /* 640px実測81px */
      font-size: clamp(1.41rem, 3.75vw, 2.4rem); /* 640px実測24px */
    }

    .p-contact__complete-text {
      margin-block-start: clamp(1.73rem, 4.6vw, 2.95rem); /* 640px実測29.5px */
      font-size: var(--fs-sp-default);
      line-height: 1.8;
      letter-spacing: 0.1em;
    }

    .p-contact__notes {
      margin-block-start: clamp(2.31rem, 6.17vw, 3.95rem); /* 640px実測39.5px */
      padding-block: clamp(2.67rem, 7.1vw, 4.55rem)
        clamp(2.02rem, 5.4vw, 3.45rem); /* 640px実測45.5px・34.5px */
    }

    .p-contact__note {
      padding-inline-start: 1.35em; /* 640px実測：※から本文まで27px */
      font-size: var(--fs-sp-default);
      line-height: 1.8;
      letter-spacing: 0.1em;
    }

    .p-contact__top-btn {
      width: clamp(15rem, 46.875vw, 30rem); /* 640px実測300px */
      margin-block-start: clamp(5.74rem, 15.3vw, 9.8rem); /* 640px実測98px */
    }
  }
}