@charset "UTF-8";
/* ========================================
  変数
  色・フォントは :root の CSS 変数、構造値（幅・BP・z-index）は SCSS 変数で持つ
======================================== */
/* 色は summary.json colorFrequency 実データ由来。全色変数化ルール:
   デザインに新しい色が出たらここに用途ベースで追加してから使う（近似まとめ禁止） */
:root {
  /* Colors */
  --color-main: #EB6100; /* ブランドオレンジ（ページ背景・小見出し） */
  --color-accent: #22AC38; /* 緑（見出しリボン・フッター背景） */
  --color-cta: #FED800; /* 黄（ナビボタン・CTAボタン）の地色。カンプPNG実測 */
  --color-cta-stripe: #FEDE26; /* 同ボタンの斜めストライプ（明るい方）。カンプPNG実測 */
  --color-bg: #FFFFFF; /* 白（カード背景） */
  --color-bg-sub: #EEEEEF; /* 薄グレー（入力欄背景等） */
  --color-text: #231815; /* 基本テキスト */
  --color-text-sub: #7B7B7B; /* 補足テキスト */
  --color-text-inverse: #FFFFFF; /* 濃色背景上の白抜き文字 */
  --color-border: #B4B4B5; /* 入力欄等の罫線グレー */
  --color-required: #DF3E3A; /* 必須バッジ赤 */
  --color-text-strong: #333333; /* 濃色テキスト（フッター事務局名・CTAボタン文字） */
  --color-emphasis: #F01925; /* 強調赤（「レシート2店舗（2組合）分以上」・矢印装飾・「期間中何度でも応募OK！」） */
  --color-accent-light: #79BC28; /* 応募期間チップの明るい緑（交互配色） */
  --color-accent-dark: #0E8219; /* リボンの▶マーカー・右下折り返しの濃緑（カンプ実測 rgb(14,130,25)） */
  --color-form-label: #000000; /* フォームのラベル文字（実測純黒。--color-text とは別色） */
  --color-weekday: #F6B88C; /* FV日程の曜日（火）（月）の薄オレンジ（3xプレビュー実測） */
  /* エラー文言専用の赤。--color-required（必須バッジ #DF3E3A）はデザインカンプ実測値なので
     そのまま使うが、白背景でのコントラスト比が約4.29:1でWCAG AA(4.5:1)未達のため、
     .wpcf7-not-valid-tip 等のエラー文言だけ別の赤（コントラスト比 約6.53:1）に差し替える */
  --color-error-text: #B3261E;
  /* エラーになった入力欄の淡い赤地。--color-error-text を白背景に8%で重ねた値を固定色で持つ。
     rgb(from …) の相対色指定は Safari 16.4 / Chrome 119 未満で効かず、
     古い端末を使う応募者ほどエラー箇所が分からなくなるため、実値で持たせる */
  --color-error-bg: #F9EEED;
  /* 業種ごとの識別色（店舗検索の業種タイル地色・店舗紹介の業種チップで共用）。
     0808カンプ export_01gaiyou_pc.json の実値。タクソノミー industry の8タームに1対1で対応する
     （対応表は functions/member_taxonomy_style.php が正本） */
  --color-industry-barber: #2991CB; /* 理髪店 */
  --color-industry-beauty: #EA616F; /* 美容室 */
  --color-industry-cleaning: #36B9BE; /* クリーニング店 */
  --color-industry-sento: #CD6715; /* 公衆浴場（銭湯） */
  --color-industry-cinema: #53B332; /* 映画館 */
  --color-industry-ryokan: #9C2A8B; /* 旅館・ホテル */
  --color-industry-restaurant: #F18900; /* 飲食店 */
  --color-industry-sushi: #6F69AE; /* すし店 */
  /* Fonts */
  --font-primary: "Noto Sans JP", sans-serif;
  --font-second: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif; /* POP見出し・日付（NIS-Z10代替） */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 900;
}

/* 重なり順は drawer > hamburger > header。
   hamburger はヘッダーの外に出した固定ボタンなので、header より下だとヘッダーに隠れる。
   drawer はヘッダーのロゴより上に出す必要がある */
/*
 * iro code. リセットCSS 2025（本番用・コメント軽量版）
 */
/* ボックスモデル */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* マージンリセット */
body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd {
  margin: 0;
  padding: 0;
}

/* HTML基本設定 */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* rem の基準。インナー幅より広い領域ではインナーが伸びないので固定 */
  font-size: 16px;
  /* スクロールバーの領域を最初から常に確保しておく。
     ドロワーを開いてスクロールを止めたときにバーが消え、中身が横へズレるのを防ぐ。
     scrollbar-gutter は overflow:hidden だと無効になるため、ここでは使わない */
  overflow-y: scroll;
  /* インナー幅（828px）〜768px: 中身ごと等倍で縮める */
}
html {
  /* 767px以下: SPレイアウトへ切り替わるので基準を戻す */
}
html {
  /* SPデザイン基準幅（375px）以下: 再び等倍で縮める */
}

/* body基本設定 */
body {
  line-height: 1.5;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

/* リスト */
ul, ol {
  list-style: none;
}

/* 画像・メディア */
img, picture, video, canvas, svg {
  display: block;
  height: auto;
  max-width: 100%;
}

/* 見出し */
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* 段落 */
p {
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* リンク */
a {
  text-decoration: none;
}

a:not([class]) {
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
}

/* フォーム */
input, button, textarea, select {
  color: inherit;
  font: inherit;
}

textarea {
  resize: vertical;
}

input[type=submit],
input[type=button],
label, button, select {
  cursor: pointer;
}

/* アクセシビリティ配慮 */
/* ========================================
  サイト共通のベース
======================================== */
body {
  background-color: var(--color-main);
  color: var(--color-text);
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: var(--fw-normal);
}

/* pcの電話番号発信対応 */
a[href^="tel:"] {
  pointer-events: none;
}

/* ========================================
  footer
  緑全幅帯・中央揃え白テキスト（全ページ共通）
======================================== */
/* カンプ実測: 前セクションのカード下端 → 事務局見出し上端は 64px（トップ・フォームとも共通） */
.l-footer {
  background-color: var(--color-accent);
  padding-block: 4rem 3.5rem;
  text-align: center;
}

/* トップのみ: 応募条件の白カードが緑帯に食い込む（カンプ実測 84px）。
   帯を負マージンで引き上げ、その分だけ上パディングを増やして見出し位置を保つ */
.l-footer--overlap {
  margin-top: -5.25rem;
  padding-top: 9.25rem;
}

.l-footer__heading {
  color: var(--color-text-inverse); /* 修正指示[13]: カラー白 */
  font-family: var(--font-primary);
  font-size: 1.375rem;
  font-weight: var(--fw-black);
  letter-spacing: 0.08em;
  line-height: 1.706;
}

.l-footer__address {
  color: var(--color-text-inverse);
  font-size: 0.6875rem;
  font-style: normal;
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  line-height: 1.364;
  margin-top: 1rem;
}

.l-footer__address a {
  color: var(--color-text-inverse);
  text-decoration: underline;
  transition: opacity 0.3s ease-out;
}
.l-footer__address a:focus-visible {
  outline: 2px solid var(--color-text-inverse);
  outline-offset: 2px;
}

.l-footer__copyright {
  color: var(--color-text-inverse);
  font-size: 0.625rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  line-height: 1.364;
  margin-top: 1.5rem;
}

.l-footer__note {
  color: var(--color-text-inverse);
  font-size: 0.5625rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  line-height: 1.364;
  margin-top: 0.25rem;
}

/* ========================================
  header
  オレンジ帯 + 白線画店舗イラスト + 雲形ロゴ + 雲形ハンバーガー
  下層ページのみ出力（トップはFVがヘッダー一体型デザインのため）
======================================== */
.l-header {
  background-color: var(--color-main);
  overflow: hidden;
  /* カンプ実測: ロゴ雲の上端y64。下側の間隔は次セクション側の padding-top で持つ */
  padding-block: 4rem 0;
  position: relative;
  z-index: 50;
}

.l-header__inner {
  align-items: center;
  display: flex;
  justify-content: center;
}

/* 左右の店舗イラスト列: 中央からはみ出す幅で justify-content:center により左右均等に画面外へブリード */
.l-header__stores {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 1rem; /* カンプ実測: 線画同士の間隔20px − 素材の透明余白ぶん */
}

/* カンプ実測: 線画の高さ62〜69px（素材原寸の約0.26倍）。ボックス高70pxで揃える */
.l-header__store {
  display: block;
  height: 4.375rem;
  width: auto;
}

/* 表示寸は親ラッパー側で持ち、img は width:100% で追従させる */
.l-header__logo {
  flex-shrink: 0;
  margin-inline: 1.25rem;
  width: 12.5625rem; /* カンプ実測: 雲ロゴ x389-589 */
}

.l-header__logo a {
  display: block;
  transition: opacity 0.3s ease-out;
}
.l-header__logo a:focus-visible {
  outline: 2px solid var(--color-text-inverse);
  outline-offset: 2px;
}

.l-header__logo img {
  display: block;
  height: auto;
  width: 100%;
}

/* ========================================
  menu-btn（雲形ハンバーガー）
  画面に固定する。ページと一緒にスクロールすると、ビューポート基準の
  ドロワーの×ボタンと位置が食い違い、開閉のたびにボタンが動いて見えるため。
  下層ページで唯一のナビ導線なので、常に押せる状態にしておく意味もある
======================================== */
/* カンプ実測: 雲の線画 x874-939 / y35-98（素材の透明余白ぶんを外側へ足したボックス） */
.l-menu-btn {
  background-color: transparent;
  background-image: url("../img/common/burger-cloud.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border: none;
  cursor: pointer;
  /* 白カードの上に重なると雲が同化するため、雲の形に沿った影で浮かせる */
  filter: drop-shadow(0 2px 6px rgb(from var(--color-text) r g b/30%));
  height: 4.625rem;
  padding: 0;
  position: fixed;
  right: 2.1875rem;
  top: 1.875rem;
  width: 4.75rem;
  z-index: 55;
}

.l-menu-btn:focus-visible {
  outline: 2px solid var(--color-text-inverse);
  outline-offset: 2px;
}

/* 3本線は雲（背景画像）の中心に置く。雲は素材の透明余白を含めてボックスと同じ中心に載るため、
   ボックス中心 = 雲の中心。
   PCはボックス高74px → 中心37px、線ピッチ8pxで 28/36/44（線の中心 29/37/45）。
   SPはボックス高56px → 中心28px、線ピッチ7pxで 20/27/34（線の中心 21/28/35） */
.l-menu-btn__line {
  background-color: var(--color-main);
  border-radius: 0.0625rem;
  height: 0.125rem;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  transition: transform 0.3s ease-out, opacity 0.3s ease-out, top 0.3s ease-out;
  width: 1.625rem;
}

.l-menu-btn__line:nth-of-type(1) {
  top: 1.75rem;
}

.l-menu-btn__line:nth-of-type(2) {
  top: 2.25rem;
}

.l-menu-btn__line:nth-of-type(3) {
  top: 2.75rem;
}

.l-menu-btn.is-open .l-menu-btn__line:nth-of-type(1) {
  top: 2.25rem;
  transform: translateX(-50%) rotate(45deg);
}

.l-menu-btn.is-open .l-menu-btn__line:nth-of-type(2) {
  opacity: 0;
}

.l-menu-btn.is-open .l-menu-btn__line:nth-of-type(3) {
  top: 2.25rem;
  transform: translateX(-50%) rotate(-45deg);
}

/* ========================================
  drawer
  デザインカンプに無いためコーダー判断。トップのページ内ナビ（黄色ピル）と
  同じ見た目に揃えたキャンペーン調。本デザインはPC/SP問わずハンバーガーが
  唯一のナビ導線のため、PC幅でドロワーを隠す分岐は設けない
======================================== */
/* visibility は離散プロパティで、時間を持つ transition だと切り替わりが中間まで遅れる。
   開くときは即座に visible（開いた直後にフォーカスを移せる）、
   閉じるときはスライドアウトを見せてから hidden にする */
.l-drawer {
  inset: 0;
  opacity: 0;
  position: fixed;
  transition: opacity 0.25s ease-out, visibility 0s linear 0.25s;
  visibility: hidden;
  z-index: 60;
}

.l-drawer.is-open {
  opacity: 1;
  transition: opacity 0.25s ease-out, visibility 0s linear 0s;
  visibility: visible;
}

/* 開いたときにフォーカスを受ける器なので、そこにリングは出さない（中の項目には出る） */
.l-drawer:focus {
  outline: none;
}

/* 画面全体をオレンジで覆う。右側だけのパネルにすると下半分が空いて間延びするため、
   メニューを画面中央に置いて上下左右の余白を均す。メニュー以外の余白クリックでも閉じる */
.l-drawer__panel {
  background-color: var(--color-main);
  display: flex;
  flex-direction: column;
  inset: 0;
  overflow-y: auto;
  padding-block: 5rem 3rem;
  padding-inline: 1.5rem;
  position: absolute;
}

/* margin:auto で中央寄せする（justify-content:center は内容がはみ出したとき上が切れる） */
.l-drawer__inner {
  margin-block: auto;
  width: 100%;
}

/* 閉じる（×）ボタン: ハンバーガーと同じ雲形を、同じ位置にぴったり重ねて置く。
   スクロールする .l-drawer__panel の中に入れるとパネル側のスクロールバーぶん内側へズレるため、
   スクロールしない .l-drawer 直下に置いて基準をビューポートに揃える */
.l-drawer__close {
  background-color: transparent;
  background-image: url("../img/common/burger-cloud.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border: none;
  cursor: pointer;
  display: block;
  filter: drop-shadow(0 2px 6px rgb(from var(--color-text) r g b/30%)); /* ハンバーガーと同じ見た目に揃える */
  height: 4.625rem;
  padding: 0;
  position: absolute;
  right: 2.1875rem;
  top: 1.875rem;
  width: 4.75rem;
  z-index: 1;
}

.l-drawer__close:focus-visible {
  outline: 2px solid var(--color-text-inverse);
  outline-offset: 2px;
}

.l-drawer__close-line {
  background-color: var(--color-main);
  border-radius: 0.0625rem;
  height: 0.125rem;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 1.625rem;
}

.l-drawer__close-line:nth-of-type(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}

.l-drawer__close-line:nth-of-type(2) {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.l-drawer__logo {
  margin-inline: auto;
  width: 11.875rem;
}

.l-drawer__logo img {
  display: block;
  height: auto;
  width: 100%;
}

.l-drawer__nav {
  margin-top: 2.5rem;
}

/* 同じボタンの繰り返し → grid + gap（トップのページ内ナビと同じ組み方） */
.l-drawer__nav-list {
  display: grid;
  gap: 1.25rem 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-inline: auto;
  max-width: 39.5rem;
}

/* .c-btn（黄色ストライプのピル）を土台に、トップのページ内ナビと同じ枠線と影を足す。
   .c-btn の width:fit-content より後に効かせるため item を含めた詳細度にする */
.l-drawer__nav-item .l-drawer__nav-link {
  border: 2px solid var(--color-text);
  box-shadow: 3px 4px 0 rgb(from var(--color-text) r g b/25%);
  font-size: 1.0625rem;
  letter-spacing: 0.08em;
  line-height: 1.3;
  min-height: 4.0625rem; /* トップのページ内ナビと同じ高さ */
  padding-block: 0.625rem;
  padding-inline: 1rem;
  width: 100%;
}

.l-drawer__nav-link:focus-visible {
  outline: 2px solid var(--color-text-inverse);
  outline-offset: 3px;
}

/* 「組合店舗向け」バッジ（トップのナビと同じ扱い） */
.l-drawer__nav-link:has(.l-drawer__nav-badge) {
  flex-direction: column;
  padding-block: 0.5rem;
}

.l-drawer__nav-badge {
  background-color: var(--color-accent);
  border-radius: 999px;
  color: var(--color-text-inverse);
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  line-height: 1.2;
  margin-bottom: 0.1875rem;
  padding-block: 0.125rem;
  padding-inline: 0.875rem;
}

/* ========================================
  インナー（コンテンツ幅ラッパー）
  デザイン(PC 980px)基準。中の白カードは各セクションで max-width: rem(634) を指定する
  外形は $inner（780px + 左右24px）。この幅を下回ると html の font-size ごと等倍で縮む
======================================== */
.inner {
  margin-inline: auto;
  max-width: 51.75rem;
  padding-inline: 1.5rem;
}

/* ========================================
  btn
  黄色ピル型CTA（応募フォーム/申し込む/さらに表示 共通）
  斜めストライプは既存トークン(--color-bg)の白を薄く重ねて合成
======================================== */
.c-btn {
  align-items: center;
  background-color: var(--color-cta);
  /* カンプPNG実測: 水平方向の周期17px・傾き45度（左上→右下）= 垂直方向の帯幅6px */
  background-image: repeating-linear-gradient(135deg, var(--color-cta-stripe) 0 0.375rem, var(--color-cta) 0.375rem 0.75rem);
  border: none;
  border-radius: 999px;
  color: var(--color-text-strong);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-primary);
  font-size: 1.0625rem;
  font-weight: var(--fw-bold);
  justify-content: center;
  line-height: 1;
  padding-block: 1rem;
  padding-inline: 2rem;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.3s ease-out;
  width: -moz-fit-content;
  width: fit-content;
}
.c-btn:focus-visible {
  outline: 2px solid var(--color-text-strong);
  outline-offset: 2px;
}

/* CF7は同意チェックが外れている間 .wpcf7-submit に disabled をIDLプロパティで直接付け外しする
   （本体JS a.disabled=!n.checked）。黄色地＋斜めストライプのまま無反応だと「壊れている」と
   誤認されるため、彩度を落として押せないことを見た目で伝える */
.c-btn:disabled,
.c-btn[disabled] {
  background-color: var(--color-bg-sub);
  background-image: none;
  color: var(--color-text-sub);
  cursor: not-allowed;
}

/* 応募フォーム（トップ参加方法）用: カード内幅いっぱいのワイド表示（カンプ実測530px）。
   幅を固定するとSPで画面外へはみ出すため、上限として指定する */
.c-btn--wide {
  max-width: 33.125rem;
  width: 100%;
}

/* さらに表示（お知らせ）用: 緑背景・白文字・ストライプ無し */
.c-btn--green {
  background-color: var(--color-accent);
  background-image: none;
  color: var(--color-text-inverse);
}

/* 店舗検索の「店舗を検索」用: カンプ実測 328x38（外形38px = fs18 + padding-block 10px×2）。
   トップ・フォームの CTA（外形49px）より一回り小さい */
.c-btn--compact {
  font-size: 1.125rem;
  letter-spacing: 0.1em;
  max-width: 20.5rem;
  padding-block: 0.625rem;
  width: 100%;
}

/* 参加店舗紹介の「店舗検索に戻る」用: カンプ実測 343x55・濃色1.8pxの枠付き */
.c-btn--outline {
  border: 0.125rem solid var(--color-text);
  font-size: 1.125rem;
  letter-spacing: 0.12em;
  max-width: 21.4375rem;
  padding-block: 0.9375rem;
  width: 100%;
}

/* ========================================
  chip
  地域（市区町村）・業種のラベルチップ。参加店舗紹介ページの店名右に並ぶ

  カンプ実測（0808カンプ 参加店舗紹介）
    103x24 / fs15 w700 / letter-spacing 1.8px(=0.12em) / 白文字 / 角丸 4px
    地域チップ = --color-main / 業種チップ = 業種ごとの識別色（--color-industry-*）
  幅103pxは「山口市」「飲食店」のときの実測値。ターム名は長短があるので固定せず
  min-width として持たせ、長いターム名では内容に合わせて伸ばす
======================================== */
.c-chip {
  align-items: center;
  background-color: var(--color-main);
  border-radius: 0.25rem;
  color: var(--color-text-inverse);
  display: inline-flex;
  font-family: var(--font-primary);
  font-size: 0.9375rem;
  font-weight: var(--fw-bold);
  justify-content: center;
  letter-spacing: 0.12em;
  line-height: 1.2;
  min-width: 6.4375rem;
  padding-block: 0.1875rem;
  padding-inline: 0.75rem;
}

/* 業種チップの地色は業種ごとに変わる。PHP 側（member_taxonomy_style.php）が
   ターム名から --chip-color を出し分けて style 属性で渡す */
.c-chip--industry {
  background-color: var(--chip-color, var(--color-main));
}

/* ========================================
  page-title
  下層ページのページタイトル（店舗検索 / 参加店舗紹介 / 応募フォーム 共通）
  オレンジ背景の上に白抜きで置く大見出し

  カンプ実測（0808カンプ 3アートボード共通）
    fs30 / w700 / letter-spacing 10.8px(=0.36em) / #ffffff / 中央寄せ
    ヘッダー下端297 → タイトル上端313（+16） → カード上端394
    ※ 元データの line-height は 27（fontSize 30 より小さくグリフが切れる）ため 1.1 を採用
======================================== */
.c-page-title {
  color: var(--color-text-inverse);
  font-family: var(--font-primary);
  font-size: 1.875rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.36em;
  line-height: 1.1;
  text-align: center;
  /* letter-spacing は最後の1文字の後ろにも入る。中央寄せだと文字列が字間の半分だけ左へ
     ずれるため、字間ぶんの text-indent を足して打ち消す（indent は行頭に入り、
     中央寄せでは行幅の増加と相殺されて実効ズレが +indent/2 になる） */
  text-indent: 0.36em;
}

/* ========================================
  ribbon
  緑の帯見出し（デジタルレシートラリーとは/参加方法/応募条件/参加店舗登録フォーム 共通）

  「右下がめくれた紙」の作り: .c-ribbon 自体は clip-path を持たない箱にして、
  帯本体と影を疑似要素に分ける（本体に clip-path を掛けると影がはみ出せなくなるため）
    ::after  = 帯本体。地色＋斜めストライプ＋▶＋右下のめくれを背景レイヤーで重ね、
               右下角を clip-path で斜めにカットする
    ::before = 紙の影。本体と同じ形を左端支点でわずかに回転させ、下に敷く

  カンプ実測（2x書き出し・カンプ拡大キャプチャ）
    帯高 35px / 右下カット 13x9.5px / ▶ 左10px・12x18px / めくれ 14x12px
    ストライプ 垂直から約35°・周期10px（明部は白9%）
    左右padding 27px / 30px（▶は左paddingの中に入る）
======================================== */
.c-ribbon {
  color: var(--color-text-inverse);
  display: block;
  font-family: var(--font-primary);
  font-size: 1.1875rem; /* カンプ実測: fs18.852 */
  font-weight: var(--fw-black);
  isolation: isolate; /* 疑似要素の z-index:-1/-2 を .c-ribbon の中に閉じ込める */
  letter-spacing: 0.0700190961em; /* カンプ実測: 参加方法/応募条件/参加店舗登録フォーム = 1.32px @ fs18.852 */
  line-height: 1;
  padding-block: 0.5rem;
  padding-inline: 1.6875rem 1.875rem;
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
}

/* 「デジタルレシートラリーとは」のみ字間が詰まる（カンプ実測 0.01em） */
.c-ribbon--tight {
  letter-spacing: 0.0100785063em; /* カンプ実測: 0.19px @ fs18.852 */
}

/* 帯本体。背景レイヤーは上から ▶上半分 / ▶下半分 / めくれ / ストライプ の順
   - ▶ は2枚の linear-gradient のハードストップ（対角線）で三角形を作る。
     background-position の % は「箱の高さ - 画像の高さ」基準なので、
     上下センター合わせは calc(50% ∓ 4.5px)（= 画像高9pxの半分）になる
   - めくれは書き出し画像を multiply 合成する。書き出し PNG の中身は帯と同じ
     ストライプ地（不透明度84%）で、カンプもこれを乗算して濃緑を作っている */
.c-ribbon::after {
  background-blend-mode: normal, normal, multiply, normal;
  background-color: var(--color-accent);
  background-image: linear-gradient(to top right, var(--color-accent-dark) 50%, transparent 50%), linear-gradient(to bottom right, var(--color-accent-dark) 50%, transparent 50%), url("../img/common/ribbon-fold.png"), repeating-linear-gradient(125deg, rgb(from var(--color-bg) r g b/9%) 0 0.3125rem, transparent 0.3125rem 0.625rem);
  background-position: left 0.625rem top calc(50% - 0.28125rem), left 0.625rem top calc(50% + 0.28125rem), right -0.0625rem bottom, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-size: 0.75rem 0.5625rem, 0.75rem 0.5625rem, 0.875rem 0.75rem, auto;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.59375rem), calc(100% - 0.8125rem) 100%, 0 100%);
  content: "";
  inset: 0;
  position: absolute;
  z-index: -1;
}

/* 紙の影。左端は本体と重なって見えず、右へ行くほど厚くなる（カンプの見え方に合わせる）

   影の落差は「リボン幅に比例させない」こと。回転（transform: rotate）で作ると
   落差 = 幅 × tan(角度) になり、短いラベル（参加方法/応募条件/店舗検索 = 幅143px）で
   長いラベル（デジタルレシートラリーとは = 幅283px）の半分しか出ず影が消える。
   カンプ実測は幅によらず右端 約2.9px・左端0（見え始めは幅の約1/3地点）なので、
   本体より 3px 高い箱を clip-path で斜めに切り、下辺を -1.5px→+3px の一定量で振る。 */
.c-ribbon::before {
  background-color: rgb(from var(--color-text-sub) r g b/30%); /* カンプ実測 #7B7B7B @30% */
  /* 100% = 本体高 + 3px。右下カットは本体の位置から一律 3px 下げ、
     最後の頂点 (0, 100% - 4.5px) = 本体下端 - 1.5px で左端を本体に潜り込ませる */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.59375rem), calc(100% - 0.8125rem) 100%, 0 calc(100% - 0.28125rem));
  content: "";
  inset: 0 0 -0.1875rem; /* 下へ3px（=右端の影の厚み）はみ出させる */
  position: absolute;
  z-index: -2;
}

/* ========================================
  about
  デジタルレシートラリーとは（オレンジ背景 + 白カード + 緑リボン見出し）
======================================== */
.p-about {
  /* セクション間隔: 実測（お知らせカード下端1136 → 本カード上端1200 = 64px） */
  padding-top: 4rem;
}

/* .inner は共通ガター（780px基準）のまま使用し、カード自体を実測635px幅に個別制約する
   （p-newsのカードと同一パターン: .innerは上書きせず、カード側にmax-width+margin-inline:auto） */
.p-about__card {
  background-color: var(--color-bg);
  border-radius: 1rem; /* AIから角丸数値は取得不可のためpreview目視の近似値 */
  margin-inline: auto;
  max-width: 39.625rem;
  padding-block: 1.5rem;
  padding-inline: 1.5625rem; /* 実測: 本文開始x199 - カード左端x173 = 26px */
  position: relative;
}

.p-about__body {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  margin-top: 0;
}

.p-about__text {
  min-width: 0;
}

.p-about__lead {
  color: var(--color-text-strong);
  font-size: 0.875rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em; /* カンプ実測: 0.04em (=0.56px) */
  line-height: 1.429;
  margin-top: 1.0625rem; /* 実測: リボン下端1262 → 本文上端1279 */
}

.p-about__emphasis {
  color: var(--color-emphasis);
}

/* 赤い下向き矢印（単色塗りの単純図形はCSS疑似要素/borderで実装可）
   カンプ実測: 46x14px（y1326→1339・中心x394）。テキスト列内で中央寄せ。
   border は装飾の罫線ではなく三角形そのものの寸法なので rem で持たせる */
.p-about__arrow {
  border-left: 1.4375rem solid transparent;
  border-right: 1.4375rem solid transparent;
  border-top: 0.875rem solid var(--color-emphasis);
  display: block;
  height: 0;
  margin-inline: auto;
  margin-top: 0.6875rem;
  width: 2.875rem;
}

.p-about__note {
  color: var(--color-text-strong);
  font-size: 0.875rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  line-height: 1.429;
  margin-top: 0.125rem; /* カンプ実測: 矢印下端1339 → 注記1行目1346 */
}

/* 吹き出し「レシートを撮影して応募!」込みの1枚画像（カンプ書き出し 2x: 403x487 → 等倍 202x244px）。
   画像内の内訳（等倍換算）: 吹き出し 140x75px（画像上端 y0 / 右端は画像右端から4px内側）、
   イラスト 165x182px（画像上端から 61.5px 下・画像下端まで）。いずれもカンプ実測値と一致する */
.p-about__figure {
  flex-shrink: 0;
  /* 上-72px: 画像上端をカード上端の48px上へ出し、吹き出しをカード右上へはみ出させる
     （カンプ実測: 吹き出し上端 y1152 / カード上端 y1200・イラスト上端 y1214）
     下-10px: イラスト下端がカード下パディングへ食い込み、カード高210pxを作る */
  margin-block: -4.5rem -0.625rem;
  /* 右-21px=吹き出し右端をカード右端から8px内側に置くカンプ実測値（イラスト左端はx601に来る）
     左14px=旧素材にあった余白（約11px）が新素材では無くなった分を差し引いた値。テキスト列を
     389px確保してリード文を2行に収める（修正指示[5]。383px未満で3行に折り返す） */
  margin-inline: 0.875rem -1.3125rem;
  max-width: none;
  width: 12.625rem;
}

.p-about__figure img {
  display: block;
  height: auto;
  width: 100%;
}

/* ========================================
  form
  参加店舗登録フォーム（page-entry-store.php / CF7再構築）
  カード幅634px・padding-inline実測(201-173=28 / 807-776=31 → 28px採用)
  行間は実測(17〜18px:通常行 / 8〜9px:所在地・ご担当者の子行 / 29〜62px:グループ間)を
  20px(モバイル基準) / 18px(通常行) / 10px(子行) / 40px(グループ間)の4段階に丸めて使用

  PCは2カラム（label/legend列 + input列）。SPは mq("md") 側で1カラムに戻す
======================================== */
/* ウェブサイト・SNS入力欄の隠しラベルは object/utility/_visually_hidden.scss の .u-visually-hidden を使う */
.p-form {
  /* カンプ実測: ヘッダー下端258 → カード上端313 / カード下端1518 → フッター緑上端1561 */
  padding-block: 3.5rem 2.6875rem;
}

.p-form__card {
  background-color: var(--color-bg);
  border-radius: 1.25rem; /* AIはradius値を取得不可のためpreview3xの角丸カーブを目視で実測 */
  margin-inline: auto;
  max-width: 39.625rem;
  /* カンプ実測: カード上端313→リボン上端336 / ボタン下端1470→カード下端1518 */
  padding-block: 1.4375rem 3rem;
  padding-inline: 1.9375rem; /* カンプ実測: カード左端173 → 本文左端204 */
}

/* .c-ribbon は共通コンポーネント（編集禁止）。ページ固有の下余白はマルチクラスで付与 */
.p-form__title {
  margin-bottom: 2rem; /* カンプ実測: リボン下端370 → 1行目上端402 */
}

/* リード文（カンプ有りの参加店舗登録フォームには無い。応募フォーム等の説明文で使う） */
.p-form__lead {
  color: var(--color-text-strong);
  font-size: 0.875rem;
  font-weight: var(--fw-normal);
  line-height: 1.75;
  margin-block: 1rem 1.5rem;
}

/* セクション見出し（c-ribbon）直下に置く補足文（例:「レシートは1枚から応募できます。
   2枚目以降は任意です。」A-9）。p-form__lead はフォーム冒頭の説明文、p-form__note は
   セクションごとの補足という役割分担 */
.p-form__note {
  color: var(--color-text-sub);
  font-size: 0.8125rem;
  font-weight: var(--fw-normal);
  line-height: 1.6;
  margin-top: 0.5rem;
}

/* CF7フォーム未生成時のフォールバック表示 */
.p-form__notice {
  color: var(--color-text);
  font-size: 0.9375rem;
  font-weight: var(--fw-normal);
  line-height: 1.5;
}

/* ---- 通常行（店名・フリガナ・電話番号・営業時間・定休日） ----
   PC: 内容幅572px を ラベル列200px + 間隔32px + 入力欄340px に配分。
   クライアント指示で、カンプ実測の 184px:390px（間隔0px）から入力欄を狭め、間隔を確保した */
.p-form__row {
  align-items: center;
  display: flex;
  -moz-column-gap: 2rem;
  column-gap: 2rem;
  margin-top: 1rem; /* カンプ実測: 入力欄下端 → 次の入力欄上端 */
}

.p-form__row:first-child {
  margin-top: 0;
}

/* グループ直後の通常行だけ広い（カンプ実測: 建物名下端600 → 電話番号上端640） */
.p-form__fieldset + .p-form__row {
  margin-top: 2.5rem;
}

.p-form__label,
.p-form__sublabel,
.p-form__legend {
  color: var(--color-form-label);
  font-weight: var(--fw-normal);
  line-height: 1.111;
}

.p-form__label,
.p-form__legend {
  font-size: 1.125rem;
}

/* ラベルは「ラベル文字列 + 必須バッジ」の2列グリッド。文字列側に固定幅を持たせることで、
   文字数が違っても必須バッジの左端が揃う（label 直下のテキストノードは匿名グリッドアイテムになる）。
   minmax の max-content 側は、固定幅に収まらない長いラベル（応募フォームの「メールアドレス」等）で
   列を伸ばし、折り返しを防ぐための保険 */
.p-form__label,
.p-form__sublabel {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(5em, max-content) max-content;
  -moz-column-gap: 1rem;
  column-gap: 1rem;
}

.p-form__label {
  flex: 0 0 12.5rem;
}

.p-form__sublabel {
  font-size: 1rem;
  letter-spacing: 0.04em; /* JSON実測: サブラベル(市町/番地/建物名/お名前 等) letterSpacingEm 0.04 */
}

/* ご担当者グループは「メールアドレス」(7文字)が最長。この列だけ広く取って中で揃える */
.p-form__fieldset--person .p-form__sublabel {
  grid-template-columns: 7.5em max-content;
}

/* ラベル内ではグリッドの column-gap で間隔を作るため、バッジ自身は margin を持たない。
   所属組合の見出し（p 要素・グリッドではない）だけ従来どおり margin で離す。

   top: 0.084em は光学中央の補正。和文の字面（インク）は行ボックスの中央より約1px下にあるため、
   行ボックス基準で中央に置くとバッジだけ1px浮いて見える（上のはみ出し2px・下0pxになる）。
   数値を変えるときは「文字の字面上端→バッジ上端」と「バッジ下端→字面下端」が等しくなるかで確認する */
.p-form__required {
  align-items: center;
  background-color: var(--color-required);
  border-radius: 0.25rem;
  color: var(--color-text-inverse);
  display: inline-flex;
  flex-shrink: 0;
  font-size: 0.75rem; /* JSON実測 12.26px */
  font-weight: var(--fw-medium);
  justify-content: center;
  line-height: 1.334;
  padding-block: 0.125rem;
  padding-inline: 0.5rem;
  position: relative;
  top: 0.084em;
  vertical-align: middle;
  white-space: nowrap;
  /* 補正量はラベルの文字サイズに比例する。SPはラベルが小さくなるぶん控えめにする */
}

.p-form__legend .p-form__required {
  margin-left: 0.625rem;
}

/* 添付画像②〜⑩のような「任意」項目の明示に使う（A-9）。p-form__required と対になるが、
   必須より控えめに見せるためグレー系にする（サイズ・角丸・余白は p-form__required に揃える） */
.p-form__optional {
  align-items: center;
  background-color: var(--color-bg-sub);
  border-radius: 0.25rem;
  color: var(--color-text-sub);
  display: inline-flex;
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  justify-content: center;
  line-height: 1.334;
  padding-block: 0.125rem;
  padding-inline: 0.5rem;
  position: relative;
  top: 0.084em; /* p-form__required と同じ光学中央の補正 */
  vertical-align: middle;
  white-space: nowrap;
}

.p-form__control {
  flex: 1 1 auto;
  margin-top: 0;
}

/* ---- グループ（所在地・店舗画像・ウェブサイト/SNS・ご担当者・所属組合）
   fieldset/legend ではなく div[role="group"] + aria-labelledby を使う。
   legend はブラウザが fieldset の枠として別扱いするため Grid の子にならず、
   親ラベルをサブラベルと同じ行に並べられないため（カンプは同一行）。

   PC: CSS Gridでlegend列(row1・col1)と子行列(col2・各行に自動配置)に分割。
   子行はcol2を明示指定するのみで行番号を持たないため、auto-flowでlegendと同じrow1のcol2から
   順に積み上がり、legendと1行目の子要素が自動的に上端で揃う。

   SPはグループ内の子行(16px)・通常行(20px)との差が付くまでグループの境界が読めないため、
   40px まで広げて「ここから別項目」を余白で示す（クライアント指示 SP-2/SP-3。PCは28px） ---- */
/* グループ前の余白はカンプ実測どおりグループごとに異なる
   （フリガナ→所在地16 / 定休日→店舗画像29 / 店舗画像→ウェブサイト28 /
     ウェブサイト→ご担当者61 / ご担当者→所属組合62） */
.p-form__fieldset {
  display: grid;
  margin-top: 1.75rem;
  row-gap: 0.5rem; /* カンプ実測: 子行のピッチ38px − 入力欄高30px */
}

.p-form__fieldset--address {
  margin-top: 1rem;
}

.p-form__fieldset--person {
  margin-top: 3.8125rem;
}

/* ご担当者の次に来るグループ（業種）だけ広い。
   業種→地域→所属組合の選択肢グループ同士は既定の28pxで続ける */
.p-form__fieldset--industry {
  margin-top: 3.875rem;
}

.p-form__legend {
  grid-column: 1;
  grid-row: 1;
}

.p-form__legend--website {
  display: flex;
  flex-direction: column;
}

.p-form__legend-note {
  color: var(--color-form-label);
  /* JSON実測: ウェブサイト・SNS本体と同じ #000000（グレーではない）。サイズのみ18→16に縮小 */
  display: block;
  font-size: 0.875rem;
  font-weight: var(--fw-normal);
  line-height: 1.444;
  margin-top: 0.125rem;
}

/* PCの縦余白は grid の row-gap に一本化する（margin は 0）。
   SP は2カラムに組めないため、親ラベル直下は詰めて子行同士は空ける＝余白で階層を作る。
   詳細度が同じ並びは元の記述順を保ち、SPでの勝ち負けを変えない */
.p-form__subrow {
  grid-column: 2;
  margin-top: 0;
}

.p-form__legend + .p-form__subrow {
  grid-column: 2;
  margin-top: 0;
}

.p-form__subrow + .p-form__subrow {
  grid-column: 2;
  margin-top: 0;
}

.p-form__subrow--full {
  grid-column: 2;
  margin-top: 0;
}

.p-form__legend + .p-form__subrow--full {
  grid-column: 2;
  margin-top: 0;
}

.p-form__control--narrow {
  margin-top: 0.375rem;
}

/* 所在地・店舗画像・ご担当者: legend列18.8%(実測108/575)、子行は sublabel27.8% : input72.1% */
.p-form__fieldset--address,
.p-form__fieldset--image,
.p-form__fieldset--person {
  grid-template-columns: 18.8% 1fr;
}

/* カンプでは親ラベル（所在地・店舗画像・ご担当者）が1行目のサブラベルと同じ高さに並ぶ。
   グリッド1行目は入力欄の高さで決まるため、legend は行の中央に置く */
.p-form__fieldset--address .p-form__legend,
.p-form__fieldset--image .p-form__legend,
.p-form__fieldset--person .p-form__legend {
  align-self: center;
}

/* 子行も通常行と同じくラベル列と入力欄の間に32pxを取る（クライアント指示） */
.p-form__fieldset--address .p-form__subrow,
.p-form__fieldset--image .p-form__subrow,
.p-form__fieldset--person .p-form__subrow {
  align-items: center;
  display: flex;
  -moz-column-gap: 2rem;
  column-gap: 2rem;
}

/* 子行の幅464px を ラベル列140px + 間隔32px + 入力欄292px に配分。
   ラベル列は「ラベル文字5em(80px) + 間隔16px + バッジ40px = 136px」を収める幅 */
.p-form__fieldset--address .p-form__sublabel,
.p-form__fieldset--image .p-form__sublabel {
  flex: 0 0 8.75rem;
}

/* ご担当者のみラベル列を広く取る。カンプの「メールアドレス」には必須バッジが無いため
   129pxで収まるが、本実装はバッジを出す方針（ユーザー確認済み）で
   「メールアドレス7.5em(120px) + 間隔16px + バッジ40px = 176px」が必要 */
.p-form__fieldset--person .p-form__sublabel {
  flex: 0 0 11.25rem;
}

.p-form__fieldset--address .p-form__control--narrow,
.p-form__fieldset--image .p-form__control--narrow,
.p-form__fieldset--person .p-form__control--narrow {
  flex: 1 1 auto;
  margin-top: 0;
}

/* ウェブサイト・SNS: legend列は通常行と同じ32%、入力は縦積みのまま68%幅 */
.p-form__fieldset--website {
  grid-template-columns: 32% 1fr;
}

/* legend は「ウェブサイト・SNS」＋「※URLを入力」の2行あり、1行目に置くと
   1行目の高さを押し上げて入力欄の間隔がカンプより広がる。左列全体にまたがらせる
   （カンプでも注記は2つめの入力欄の左に来る） */
.p-form__fieldset--website .p-form__legend {
  align-self: start;
  grid-row: 1/span 3;
}

/* file入力（店舗画像）: カンプは「ファイルを選択」の枠付きボタンのみ。
   入力欄そのものの枠は外し、::file-selector-button をカンプ実測（183x31px）の枠に整える。
   選択したファイル名はボタンの右に出したいので入力欄側の幅は絞らない */
/* ボタンとファイル名を flex アイテムにして、行ボックスのベースライン送りを挟まずに
   ラベル（添付画像）と上下中央で揃える */
.p-form .wpcf7-form-control[type=file] {
  align-items: center;
  background-color: transparent;
  border: none;
  color: var(--color-text);
  display: flex;
  font-size: 0.8125rem;
  padding: 0;
  width: 100%;
}

.p-form .wpcf7-form-control[type=file]::file-selector-button {
  background-color: var(--color-bg);
  border: 1px solid var(--color-text);
  border-radius: 0;
  color: var(--color-text);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8125rem;
  margin-right: 0.5rem;
  padding-block: 0.3125rem;
  transition: background-color 0.3s ease-out;
  width: 11.4375rem;
}
/* CF7 は入力を inline の span で包むため、そのままだと行ボックスの余白（leading）が
   入力欄の高さに上乗せされる。ブロック化して行の高さを入力欄そのものに揃える */
.p-form .wpcf7-form-control-wrap {
  display: block;
}

/* ---- テキスト系入力（CF7出力の内部要素は子孫セレクタで指定） ----
   カンプ実測: PCの入力欄は外形30px（枠1px込み）。padding + 行送りで作る。
   SPはタップしやすい高さを確保する（カンプはPCのみ・SPはコーダー判断） */
.p-form .wpcf7-form-control:is([type=text], [type=tel], [type=email], [type=url]) {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 0;
  color: var(--color-text);
  display: block;
  font-size: 0.9375rem;
  line-height: 1.4;
  padding-block: 0.25rem;
  padding-inline: 0.75rem;
  width: 100%;
  /* PC同様rem(15)＝15pxのままだとiOS Safariがフォーカス時に自動ズームする（16px未満が対象）。
     SPは767px以下でrootが16px、375px以下では再度vwで縮む（_base.scss）ため、
     rem(16)だけでは375px以下で16px未満に戻ってしまう。max()で常に16px以上を保証する */
}

.p-form .wpcf7-form-control:is([type=text], [type=tel], [type=email], [type=url])::-moz-placeholder {
  color: var(--color-text-sub);
}

.p-form .wpcf7-form-control:is([type=text], [type=tel], [type=email], [type=url])::placeholder {
  color: var(--color-text-sub);
}

.p-form .wpcf7-form-control:focus-visible {
  border-color: var(--color-main);
  outline: 2px solid var(--color-main);
  outline-offset: 2px;
}

/* ---- 選択肢グループ（業種・地域のラジオ／所属組合のチェックボックス） ----
   選択肢は参加店舗のタクソノミー（industry / city / union）のタームから自動生成されるため、
   件数は管理画面のターム編集で増減する前提でスタイルを組む。
   所属組合だけ複数選択できるため、丸のラジオではなく四角のチェックボックスで出す
   （選べる数の違いを見た目で分かるようにする）。
   ※ CF7 の出力は span.wpcf7-form-control-wrap > span.wpcf7-form-control.wpcf7-radio
      （組合は .wpcf7-checkbox）で、role="radiogroup" は付かない
      （旧セレクタは一致しておらず無効だった） */
.p-form__fieldset--industry .wpcf7-radio,
.p-form__fieldset--city .wpcf7-radio,
.p-form__fieldset--union .wpcf7-checkbox {
  display: block;
}

/* PCは見出しと選択肢が横並びで、1つめの選択肢は見出しと同じ高さに置く。
   SPは見出しの真下に選択肢が続くため、区切りが分かる余白を取る（クライアント指示 SP-4） */
.p-form__fieldset--industry .wpcf7-form-control-wrap,
.p-form__fieldset--city .wpcf7-form-control-wrap,
.p-form__fieldset--union .wpcf7-form-control-wrap {
  display: block;
  grid-column: 2;
  grid-row: 1;
  margin-top: 0;
}

/* legendは通常行と同じ列幅、ラジオ一覧(CF7出力のwrap)は残り幅。
   3グループとも選択肢の左端が同じ位置に揃う */
.p-form__fieldset--industry,
.p-form__fieldset--city,
.p-form__fieldset--union {
  grid-template-columns: 32% 1fr;
}

/* 地域は選択肢が15件と多いためPCは2列に割る。
   等幅(1fr)だと最長ラベル（田布施町・平生町・上関町＝ラジオ込み実測201px）が
   1列分186pxに収まらず折り返すため、列幅は内容に合わせる（上限付きで、
   将来もっと長いタームが増えたときは折り返して収める） */
.p-form__fieldset--city .wpcf7-radio {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  justify-content: start;
  -moz-column-gap: 1.5rem;
  column-gap: 1.5rem;
  row-gap: 0.625rem;
}

.p-form__fieldset--industry .wpcf7-list-item,
.p-form__fieldset--city .wpcf7-list-item,
.p-form__fieldset--union .wpcf7-list-item {
  display: block;
  margin: 0;
}

/* 縦の間隔は margin-top で作る（column + gap は使わない）。
   地域だけは2列のグリッドのため、行間は上の row-gap で作る */
.p-form__fieldset--industry .wpcf7-list-item + .wpcf7-list-item,
.p-form__fieldset--union .wpcf7-list-item + .wpcf7-list-item {
  margin-top: 0.625rem;
}

.p-form__fieldset--industry .wpcf7-list-item label,
.p-form__fieldset--city .wpcf7-list-item label,
.p-form__fieldset--union .wpcf7-list-item label {
  align-items: center;
  color: var(--color-text-strong);
  display: flex;
  font-size: 0.875rem;
  font-weight: var(--fw-normal);
  letter-spacing: 0.04em;
  line-height: 1.5; /* JSON実測1.857は元テキストブロックの行送り。gapで行間を管理するため単一行のline-heightに読み替え */
  /* SP実測でタップ領域が約20pxしかなくWCAG 2.5.8(24px)未達のため、
     PCでは行間として使っている10pxをlabel自身のpadding-blockに5pxずつ振り分ける。
     見た目の行間ピッチ（10px）は変えずに、labelの当たり判定だけ広げる */
}

/* ブラウザ標準の丸をやめてオリジナルの見た目にする。
   選択時は「オレンジの地 + 内側の白リング」で中央にオレンジの点が出るように見せ、
   地色と内側リング（inset box-shadow の spread）を transition させて点が開くアニメーションにする。
   リングは丸そのものの寸法なので、丸の径と同じ rem で持たせる */
.p-form__fieldset--industry input[type=radio],
.p-form__fieldset--city input[type=radio] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  height: 1.125rem;
  margin: 0;
  transition: border-color 0.2s ease-out, background-color 0.2s ease-out, box-shadow 0.2s ease-out;
  width: 1.125rem;
}

.p-form__fieldset--industry input[type=radio]:checked,
.p-form__fieldset--city input[type=radio]:checked {
  background-color: var(--color-main);
  border-color: var(--color-main);
  box-shadow: inset 0 0 0 0.25rem var(--color-bg);
}

/* 所属組合は複数選択。丸ではなく四角にし、選択時は店舗検索の絞り込み（.p-search__checkbox）と
   同じ「オレンジの地＋白いチェック」で出す（チェック印は foundation の checkbox-mark） */
.p-form__fieldset--union input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 0;
  cursor: pointer;
  flex-shrink: 0;
  height: 1.125rem;
  margin: 0;
  transition: border-color 0.2s ease-out, background-color 0.2s ease-out;
  width: 1.125rem;
}

.p-form__fieldset--union input[type=checkbox]:checked {
  background-color: var(--color-main);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.6 8.5l3 3 5.8-6.2'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 76% 76%;
  border-color: var(--color-main);
}
/* 選択肢の丸／四角とテキストの間隔（異種要素間のため gap ではなく margin） */
.p-form__fieldset--industry .wpcf7-list-item-label,
.p-form__fieldset--city .wpcf7-list-item-label,
.p-form__fieldset--union .wpcf7-list-item-label {
  margin-left: 0.5rem;
}

.p-form__fieldset--industry input[type=radio]:focus-visible,
.p-form__fieldset--city input[type=radio]:focus-visible,
.p-form__fieldset--union input[type=checkbox]:focus-visible {
  outline: 2px solid var(--color-main);
  outline-offset: 2px;
}

/* ---- 送信ボタン（.c-btn は共通コンポーネント・編集禁止。位置調整のみ）
   実測: ボタン幅529px / カード内容幅575px → 左右に約23px(4%)の余白でほぼ全幅 */
.p-form .form-submit {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
  padding-inline: 4%;
  position: relative;
}

.p-form .form-submit .c-btn {
  width: 100%;
}

/* CF7 の送信スピナーはボタンと同じ行のフレックス要素として幅を奪うため、
   ボタン幅（カンプ実測528px）を保てるよう行外へ逃がす。
   以前は右端で縦中央に重ねていたが、黄色地＋斜めストライプのボタンの上に
   ダークグレーの丸が乗ると視認しづらいため、ボタンの下（白いカード背景の上）へ移す（A-3） */
.p-form .form-submit .wpcf7-spinner {
  left: 50%;
  margin: 0.625rem 0 0;
  position: absolute;
  top: 100%;
  transform: translateX(-50%);
}

/* 送信中であることを文言でも伝える補助テキスト（JS=entry-form.jsが .form-submit の直後に
   挿入し、送信開始/終了で is-active を付け外しする。A-3）。
   レシート最大10枚のアップロードは時間がかかるため、無反応に見せないことが目的 */
.p-form__submit-status {
  color: var(--color-text-strong);
  display: none;
  font-size: 0.8125rem;
  line-height: 1.6;
  /* 上に逃がしたスピナー（24px＋margin-top 10px）と重ならない余白を確保する */
  margin-top: 2.75rem;
  text-align: center;
}

.p-form__submit-status.is-active {
  display: block;
}

/* ---- 応答メッセージ ---- */
.p-form .wpcf7-response-output {
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  color: var(--color-text);
  font-size: 0.875rem;
  margin-top: 1rem;
  padding-block: 0.75rem;
  padding-inline: 1rem;
}

.p-form form.invalid .wpcf7-response-output,
.p-form form.failed .wpcf7-response-output,
.p-form form.spam .wpcf7-response-output {
  border-color: var(--color-required);
  /* --color-required は白背景でコントラスト比 約4.30:1 でWCAG AA(4.5:1)未達のため、
     .wpcf7-not-valid-tip と同じ --color-error-text（約6.53:1）に差し替える */
  color: var(--color-error-text);
}

.p-form form.sent .wpcf7-response-output {
  border-color: var(--color-accent);
  /* --color-accent は白背景でコントラスト比 約2.99:1 でWCAG AA(4.5:1)未達のため、
     コントラストの取れる --color-accent-dark（約4.97:1）に差し替える */
  color: var(--color-accent-dark);
}

.p-form .wpcf7-not-valid-tip {
  /* --color-required（必須バッジの赤）は白背景でコントラスト比 約4.29:1 でWCAG AA(4.5:1)未達のため、
     エラー文言だけコントラスト比 約6.53:1 の --color-error-text を使う（A-7） */
  color: var(--color-error-text);
  display: block;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

/* ---- エラーになった入力欄そのもの（A-7） ----
   これまで .wpcf7-not-valid-tip の12px赤文字だけが手がかりで、枠線色は正常時と同じだった。
   CF7は無効な入力欄に .wpcf7-not-valid クラスと aria-invalid="true" を両方付けるため、
   どちらでも拾えるようにしておく（実装差での取りこぼしを防ぐ）。
   file欄（[type="file"]）は border:none で組んであるため対象から外し、下の
   ::file-selector-button 側で見た目を出す */
.p-form .wpcf7-form-control:not([type=file]).wpcf7-not-valid,
.p-form .wpcf7-form-control:not([type=file])[aria-invalid=true] {
  background-color: var(--color-error-bg);
  border-color: var(--color-error-text);
}

/* 添付画像①が未選択のまま送信されたときの見た目（file欄は選択ボタン側で枠線を組んでいるため） */
.p-form .wpcf7-form-control[type=file].wpcf7-not-valid::file-selector-button,
.p-form .wpcf7-form-control[type=file][aria-invalid=true]::file-selector-button {
  border-color: var(--color-error-text);
}

/* ========================================
  応募フォーム（page-entry.php / 0808カンプ pc-gaiyou のコピー 3・980x2720）

  参加店舗登録フォームと同じ p-form 規約の上に、応募フォームだけの構成を足す。
  カンプ実測（アートボード座標）
    タイトル313-346 → カード394-2403（幅634・本文202-772）
    応募者情報リボン418 / 行ピッチ45（入力欄29+16）/ 住所の子行ピッチ37
    レシートリボン1009 / 添付行ピッチ40 / アンケートリボン1499
    プライバシーポリシー2206 → 同意2245 → 応募するボタン2304-2355
======================================== */
/* 上余白の基準は _search.scss と同じ（カンプPNGの実描画。l-header の外形258pxから314まで） */
.p-form--entry {
  padding-block: 3.5rem 2.5rem;
}

/* .c-page-title は共通コンポーネント（編集禁止）。カードまでの余白はマルチクラスで付与 */
.p-form__page-title {
  margin-bottom: 3rem; /* カンプ実測: タイトル下端346 → カード上端394 */
}

/* 応募フォームの縦余白は「リボンの下余白 0 ＋ 後続要素の margin-top」に統一する
   （参加店舗登録フォームはリボン側の margin-bottom で作っており、そのままだと二重に効く） */
.p-form--entry .p-form__title {
  margin-bottom: 0;
}

/* 入力欄の外形はカンプ実測 29px（参加店舗登録フォームは31pxで作ってある）。
   行ピッチ45px = 入力欄29px + 行間16px が全体の基準になる */
.p-form--entry .wpcf7-form-control:is([type=text], [type=tel], [type=email], [type=url]),
.p-form--entry select.wpcf7-form-control {
  padding-block: 0.1875rem;
}

.p-form--entry .p-form__row {
  margin-top: 1rem;
}

/* リボン直後の1行目（カンプ実測: リボン下端453 → お名前480） */
.p-form--entry .p-form__title + .p-form__row {
  margin-top: 1.6875rem;
}

/* グループ直後の通常行。カンプ実測は 住所→年代16 / 性別→電話番号21 */
.p-form--entry .p-form__fieldset--address + .p-form__row {
  margin-top: 1rem;
}

.p-form--entry .p-form__fieldset--choice + .p-form__row {
  margin-top: 1.3125rem;
}

/* 2枚目以降のリボン（レシート画像添付・アンケート）。カンプ実測は前の要素ごとに違う */
.p-form__title--section {
  margin-top: 3.3125rem; /* メール入力欄下端956 → リボン上端1009 */
}

.p-form__fieldset--receipt + .p-form__title--section {
  margin-top: 2.375rem; /* 添付画像⑩下端1461 → リボン上端1499 */
}

/* ラベル列はカンプ実測 202→348（=146px。ラベル文字 + 必須バッジが収まる幅）。
   参加店舗登録フォームの200pxより狭く、入力欄が左へ寄る */
.p-form--entry .p-form__label {
  flex: 0 0 9.125rem;
}

/* ご住所の子行はカンプ実測 legend列108 / 子ラベル列162 / 入力欄297。
   子ラベル列に余白まで含める作りなので、子行側の column-gap は 0 にする */
.p-form--entry .p-form__fieldset--address .p-form__sublabel {
  flex: 0 0 10.125rem;
}

.p-form--entry .p-form__fieldset--address .p-form__subrow {
  -moz-column-gap: 0;
  column-gap: 0;
}

/* ---- お名前・フリガナ（1行に入力欄2つ。カンプ実測 188x29 ×2・間隔25px） ---- */
.p-form__control--split {
  align-items: center;
  display: flex;
  -moz-column-gap: 1.5625rem;
  column-gap: 1.5625rem;
}

.p-form__control--split .wpcf7-form-control-wrap {
  flex: 1 1 11.75rem;
  min-width: 0;
}

/* ---- 年代・電話番号（カンプ実測 238x29 の短い入力欄） ---- */
.p-form__control--short {
  max-width: 14.875rem;
}

/* ---- メールアドレス（ラベルの下に本文幅いっぱいの入力欄） ---- */
.p-form__row--stack {
  display: block;
}

.p-form__row--stack .p-form__label {
  display: inline-grid;
}

.p-form__row--stack .p-form__control {
  margin-top: 0.375rem; /* カンプ実測: ラベル下端921 → 入力欄上端927 */
}

/* 性別の見出しも「ラベル文字列 + 必須バッジ」の2列グリッドにして、
   年代・電話番号（.p-form__label）と必須バッジの左端を揃える（カンプでも3行とも x312 で揃う） */
.p-form__fieldset--choice .p-form__legend {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(5em, max-content) max-content;
  -moz-column-gap: 1rem;
  column-gap: 1rem;
}

/* グリッドの column-gap で間隔を作るので、バッジ側の margin は打ち消す */
.p-form__fieldset--choice .p-form__legend .p-form__required {
  margin-left: 0;
}

/* ---- 性別（見出し列 + 選択肢列の2カラム。カンプ実測: 見出し202 → 選択肢382 = 32%） ---- */
.p-form__fieldset--choice {
  grid-template-columns: 32% 1fr;
  margin-top: 1.25rem; /* カンプ実測: 年代の入力欄下端791 → 性別811 */
}

.p-form__fieldset--choice .p-form__choices {
  grid-column: 2;
  grid-row: 1;
  margin-top: 0;
}

/* ---- 選択肢（性別・アンケート） ----
   CF7 の radio はコア側で常に必須になるため、任意の単一選択だけ exclusive checkbox で出す。
   見た目は radio / checkbox とも同じ丸に揃える（カンプはどちらも ○ 表記） */
.p-form__choices .wpcf7-form-control {
  display: block;
}

.p-form__choices .wpcf7-list-item {
  display: block;
  margin: 0;
}

/* カンプ実測の行ピッチ26pxは line-height（26/14）がそのまま作るため、行間の margin は持たせない */
.p-form__choices .wpcf7-list-item + .wpcf7-list-item {
  margin-top: 0;
}

/* JSONの letterSpacing は 0.32em だが、これは選択肢全体が1つのテキストブロックで
   ○と文言の間隔ぶんまで tracking に載っているための見かけ値。カンプPNGの描画は
   ほぼ標準字送りなので、そちらに合わせる（PNGが正） */
.p-form__choices .wpcf7-list-item label {
  align-items: center;
  color: var(--color-text-strong);
  display: flex;
  font-size: 0.875rem;
  font-weight: var(--fw-normal);
  letter-spacing: 0.02em;
  line-height: 1.8571428571;
  /* SPはタップ領域確保のため、行間として使っていた4pxをlabel自身のpadding-blockに2pxずつ振り分ける。
     見た目の行間ピッチは変えない */
}

.p-form__choices .wpcf7-list-item-label {
  margin-left: 0.5rem;
}

/* 性別だけ横並び（カンプ実測: ○男性　○女性　○その他 が1行） */
.p-form__choices--inline .wpcf7-list-item {
  display: inline-flex;
}

.p-form__choices--inline .wpcf7-list-item + .wpcf7-list-item {
  margin-left: 1.5rem;
  margin-top: 0;
}

/* ブラウザ標準の丸／四角をやめて、参加店舗登録フォームのラジオと同じ見た目に揃える */
.p-form__choices input[type=radio],
.p-form__choices input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  height: 1rem;
  margin: 0;
  transition: border-color 0.2s ease-out, background-color 0.2s ease-out, box-shadow 0.2s ease-out;
  width: 1rem;
}

.p-form__choices input[type=radio]:checked,
.p-form__choices input[type=checkbox]:checked {
  background-color: var(--color-main);
  border-color: var(--color-main);
  box-shadow: inset 0 0 0 0.21875rem var(--color-bg);
}
.p-form__choices input[type=radio]:focus-visible,
.p-form__choices input[type=checkbox]:focus-visible {
  outline: 2px solid var(--color-main);
  outline-offset: 2px;
}

/* 「その他」だけ右に自由記入欄が並ぶ。CF7 が選択肢を span で包むため、包み span を
   display: contents にして選択肢そのものをこの flex の子にし、最後の1件だけ幅を詰めて
   同じ行に入力欄を置く（カンプ実測: 入力欄 453x29 が7行目の右に来る） */
.p-form__choices--with-other {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  -moz-column-gap: 0.75rem;
  column-gap: 0.75rem;
}

.p-form__choices--with-other .wpcf7-form-control-wrap[data-name=survey-source],
.p-form__choices--with-other .wpcf7-radio {
  display: contents;
}

.p-form__choices--with-other .wpcf7-list-item {
  flex: 0 0 100%;
}

.p-form__choices--with-other .wpcf7-list-item:last-child {
  flex: 0 0 auto;
}

.p-form__choices--with-other .wpcf7-form-control-wrap[data-name=survey-source-other] {
  flex: 1 1 12.5rem;
  min-width: 0;
}
/* ---- レシート画像添付（添付画像①〜⑩） ---- */
.p-form__fieldset--receipt {
  display: block;
  margin-top: 1.75rem; /* カンプ実測: リボン下端1044 → 1行目上端1072 */
}

.p-form__fieldset--receipt .p-form__subrow {
  align-items: center;
  display: flex;
  -moz-column-gap: 1.875rem;
  column-gap: 1.875rem; /* カンプ実測: ラベル列右端349 → ファイル選択ボタン左端386 */
  margin-top: 0.5625rem; /* カンプ実測 行ピッチ40px − 行の実高31px */
}

.p-form__fieldset--receipt .p-form__subrow:first-child {
  margin-top: 0;
}

/* ラベル列はカンプ実測 203→349（=156px。「添付画像①」+ 必須バッジが1行に収まる幅）。
   カンプは文言とバッジの間隔が狭いので、ラベル内グリッドの間隔も詰める */
.p-form__fieldset--receipt .p-form__sublabel {
  flex: 0 0 9.75rem;
  -moz-column-gap: 0.5rem;
  column-gap: 0.5rem;
  font-size: 1.125rem;
  letter-spacing: 0.08em; /* カンプ実測 1.44px @ fs18 */
}

.p-form__fieldset--receipt .p-form__control--narrow {
  flex: 1 1 auto;
  margin-top: 0;
}

/* ---- アンケート ---- */
.p-form__fieldset--survey {
  display: block;
  margin-top: 2rem; /* カンプ実測36 − 設問の行送りぶん4.4 */
}

.p-form__title--section + .p-form__fieldset--survey {
  margin-top: 2.3125rem; /* カンプ実測41 − 設問の行送りぶん4.4 */
}

.p-form__question {
  color: var(--color-form-label);
  display: block;
  font-size: 1.125rem;
  font-weight: var(--fw-normal);
  /* カンプ実測は 1.08px @ fs18（0.06em）だが、長い設問＋必須バッジがPCで2行に割れるため詰めている。
     戻すと「また利用したいと思いますか。」の設問が折り返す */
  letter-spacing: 0.02em;
  /* 折り返す設問があるので、カンプ実測の行送り 20px（1.111）ではなく
     このフォームの本文と同じ 1.6 にする。1行の設問は上下に 4.4px ずつ膨らむため、
     前後の余白（下の margin-top 各所）はそのぶん引いた値になっている */
  line-height: 1.6;
}

/* 設問は p 要素でグリッドではないため、バッジ側の margin で文言から離す
   （所属組合の見出しと同じ扱い）。
   ラベル類は grid の align-items: center で揃うが、ここはインラインなので vertical-align: middle
   が効き、バッジがさらに下がる。その量を差し引いた値で上書きする（0.084em の光学補正は含み済み） */
.p-form__question .p-form__required {
  margin-left: 0.375rem;
  top: -0.176em;
}

/* display は指定しない（--with-other の flex を打ち消さないため）。余白だけを持つ */
.p-form__question + .p-form__choices {
  margin-top: 1.0625rem; /* カンプ実測21 − 設問の行送りぶん4.4 */
}

/* アンケートの選択肢は設問より一段下げる。
   カンプ実測: 設問のテキスト枠 x201.7 に対し ○ の描画開始が x224（PNG実測）＝ 22px のインデント。
   「その他」の自由記入欄の左端もカンプ実測299.8にほぼ揃う */
.p-form__fieldset--survey .p-form__choices {
  padding-left: 1.375rem;
}

/* ご意見・ご感想のテキストエリアだけ設問との間隔が狭い（カンプ実測11 − 設問の行送りぶん4.4） */
.p-form__question + .wpcf7-form-control-wrap {
  margin-top: 0.4375rem;
}

/* ご意見・ご感想（カンプ実測 568x137） */
.p-form textarea.wpcf7-form-control {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 0;
  color: var(--color-text);
  display: block;
  font-family: var(--font-primary);
  font-size: 0.9375rem;
  height: 8.5625rem;
  line-height: 1.6;
  padding-block: 0.5rem;
  padding-inline: 0.75rem;
  resize: vertical;
  width: 100%;
  /* text/tel/email/url と同じ理由・同じ max() 対応でSPだけ16px以上に上げる（A-4） */
}

/* ---- プライバシーポリシー ---- */
.p-form__privacy {
  margin-top: 2.0625rem; /* カンプ実測: テキストエリア下端2173 → 見出し2206 */
}

.p-form__privacy-head {
  align-items: center;
  color: var(--color-form-label);
  display: flex;
  flex-wrap: wrap;
  font-size: 1.125rem;
  font-weight: var(--fw-normal);
  gap: 0.5rem 1.3125rem;
  letter-spacing: 0.06em;
  line-height: 1.1111111111;
}

/* カンプ実測 167x16 の緑ピル・文字 fs9 */
.p-form__privacy-link {
  align-items: center;
  background-color: var(--color-accent);
  border-radius: 999px;
  color: var(--color-text-inverse);
  display: inline-flex;
  font-size: 0.5625rem;
  font-weight: var(--fw-bold);
  justify-content: center;
  letter-spacing: 0.1em;
  line-height: 1.4444444444;
  padding-block: 0.125rem;
  padding-inline: 0.75rem;
  text-decoration: none;
  transition: opacity 0.3s ease-out;
}
/* 白いカードの上に置くピルなので、フォーカス枠は白ではなくブランドカラーで出す */
.p-form__privacy-link:focus-visible {
  outline: 2px solid var(--color-main);
  outline-offset: 2px;
}

/* 必須バッジ + 同意チェック。バッジは行の左、チェックはカンプ実測で x264（バッジの右） */
.p-form__privacy-accept {
  align-items: center;
  display: flex;
  -moz-column-gap: 1rem;
  column-gap: 1rem;
  margin-top: 1.1875rem; /* カンプ実測: 見出し下端2226 → 同意行2245 */
}

.p-form__privacy-accept .wpcf7-form-control-wrap {
  display: block;
}

.p-form__privacy-accept .wpcf7-list-item {
  display: block;
  margin: 0;
}

.p-form__privacy-accept .wpcf7-list-item label {
  align-items: center;
  color: var(--color-text-strong);
  display: flex;
  font-size: 0.875rem;
  font-weight: var(--fw-normal);
  letter-spacing: 0.02em;
  line-height: 1.8571428571;
  /* 送信の必須ゲートとなる同意チェックのため、タップ領域をWCAG推奨の44pxに近づける。
     兄弟行が無い単独行なのでpadding-blockを足しても行間ピッチには影響しない */
  padding-block: 0.5625rem;
}

.p-form__privacy-accept .wpcf7-list-item-label {
  margin-left: 0.5rem;
}

.p-form__privacy-accept input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  height: 1rem;
  margin: 0;
  transition: border-color 0.2s ease-out, background-color 0.2s ease-out, box-shadow 0.2s ease-out;
  width: 1rem;
}

.p-form__privacy-accept input[type=checkbox]:checked {
  background-color: var(--color-main);
  border-color: var(--color-main);
  box-shadow: inset 0 0 0 0.21875rem var(--color-bg);
}

.p-form__privacy-accept input[type=checkbox]:focus-visible {
  outline: 2px solid var(--color-main);
  outline-offset: 2px;
}

/* 同意チェックが外れている間ボタンが disabled で無反応に見えるため、理由を伝える
   補助テキスト（JS=entry-form.jsが .p-form__privacy-accept の直後に挿入する。A-2） */
.p-form__privacy-hint {
  color: var(--color-text-sub);
  font-size: 0.8125rem;
  line-height: 1.5;
  margin-top: 0.5rem;
}

/* 応募するボタン（カンプ実測 529x51）。プライバシーポリシーの下 29px */
.p-form--entry .form-submit {
  margin-top: 1.8125rem;
  padding-inline: 1.4375rem; /* 本文幅575 → ボタン529 の左右差 */
}

/* 年代のセレクト（カンプは1行の入力欄。見た目は他の入力欄と揃える） */
.p-form select.wpcf7-form-control {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 0;
  color: var(--color-text);
  display: block;
  font-family: var(--font-primary);
  font-size: 0.9375rem;
  line-height: 1.4;
  padding-block: 0.25rem;
  padding-inline: 0.75rem;
  width: 100%;
  /* text/tel/email/url と同じ理由・同じ max() 対応でSPだけ16px以上に上げる（A-4） */
}

/* ========================================
  fv
  トップのファーストビュー（オレンジ全面背景。l-headerを兼務）
  修正指示[15]: 中央コンテンツは支給アセット1枚画像（fv-main.png 972x1131@2x = 560px表示・カンプ実測）
  修正指示[16]: 周囲の店舗イラストはカンプ実測（800x662基準）の%配置（見切れ含む）。1260px幅で高さ頭打ちにより重なる問題があったため、左右デコレーション層をカンプ半幅（400px）上限のエッジ固定に変更（800px超はカンプ実寸で固定・重なりなし）
======================================== */
.p-fv {
  background-color: var(--color-main);
  overflow: hidden;
  /* カンプ実測: 中央画像の上端y61・下端y618、ナビ1段目上端y690（= 下32px + ナビ側padding-top 40px） */
  padding-block: 3.8125rem 2rem;
  position: relative;
  z-index: 50;
}

/* 装飾層はカンプのアートボード幅(980px)をそのまま座標系にして中央に固定する。
   ビューポート端に張り付けると幅によって店舗の間隔が変わり、カンプの配置と合わなくなるため。
   rem で持つのでインナー幅以下では中央画像ごと等倍で縮み、はみ出した左右は
   .p-fv の overflow:hidden で自然に切れる（切れ方の比率はどの幅でも同じ）。
   周囲の白線画店舗イラストは装飾のためSPは非表示 */
.p-fv__decor {
  display: block;
  height: 100%;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 61.25rem;
  z-index: 10;
}

/* 各店舗の位置・幅はカンプ実測（980pxアートボード上の座標）。
   幅はどの店舗も素材原寸の 0.494 倍で一致した（FV中央画像 482/972 と同じ倍率）。
   left/top は「カンプ上の線画の位置 − 素材PNGの透明余白 × 0.494」 */
.p-fv__store {
  position: absolute;
}

.p-fv__store img {
  display: block;
  height: auto;
  width: 100%;
}

.p-fv__store--barber {
  left: 10.8125rem;
  top: 5.25rem;
  width: 7.6875rem;
}

.p-fv__store--sento {
  left: 6.4375rem;
  top: 13rem;
  width: 8.75rem;
}

.p-fv__store--cleaning {
  left: 6.5625rem;
  top: 21.75rem;
  width: 8.25rem;
}

.p-fv__store--beauty {
  left: 10.75rem;
  top: 30.9375rem;
  width: 7.6875rem;
}

.p-fv__store--ryokan {
  left: 43.75rem;
  top: 4.375rem;
  width: 7.75rem;
}

.p-fv__store--cinema {
  left: 46.1875rem;
  top: 13.8125rem;
  width: 7.875rem;
}

.p-fv__store--sushi {
  left: 46.3125rem;
  top: 22.75rem;
  width: 8.6875rem;
}

.p-fv__store--restaurant {
  left: 43rem;
  top: 31.1875rem;
  width: 7.4375rem;
}

/* 中央の1枚画像（h1兼務） */
.p-fv__body {
  padding-inline: 0.75rem; /* SPでの見切れ防止 */
  position: relative;
  z-index: 30;
}

.p-fv__main {
  margin-inline: auto;
  /* カンプ実測: 中央ブロック表示幅482px。緑チップ幅(41px)・チップ中心間距離(91px)・
     雲の水平幅(484px)の3点をカンプと支給アセット原寸(972px)で突き合わせて算出 */
  max-width: 30.125rem;
  width: 100%;
}

.p-fv__main img {
  display: block;
  height: auto;
  width: 100%;
}

/* ========================================
  howto
  参加方法（白カード + Step.1〜3 + 応募フォームボタン）
  --color-emphasis は foundation/_variables.scss の :root で定義済み（同一変数を共用）
======================================== */
.p-howto {
  /* セクション間隔: 実測（aboutカード下端1410 → 本カード上端1471 = 61px） */
  padding-top: 3.8125rem;
}

/* .inner は共通ガター（780px基準）のまま使用し、カード自体を実測634px幅に個別制約する
   （p-newsのカードと同一パターン: .innerは上書きせず、カード側にmax-width+margin-inline:auto） */
.p-howto__card {
  background-color: var(--color-bg);
  border-radius: 1rem; /* AIから角丸数値は取得不可のためpreview目視の近似値 */
  margin-inline: auto;
  max-width: 39.625rem;
  padding-block: 1.5rem 2.9375rem; /* カンプ実測: ボタン下端y2026 → カード下端y2073 */
  padding-inline: 1.5625rem; /* 実測: コンテンツ開始x198 - カード左端x173 = 25px */
}

.p-howto__list {
  list-style: none;
  margin-top: 0.5rem;
}

/* PCはカンプどおり ラベル / アイコン / 本文 を1行に並べる。
   SP（デザイン無し・コーダー判断）は Step ラベルで1行使い、その下にアイコンと本文を横並びにする
   （PCと同じ「ラベル→アイコン→本文」の読み順を保ったまま縦を詰める） */
.p-howto__item {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  /* カンプ実測: Step行のピッチ135px（アイコン高123px + 上下6px） */
  padding-block: 0.375rem;
}

/* 区切り線: オレンジの実線（破線ではない。preview3xで確認） */
.p-howto__item:not(:first-child) {
  border-top: 1px solid var(--color-main);
}

.p-howto__step {
  color: var(--color-accent);
  display: block;
  flex: 0 0 auto;
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  line-height: 1.25;
  width: 4.75rem;
}

/* アセットは3枚とも 468x468(3x) の同一キャンバスで書き出し済み（修正指示[4]）。
   薄緑の丸はキャンバス中央・直径368px(3x = 123px 1x)で3枚とも同一。
   丸の外にはみ出す絵柄の分だけキャンバスが丸より大きいので、表示は正方形で固定する */
.p-howto__icon {
  display: block;
  flex-shrink: 0;
  height: 9.75rem;
  /* 丸の外側のキャンバス余白は行の高さに算入しない。
     Step行のピッチはカンプ実測135px = 丸123px + 上下padding6px */
  margin-block: -1.03125rem;
  /* 丸の左端をカンプ実測位置（カード内側+98.7px）に合わせる。
     ラベル76px + 本余白6px + キャンバス内の丸オフセット17px = 99px */
  margin-inline: 0.375rem 0;
  width: 9.75rem; /* 丸の直径 123px（カンプ実測）相当 */
}

.p-howto__text {
  color: var(--color-text-strong);
  flex: 1 1 0;
  font-size: 0.875rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  line-height: 1.429;
  /* アイコンのキャンバス幅が3枚とも同一になったため、3行ともここで左端が揃う。
     カンプ実測のテキスト左端（カード内側+241px）= ラベル76px + 6px + キャンバス156px + 3px */
  margin-left: 0.1875rem;
  margin-top: 0;
  min-width: 0;
}

.p-howto__heading {
  color: var(--color-text-strong);
  font-size: 0.875rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  line-height: 1.429;
}

.p-howto__note {
  color: var(--color-text-strong);
  font-size: 0.8125rem;
  font-weight: var(--fw-normal);
  letter-spacing: 0.04em;
  line-height: 1.429;
  margin-top: 0.5rem;
}

.p-howto__alert {
  color: var(--color-emphasis);
  font-size: 0.875rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  line-height: 1.429;
  margin-top: 0.5rem;
}

.p-howto__btnWrap {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

/* ========================================
  member（参加店舗紹介 / single-member.php）
  0808カンプ「pc-gaiyou のコピー 2」980x1802 準拠

  縦の実測（アートボード座標）
    ヘッダー下端297 → タイトル上端313 → カード 394-1385 → ボタン 1428-1483
    → フッター緑上端1525
  カード内: 店名/チップ426 → 画像470-873 → 情報リスト898-1050（行ピッチ33）
           → マップ1081-1353
======================================== */
/* 上余白の基準は _search.scss と同じ（カンプPNGの実描画。l-header の外形258pxから314まで） */
.p-member {
  padding-block: 3.5rem 2.625rem;
}

/* .c-page-title は共通コンポーネント（編集禁止）。カードまでの余白はマルチクラスで付与 */
.p-member__title {
  margin-bottom: 3rem; /* カンプ実測: タイトル下端346 → カード上端394 */
}

.p-member__card {
  background-color: var(--color-bg);
  border-radius: 1.25rem; /* AIはradius値を取得不可のためカンプPNGの角丸を目視で実測 */
  margin-inline: auto;
  max-width: 39.625rem;
  padding-block: 2rem;
  padding-inline: 1.5rem;
}

/* 店名（左）とチップ群（右）が同じ行に並ぶ */
.p-member__head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  justify-content: space-between;
}

.p-member__name {
  color: var(--color-accent);
  font-family: var(--font-primary);
  font-size: 1.1875rem;
  font-weight: var(--fw-black);
  letter-spacing: 0.12em; /* カンプ実測 2.28px @ fs19 */
  line-height: 1.0569473684;
}

.p-member__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6875rem; /* カンプ実測: チップ間 11px */
}

/* 店舗画像はカンプ実測 585x403（本文幅いっぱい）。トリミングして敷く */
.p-member__photo {
  margin-top: 1.375rem; /* カンプ実測: 店名下端448 → 画像上端470 */
}

.p-member__photo img {
  aspect-ratio: 585/403;
  height: auto;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

/* ---- 情報リスト（緑ピルのラベル＋値の2カラム） ---- */
.p-member__info {
  margin-top: 1.5625rem; /* カンプ実測: 画像下端873 → 1行目ラベル上端898 */
}

.p-member__info-row {
  align-items: baseline;
  display: flex;
  -moz-column-gap: 1rem;
  column-gap: 1rem; /* カンプ実測: ラベル右端320 → 値左端336 */
}

/* 縦の間隔は margin-top で作る（column + gap は使わない）。カンプ実測 行ピッチ33 − ラベル高21 */
.p-member__info-row + .p-member__info-row {
  margin-top: 0.75rem;
}

/* カンプ実測 123x21 の緑ピル。ラベル文字数が違っても左端・幅が揃うよう固定幅にする */
.p-member__info-label {
  background-color: var(--color-accent);
  border-radius: 999px;
  color: var(--color-text-inverse);
  flex: 0 0 7.6875rem;
  font-size: 0.8125rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.12em;
  line-height: 1.5447692308;
  padding-block: 0.0625rem;
  padding-inline: 0.5rem;
  text-align: center;
}

/* 「ウェブサイト・SNS」だけ文字数が多く、他ラベルと同じ字間・padding では123pxのピルに入りきらず2行に折れる。
   カンプPNGでもこのラベルだけ字間ほぼ0でピル幅いっぱいに組まれている（ラベル実測幅111.4px）ので、
   ピル幅123pxは共通のまま、字間と左右paddingを詰めて1行に収める */
.p-member__info-label--website {
  font-size: 0.78125rem;
  letter-spacing: 0;
  padding-inline: 0.25rem;
  white-space: nowrap;
}

.p-member__info-value {
  color: var(--color-text-strong);
  font-size: 0.8125rem;
  font-weight: var(--fw-normal);
  letter-spacing: 0.02em;
  line-height: 1.5447692308;
  margin-top: 0;
  overflow-wrap: anywhere; /* 長いURLがカードからはみ出さないように折る */
}

.p-member__info-value a {
  color: var(--color-text-strong);
  text-decoration: underline;
  transition: opacity 0.3s ease-out;
}
.p-member__info-value a:focus-visible {
  outline: 2px solid var(--color-main);
  outline-offset: 2px;
}

.p-member__address {
  font-style: normal;
}

/* ウェブサイト・SNS が複数あるときの縦並び */
.p-member__links li + li {
  margin-top: 0.25rem;
}

/* 所属組合はカンプに無い追加行（事務局の要望）。複数所属の店舗があるためリストで出す。
   ウェブサイト・SNS と同じ行間で、値の左端は他の行と揃う */
.p-member__unions li + li {
  margin-top: 0.25rem;
}

/* ---- Googleマップ（カンプ実測 585x272） ---- */
.p-member__map {
  aspect-ratio: 585/272;
  margin-top: 1.9375rem; /* カンプ実測: 最終行下端1050 → マップ上端1081 */
  overflow: hidden;
}

.p-member__map iframe {
  border: none;
  display: block;
  height: 100%;
  width: 100%;
}

/* ---- Googleマップで開く（カンプに無い追加リンク。座標精度向上に伴う導線） ---- */
.p-member__map-link {
  color: var(--color-accent);
  display: block;
  margin-top: 0.75rem;
  text-align: center;
  text-decoration: underline;
  transition: opacity 0.3s ease-out;
}

/* ---- 店舗検索に戻る（.c-btn--outline は共通コンポーネント。配置のみここで持つ） ---- */
.p-member__back-wrap {
  display: flex;
  justify-content: center;
  margin-top: 2.6875rem; /* カンプ実測: カード下端1385 → ボタン上端1428 */
}

/* ========================================
  news
  白カード（角丸）+ 日付(緑)/本文 の一覧。1〜2件目は .p-news__list（dl）、
  3件目以降は dl の外に出した .p-news__extra（別の dl を内包）でまとめる
  ※ dl 直下に置ける div は dt/dd を直接持つグループだけなので、開閉ラッパーは中に入れられない
  js-news-more（さらに表示 ⇄ 閉じる）が .p-news__extra へ付け外しする
  .is-expanded で開閉アニメーションする
======================================== */
.p-news {
  padding-top: 4rem; /* カンプ実測: ナビ2段目下端y849 → カード上端y913 */
}

.p-news__card {
  background-color: var(--color-bg);
  border-radius: 0.5rem;
  margin-inline: auto;
  max-width: 39.625rem;
  padding-block: 1.5rem 1.75rem;
  padding-inline: 2rem;
}

.p-news__heading {
  color: var(--color-accent);
  font-size: 1.25rem;
  font-weight: var(--fw-black);
  letter-spacing: 0.12em;
  line-height: 1.35;
  text-align: center;
}

.p-news__list {
  border-top: 1px solid var(--color-main);
  margin-top: 0.8125rem;
}

.p-news__item {
  align-items: flex-start;
  border-bottom: 1px solid var(--color-main);
  display: flex;
  flex-direction: row;
  padding-block: 0.875rem;
}

.p-news__date {
  color: var(--color-accent);
  flex: 0 0 8.75rem;
  font-size: 0.875rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  line-height: 1.3;
}

.p-news__body {
  color: var(--color-text-strong);
  font-size: 0.6875rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  line-height: 1.318;
  margin-left: 0.75rem;
  margin-top: 0;
}

.p-news__body p {
  margin-top: 0;
}

.p-news__body p + p {
  margin-top: 0.5rem;
}

/* 3件目以降のラッパー。高さ auto は transition できないため、
   grid の行サイズ 0fr → 1fr を animate して開閉する（中身の高さを測らずに済む） */
.p-news__extra {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease-out;
}

.p-news__extra.is-expanded {
  grid-template-rows: 1fr;
}

/* 閉じている間に中身をはみ出させない。min-height: 0 が無いと 0fr まで縮まない */
.p-news__extraInner {
  min-height: 0;
  overflow: hidden;
}
.p-news__more {
  display: flex;
  justify-content: center;
  margin-top: 1.5625rem;
}

/* さらに表示 / 閉じる
   カンプ実測: 88x20 の緑角丸ボタン・白文字 fs10 w500 字間0.12em。
   SP はカンプが無いため、タップ領域を確保できる寸法に上げてある */
.p-news__moreBtn {
  align-items: center;
  background-color: var(--color-accent);
  border: none;
  border-radius: 0.25rem;
  color: var(--color-text-inverse);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-primary);
  font-size: 0.625rem;
  font-weight: var(--fw-medium);
  justify-content: center;
  letter-spacing: 0.12em;
  line-height: 1;
  min-width: 5.5rem; /* カンプ実測: 幅88px。「閉じる」に切り替わっても幅が変わらないよう下限で固定 */
  padding-block: 0.3125rem; /* 外形20px = 文字10px + 5px×2 */
  padding-inline: 1rem;
  text-align: center;
  transition: opacity 0.3s ease-out;
}
.p-news__moreBtn:focus-visible {
  outline: 2px solid var(--color-text-strong);
  outline-offset: 2px;
}

/* ========================================
  page
  汎用の固定ページ（page.php）。プライバシーポリシー等、
  専用テンプレートを持たない固定ページの本文をカードで受ける。

  レイアウトの骨格は p-form（応募フォーム・参加店舗登録フォーム）と揃えるが、
  本文は管理画面で編集される想定なので、カード幅は読みやすさ優先で少し広く取る
======================================== */
.p-page {
  padding-block: 3.5rem 2.6875rem;
}

.p-page__title {
  margin-bottom: 3rem;
}

.p-page__card {
  background-color: var(--color-bg);
  border-radius: 1.25rem;
  margin-inline: auto;
  max-width: 47.5rem; /* p-form__card の 634px は法的文書には狭いので広げる */
  padding-block: 3rem;
  padding-inline: 3rem;
}

/* ---- 本文（管理画面のエディタが吐くマークアップを受ける） ---- */
.p-page__body {
  color: var(--color-text);
  font-size: 0.9375rem;
  line-height: 1.9;
}

.p-page__body > :first-child {
  margin-top: 0;
}

.p-page__body p {
  margin-top: 1rem;
}

.p-page__body h2 {
  border-bottom: 0.125rem solid var(--color-accent);
  color: var(--color-text);
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  line-height: 1.5;
  margin-top: 2.5rem;
  padding-bottom: 0.5rem;
}

.p-page__body h3 {
  /* --color-main は白背景でコントラスト比 約3.36:1 でWCAG AA(4.5:1)未達のため、
     --color-text（約17.3:1）に差し替える */
  color: var(--color-text);
  font-size: 1.0625rem;
  font-weight: var(--fw-bold);
  line-height: 1.6;
  margin-top: 2rem;
}

.p-page__body ul,
.p-page__body ol {
  margin-top: 1rem;
  padding-left: 1.5rem;
}

.p-page__body li {
  margin-top: 0.375rem;
}

.p-page__body a {
  /* --color-main は白背景でコントラスト比 約3.36:1 でWCAG AA(4.5:1)未達のため、
     _member.scss の本文リンクと同じ --color-text-strong（約12.6:1）に差し替える */
  color: var(--color-text-strong);
  text-decoration: underline;
}

.p-page__body a:hover,
.p-page__body a:focus-visible {
  text-decoration: none;
}

/* 表は本文幅を超えたら横スクロールさせ、ページ全体が横に伸びないようにする */
.p-page__body figure.wp-block-table {
  margin-top: 1.5rem;
  overflow-x: auto;
}

.p-page__body table {
  border-collapse: collapse;
  font-size: 0.875rem;
  width: 100%;
}

.p-page__body th,
.p-page__body td {
  border: 0.0625rem solid var(--color-border);
  padding: 0.625rem 0.75rem;
  text-align: left;
  vertical-align: top;
}

.p-page__body th {
  background-color: var(--color-bg-sub);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

/* ---- 「仮の内容です」の注意書き ----
   プライバシーポリシーの雛形（functions/privacy_page.php）が本文先頭に出す。
   本番の文面へ差し替えたら、この段落ごと削除する運用 */
.p-page__draft-note {
  border: 0.0625rem dashed var(--color-required);
  border-radius: 0.375rem;
  color: var(--color-required);
  font-size: 0.875rem;
  font-weight: var(--fw-bold);
  line-height: 1.7;
  margin-top: 0;
  padding: 0.75rem 1rem;
}

/* ========================================
  search（店舗検索 / archive-member.php）
  0808カンプ「pc-gaiyou のコピー」980x2180 準拠

  縦の実測（アートボード座標）
    ヘッダー下端297 → タイトル上端313 → カード1 394-638 → カード2 690-1087
    → カード3 1138-1859 → フッター緑上端1892
  カードは幅634・左右padding24（カード左端173 → 本文左端196・本文幅585）
======================================== */
/* ⚠️ 上余白の基準はカンプの「ヘッダーグループの bbox」ではなく描画結果。
   店舗イラストの image-fill は bbox が実表示より大きく出る（xd-brief の大型image-fill警告どおり）ため、
   カンプPNGの実描画（雲ロゴ下端252・タイトル上端314）で採寸した。l-header の外形は 258px */
.p-search {
  padding-block: 3.5rem 2.0625rem;
}

/* .c-page-title は共通コンポーネント（編集禁止）。カードまでの余白はマルチクラスで付与 */
.p-search__title {
  margin-bottom: 3rem; /* カンプ実測: タイトル下端346 → カード上端394 */
}

.p-search__card {
  background-color: var(--color-bg);
  border-radius: 1.25rem; /* AIはradius値を取得不可のためカンプPNGの角丸を目視で実測 */
  margin-inline: auto;
  max-width: 39.625rem;
  padding-block: 1.5rem 2rem;
  padding-inline: 1.5rem;
}

/* カード間はカンプ実測 52px（638→690）/ 51px（1087→1138） */
.p-search__card + .p-search__card,
.p-search__form + .p-search__result {
  margin-top: 3.25rem;
}

/* .c-ribbon は共通コンポーネント（編集禁止）。カード内の下余白はマルチクラスで付与 */
.p-search__card-title {
  margin-bottom: 2.125rem; /* カンプ実測: リボン下端453 → リード文上端487 */
}

/* ----------------------------------------
  キーワード検索
---------------------------------------- */
.p-search__lead {
  color: var(--color-text-strong);
  font-size: 0.9375rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em; /* カンプ実測 0.9px @ fs15 */
  line-height: 1.3333333333;
}

/* 入力欄はカンプ実測 493x29 で本文幅の中に左右46pxずつ入る。
   リード文もカンプでは入力欄と左端が揃う（PNG実測: どちらも x=243）ため、同じ幅・同じ中央寄せで並べる */
.p-search__lead,
.p-search__keyword {
  margin-inline: auto;
  max-width: 30.8125rem;
}

.p-search__keyword {
  margin-top: 0.375rem; /* カンプ実測: リード文下端507 → 入力欄上端513 */
}

.p-search__keyword input[type=text] {
  background-color: var(--color-bg);
  border: 1px solid var(--color-text);
  border-radius: 0;
  color: var(--color-text);
  display: block;
  font-family: var(--font-primary);
  font-size: 0.9375rem;
  font-weight: var(--fw-normal);
  line-height: 1.4;
  padding-block: 0.1875rem; /* 外形29px = 文字21px + padding 3px×2 + 枠1px×2（カンプ実測） */
  padding-inline: 0.75rem;
  transition: border-color 0.3s ease-out;
  width: 100%;
}

.p-search__keyword input[type=text]:focus-visible {
  border-color: var(--color-main);
  outline: 2px solid var(--color-main);
  outline-offset: 2px;
}

.p-search__submit {
  display: flex;
  justify-content: center;
  margin-top: 1.625rem; /* カンプ実測: 入力欄下端542 → ボタン上端568 */
}

/* 詳細検索カードの送信ボタンだけ広い（カンプ実測: 地域の最終行1749 → ボタン1789） */
.p-search__group + .p-search__submit {
  margin-top: 2.5rem;
}

/* ----------------------------------------
  マップから探す
---------------------------------------- */
.p-search__map {
  aspect-ratio: 585/272; /* カンプ実測: 本文幅いっぱい585 × 高さ272 */
  overflow: hidden;
}

.p-search__map iframe {
  border: none;
  display: block;
  height: 100%;
  width: 100%;
}

/* ----------------------------------------
  詳細検索（組合（業種）・地域）
---------------------------------------- */
/* グループ間はカンプ実測 38px（業種タイル下端1564 → 「地域」上端1602） */
.p-search__group + .p-search__group {
  margin-top: 2.375rem;
}

/* 見出しの行に「すべて選択 / すべて解除」が右寄せで並ぶ */
.p-search__group-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  justify-content: space-between;
}

.p-search__group-title {
  color: var(--color-accent);
  font-family: var(--font-primary);
  font-size: 1.1875rem;
  font-weight: var(--fw-black);
  letter-spacing: 0.12em; /* カンプ実測 2.28px @ fs19 */
  line-height: 1.0569473684;
}

/* ボタンの繰り返し → gap（カンプ実測 11px） */
.p-search__group-actions {
  display: flex;
  gap: 0.6875rem;
}

/* カンプ実測 103x24・地色は すべて選択=--color-accent / すべて解除=--color-accent-light */
.p-search__bulk {
  align-items: center;
  background-color: var(--color-accent);
  border: none;
  border-radius: 999px;
  color: var(--color-text-inverse);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  font-weight: var(--fw-bold);
  justify-content: center;
  letter-spacing: 0.12em;
  line-height: 1.5447692308;
  min-width: 6.4375rem;
  padding-block: 0.125rem;
  padding-inline: 0.75rem;
  transition: opacity 0.3s ease-out;
}

.p-search__bulk--clear {
  background-color: var(--color-accent-light);
  color: var(--color-text-strong);
}
.p-search__bulk:focus-visible {
  outline: 2px solid var(--color-main);
  outline-offset: 2px;
}

/* ---- 業種タイル（カンプ実測 130x130・4列・列間21px / 行間20px） ---- */
.p-search__tiles {
  display: grid;
  gap: 1.25rem 1.3125rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 2.125rem; /* カンプ実測: 見出し下端1250 → タイル上端1284 */
}

/* 絶対配置で隠しているチェックボックス（.u-visually-hidden）の基準をタイルの中に閉じ込める */
.p-search__tile-item {
  position: relative;
}

.p-search__tile {
  aspect-ratio: 1/1;
  background-color: var(--chip-color, var(--color-main));
  border-radius: 1rem; /* カンプ実測: 130x130 タイルの角丸 16px */
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-block: 0.625rem;
  padding-inline: 0.5rem;
  position: relative; /* 選択時のチェックバッジ（::after）の基準 */
  transition: box-shadow 0.2s ease-out, opacity 0.3s ease-out;
}

/* イラストは白線画（ヘッダーと同じ共通アセット）。タイルの余った高さを埋める */
.p-search__tile-img {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  min-height: 0;
}

.p-search__tile-img img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.p-search__tile-label {
  color: var(--color-text-inverse);
  display: block;
  font-size: 0.8125rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  line-height: 1.5447692308;
  margin-top: 0.25rem;
  text-align: center;
}

/* 選択状態はカンプに無い（コーダー判断）。地色は業種の識別色のままにして、
   濃色のリングと右上のチェックで「選ばれている」ことを示す */
.p-search__tile-input:checked + .p-search__tile {
  box-shadow: inset 0 0 0 0.1875rem var(--color-text-strong);
}

/* チェック印をラベルの文字列に入れると、選択したとたんに長い業種名（「公衆浴場（銭湯）」等）が
   2行に折れ、タイルは aspect-ratio で高さが固定なため flex のイラストがその分縮む。
   文字列から外して右上に絶対配置する（印は共通の checkbox-mark。文字の ✓ はフォント依存で形が崩れる） */
.p-search__tile-input:checked + .p-search__tile::after {
  background-color: var(--color-text-strong);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.6 8.5l3 3 5.8-6.2'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 76% 76%;
  border-radius: 50%;
  content: "";
  height: 1.25rem;
  position: absolute;
  right: 0.375rem;
  top: 0.375rem;
  width: 1.25rem;
}

.p-search__tile-input:focus-visible + .p-search__tile {
  outline: 2px solid var(--color-text-strong);
  outline-offset: 2px;
}
/* ---- 地域チェックボックス（カンプ実測 4列・行ピッチ27px・左インデント22px） ---- */
.p-search__cities {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  -moz-column-gap: 0.5rem;
  column-gap: 0.5rem;
  margin-top: 2.0625rem; /* カンプ実測: 見出し下端1622 → 1行目上端1655 */
  padding-left: 1.375rem; /* カンプ実測: 本文左端196 → チェックボックス左端218 */
  row-gap: 0.4375rem; /* 行ピッチ27px − 行ボックス高20px（line-height 20.082 の実効高） */
}

.p-search__city-item {
  align-items: center;
  display: flex;
}

/* カンプでは長いターム名（田布施町・平生町・上関町）が隣の列の位置まで伸びる。
   その行は3項目しか無いので重ならない＝カンプどおり折り返さずに伸ばす。
   SPは2列で幅が足りないため折り返しを許可する */
.p-search__city-label {
  color: var(--color-text-strong);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: var(--fw-medium);
  /* JSONの letterSpacing は 0.24em だが、これは選択肢全体が1つのテキストブロックで
     □と文言の間隔ぶんまで tracking に載っているための見かけ値。カンプPNGの描画は
     ほぼ標準字送りなので、そちらに合わせる（PNGが正） */
  letter-spacing: 0.02em;
  line-height: 1.4344285714;
  margin-left: 0.5rem;
  white-space: nowrap;
}

.p-search__checkbox {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--color-bg);
  border: 1px solid var(--color-text-strong);
  border-radius: 0;
  cursor: pointer;
  flex-shrink: 0;
  height: 0.875rem;
  margin: 0;
  transition: border-color 0.2s ease-out, background-color 0.2s ease-out;
  width: 0.875rem;
}

/* チェック印は2本のグラデーションで描いていたが、どちらも箱の端から端まで伸びるため
   ✓ ではなく✕（封筒のような形）に見えていた。共通の mixin（インラインSVG）に置き換える */
.p-search__checkbox:checked {
  background-color: var(--color-main);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.6 8.5l3 3 5.8-6.2'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 76% 76%;
  border-color: var(--color-main);
}
.p-search__checkbox:focus-visible {
  outline: 2px solid var(--color-main);
  outline-offset: 2px;
}

/* ----------------------------------------
  検索結果（カンプ無し・詳細検索カードと同じトーンで追加）
---------------------------------------- */
.p-search__result-bar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  justify-content: space-between;
}

.p-search__result-count {
  color: var(--color-text-strong);
  font-size: 0.875rem;
  font-weight: var(--fw-medium);
  line-height: 1.5;
}

.p-search__result-clear {
  align-items: center;
  background-color: var(--color-accent-light);
  border-radius: 999px;
  color: var(--color-text-strong);
  display: inline-flex;
  font-size: 0.8125rem;
  font-weight: var(--fw-bold);
  line-height: 1.4;
  padding-block: 0.375rem;
  padding-inline: 0.875rem;
  text-decoration: none;
  transition: opacity 0.3s ease-out;
}
.p-search__result-clear:focus-visible {
  outline: 2px solid var(--color-main);
  outline-offset: 2px;
}

.p-search__list {
  margin-top: 1rem;
}

.p-search__item + .p-search__item {
  border-top: 1px solid var(--color-bg-sub);
  margin-top: 0.75rem;
  padding-top: 0.75rem;
}

.p-search__link {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  justify-content: space-between;
  padding-block: 0.25rem;
  text-decoration: none;
  transition: opacity 0.3s ease-out;
  /* SP は店名とチップを必ず別の行にする。
     PC はカンプどおり「店名は左・チップは右」の同じ行のまま */
}
.p-search__link:focus-visible {
  outline: 2px solid var(--color-main);
  outline-offset: 2px;
}

/* 店名は参加店舗紹介ページの店名と同じ見た目に揃える */
.p-search__store-name {
  color: var(--color-accent);
  font-size: 1.0625rem;
  font-weight: var(--fw-black);
  letter-spacing: 0.1176470588em;
  line-height: 1.4;
}

.p-search__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.p-search__empty {
  color: var(--color-text-sub);
  font-size: 0.875rem;
  font-weight: var(--fw-normal);
  line-height: 1.6;
  margin-top: 1rem;
}

/* the_posts_pagination() の出力（WPコア標準クラス） */
.p-search .pagination {
  margin-top: 1.5rem;
}

.p-search .nav-links {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.p-search .page-numbers {
  align-items: center;
  background-color: var(--color-bg-sub);
  border-radius: 999px;
  color: var(--color-text-strong);
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: var(--fw-bold);
  height: 2.5rem;
  justify-content: center;
  line-height: 1;
  min-width: 2.5rem;
  padding-inline: 0.5rem;
  text-decoration: none;
  transition: opacity 0.3s ease-out;
}

.p-search .page-numbers.current {
  background-color: var(--color-main);
  color: var(--color-text-inverse);
}
.p-search a.page-numbers:focus-visible {
  outline: 2px solid var(--color-main);
  outline-offset: 2px;
}

/* ========================================
  terms（応募条件）
  白カード on オレンジ地。見出しリボン(.c-ribbon) + 11項目の見出し+本文
  PC実測: カード幅634px / 前セクションとの間隔109px(howtoボタン下端2027→カード上端2136)
======================================== */
.p-terms {
  padding-top: 3.9375rem; /* カンプ実測: 参加方法カード下端(y2073)→本カード上端(y2136) */
  /* フッターの負マージン（修正指示[14]）で緑帯が重なってきても白カードを前面に保つ */
  position: relative;
  z-index: 1;
}

.p-terms__card {
  background-color: var(--color-bg);
  border-radius: 1rem; /* AIのpathは角丸値を保持しないためpreview目視の近似値 */
  margin-inline: auto;
  max-width: 39.625rem; /* 実測: w634（他カードと共通幅） */
  padding-block: 1.5rem 2.5rem; /* 実測: 上23px→24px / 下は視覚確認の目安値 */
  padding-inline: 1.5625rem; /* カンプ実測: カード左端x173 → リボン左端x198 */
}

.p-terms__list {
  margin-top: 1rem; /* 実測: リボン下端→最初の見出し間の目安 */
  padding-inline: 0.125rem; /* カードpadding25px + 2px = 27px（カンプ本文インセット x200 と一致） */
}

/* カンプは見出し＋本文が1つのテキストフレーム（11px / 行送り14px）で組まれており、
   項目の区切りは空行1行分。よって項目間の余白は行送りと同じ14px（修正指示[5]） */
.p-terms__item {
  margin-top: 0.875rem;
}

.p-terms__item:first-child {
  margin-top: 0;
}

/* カンプ実測: 見出しは本文と同一のテキストフレーム内にあり、フォントサイズ・行送りとも本文と同値
   （size 11 / lineHeight 14）。見出しは緑・太字で区別している（修正指示[5]） */
.p-terms__heading {
  color: var(--color-accent);
  font-family: var(--font-primary);
  font-size: 0.6875rem; /* 実測: フレームの fontSize 11 */
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em; /* 実測: letterSpacingEm 0.01 */
  line-height: 1.273; /* 実測: 行送り14px ÷ フォントサイズ11px */
}

.p-terms__text {
  color: var(--color-text-strong);
  font-family: var(--font-primary);
  /* カンプは和文の約物を詰めて組んでいる（Illustrator の文字組み）。
     palt でブラウザ側の約物を同様に詰め、1行あたりの文字数をカンプに寄せる */
  font-feature-settings: "palt" 1;
  font-size: 0.6875rem;
  font-weight: var(--fw-normal);
  letter-spacing: 0.01em; /* 実測: letterSpacingEm 0.01 */
  line-height: 1.273; /* 実測: 行送り14px ÷ フォントサイズ11px */
  /* 実測: 見出しと本文は連続した1つのテキストフレームで、見出し直下に追加余白は無い */
  margin-top: 0;
  text-align: justify;
}

.p-terms__highlight {
  color: var(--color-accent);
}

.p-terms__bullet-list {
  list-style: none; /* 「・」を文字としてそのまま保持するため独自マーカーは付けない */
  margin-top: 0; /* 実測: 見出し直下に追加余白は無い（本文と同じ扱い） */
  padding-inline-start: 0;
}

.p-terms__bullet-list li {
  color: var(--color-text-strong);
  font-family: var(--font-primary);
  font-feature-settings: "palt" 1;
  font-size: 0.6875rem;
  font-weight: var(--fw-normal);
  letter-spacing: 0.01em; /* 実測: letterSpacingEm 0.01 */
  line-height: 1.273;
  text-align: justify;
}

.p-terms__link {
  color: inherit;
  text-decoration: underline;
  transition: opacity 0.3s ease-out;
}
.p-terms__link:focus-visible {
  outline: 2px solid var(--color-main);
  outline-offset: 2px;
}

/* ========================================
  top-nav
  ページ内ナビ（黄色楕円ボタン6つ）
======================================== */
.p-top-nav {
  background-color: var(--color-main);
  /* 下側の間隔は次セクション（p-news）の padding-top 側で持つ */
  padding-block: 2.5rem 0;
}

.p-top-nav__list {
  display: grid;
  /* カンプ実測: ボタン190px×3・列間31px・行間30px（合計632px） */
  gap: 1.875rem 1.9375rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-inline: auto;
  /* 左右ガターは共通インナー(.inner)と同じ。max-width はガター込みで持つ */
  max-width: 42.5rem;
  padding-inline: 1.5rem;
}

.p-top-nav__btn {
  align-items: center;
  background-color: var(--color-cta);
  /* カンプPNG実測: ナビボタンはCTAより細かい周期（水平11.5px = 垂直方向の帯幅4px） */
  background-image: repeating-linear-gradient(135deg, var(--color-cta-stripe) 0 0.25rem, var(--color-cta) 0.25rem 0.5rem);
  border: 2px solid var(--color-text);
  border-radius: 999px;
  box-shadow: 3px 4px 0 rgb(from var(--color-text) r g b/25%);
  color: var(--color-text-strong);
  display: flex;
  flex-direction: column;
  font-family: var(--font-primary);
  font-size: 1.125rem;
  font-weight: var(--fw-bold);
  justify-content: center;
  letter-spacing: 0.12em;
  line-height: 1.2; /* 2行ボタン（1個目）も min-height 内に収める（修正指示[1]: 全ボタン同高） */
  min-height: 4.0625rem; /* カンプ実測: ボタン高65px */
  /* 2行ボタンでも外形65pxに収める（21.6px×2 + 9px×2 + border2px×2） */
  padding-block: 0.5625rem;
  /* カンプ実測: テキストフレームはボタン幅とほぼ同幅（188/190px）。
     16px あると「デジタルレシート」が3行に折れて他ボタンと高さが揃わない */
  padding-inline: 0.375rem;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.3s ease-out;
}

/* 「デジタルレシートラリーとは」のみ字間が異なる（デザイン実測） */
.p-top-nav__item:first-child .p-top-nav__btn {
  letter-spacing: 0.08em;
}
.p-top-nav__btn:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

/* 「組合店舗向け 参加店舗登録」: 上段に小さいバッジ
   カンプ実測: バッジ高17px（≒font12px+上下2px）。行間・余白を詰めて
   バッジ付きボタンも他ボタンと同じ min-height に収める */
.p-top-nav__btn-small {
  background-color: var(--color-accent);
  border-radius: 999px;
  color: var(--color-text-inverse);
  display: block;
  font-family: var(--font-primary);
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  line-height: 1.1;
  margin-bottom: 0.125rem;
  padding-block: 0.125rem;
  padding-inline: 1.375rem;
}

/* PCのみ表示 */
.u-pc-only {
  display: block;
}

/* 改行だけをPCで有効にする用途（display:block だと余計な行が入るため inline に戻す）。
   .u-pc-only より詳細度が高いので、SPで隠す指定もこちらに持たせる */
br.u-pc-only {
  display: inline;
}

/* SPのみ表示 */
.u-sp-only {
  display: none;
}

/* 視覚的に隠すが読み上げには残す（入力欄の隠しラベル等） */
.u-visually-hidden {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* CF7 ハニーポット（functions/antispam.php がフォーム末尾へ挿入する罠フィールド）は完全に隠す */
.yrr-hp-field {
  display: none;
}
@media screen and (max-width: 828px){
  html {
    font-size: 1.9323671498vw;
  }
}
@media screen and (max-width: 767px){
  html {
    font-size: 16px;
  }
  a[href^="tel:"] {
    pointer-events: all;
  }
  .l-footer {
    padding-block: 2.5rem;
  }
  .l-footer--overlap {
    margin-top: -3rem;
    padding-top: 5.5rem;
  }
  .l-footer__heading {
    font-size: 1.125rem;
  }
  .l-header {
    padding-block: 1rem;
  }
  .l-header__stores {
    display: none;
  }
  .l-header__logo {
    margin-inline: 0.75rem;
    width: 8.75rem;
  }
  .l-menu-btn {
    height: 3.5rem;
    right: 0.75rem;
    top: 0.5rem;
    width: 3.625rem;
  }
  .l-menu-btn__line {
    width: 1.375rem;
  }
  .l-menu-btn__line:nth-of-type(1) {
    top: 1.25rem;
  }
  .l-menu-btn__line:nth-of-type(2) {
    top: 1.6875rem;
  }
  .l-menu-btn__line:nth-of-type(3) {
    top: 2.125rem;
  }
  .l-menu-btn.is-open .l-menu-btn__line:nth-of-type(1) {
    top: 1.6875rem;
  }
  .l-menu-btn.is-open .l-menu-btn__line:nth-of-type(3) {
    top: 1.6875rem;
  }
  .l-drawer__close {
    height: 3.5rem;
    right: 0.75rem;
    top: 0.5rem;
    width: 3.625rem;
  }
  .l-drawer__close-line {
    width: 1.375rem;
  }
  .l-drawer__logo {
    width: 9.375rem;
  }
  .l-drawer__nav {
    margin-top: 1.75rem;
  }
  .l-drawer__nav-list {
    gap: 0.875rem;
    grid-template-columns: minmax(0, 1fr);
    max-width: 26.25rem;
  }
  .l-drawer__nav-item .l-drawer__nav-link {
    font-size: 0.9375rem;
    min-height: 3.75rem;
  }
  .inner {
    padding-inline: 1rem;
  }
  .c-btn {
    font-size: 0.9375rem;
    padding-block: 0.875rem;
  }
  .c-btn--compact {
    font-size: 1rem;
    padding-block: 0.75rem;
  }
  .c-btn--outline {
    font-size: 1rem;
  }
  .c-chip {
    font-size: 0.8125rem;
    min-width: 5.5rem;
  }
  .c-page-title {
    font-size: 1.5rem;
  }
  .c-ribbon {
    font-size: 1rem;
  }
  .p-about__card {
    max-width: none;
    padding-inline: 1.25rem;
  }
  .p-about__body {
    display: block;
  }
  .p-about__figure {
    margin-block: 1.5rem 0;
    margin-inline: auto;
    max-width: 12.625rem; /* SP（デザイン無し）: 書き出し等倍を上限にして拡大させない */
    width: 100%;
  }
  .p-form {
    padding-block: 2.5rem 3.75rem;
  }
  .p-form__card {
    padding-block: 2rem 2.5rem;
    padding-inline: 1.25rem;
  }
  .p-form__title {
    margin-bottom: 1.5rem;
  }
  .p-form__note {
    font-size: 0.75rem;
  }
  .p-form__row {
    display: block;
    margin-top: 1.25rem;
  }
  .p-form__fieldset + .p-form__row {
    margin-top: 1.25rem;
  }
  .p-form__label,
  .p-form__legend {
    font-size: 0.9375rem;
  }
  .p-form__sublabel {
    font-size: 0.9375rem;
  }
  .p-form__required {
    top: 0.07em;
  }
  .p-form__optional {
    top: 0.07em;
  }
  .p-form__control {
    margin-top: 0.5rem;
  }
  .p-form__fieldset {
    display: block;
    margin-top: 2.5rem;
  }
  .p-form__fieldset--address {
    margin-top: 2.5rem;
  }
  .p-form__fieldset--person {
    margin-top: 2.5rem;
  }
  .p-form__fieldset--industry {
    margin-top: 2.5rem;
  }
  .p-form__legend-note {
    font-size: 0.75rem;
  }
  .p-form__subrow {
    margin-top: 0.625rem; /* 実測8〜9pxの丸め */
  }
  .p-form__legend + .p-form__subrow {
    margin-top: 0.375rem;
  }
  .p-form__subrow + .p-form__subrow {
    margin-top: 1rem;
  }
  .p-form__subrow--full {
    margin-top: 0.75rem;
  }
  .p-form__legend + .p-form__subrow--full {
    margin-top: 0.625rem;
  }
  .p-form__fieldset--address .p-form__subrow,
  .p-form__fieldset--image .p-form__subrow,
  .p-form__fieldset--person .p-form__subrow {
    display: block;
  }
  .p-form__fieldset--address .p-form__control--narrow,
  .p-form__fieldset--image .p-form__control--narrow,
  .p-form__fieldset--person .p-form__control--narrow {
    margin-top: 0.375rem;
  }
  .p-form .wpcf7-form-control:is([type=text], [type=tel], [type=email], [type=url]) {
    font-size: max(1rem, 16px);
    padding-block: 0.625rem;
  }
  .p-form__fieldset--industry .wpcf7-form-control-wrap,
  .p-form__fieldset--city .wpcf7-form-control-wrap,
  .p-form__fieldset--union .wpcf7-form-control-wrap {
    margin-top: 1.25rem;
  }
  .p-form__fieldset--city .wpcf7-radio {
    grid-template-columns: minmax(0, 1fr);
    /* SPはタップ領域確保のため、この間隔をlabelのpadding-blockに移す（見た目の行間ピッチは変えない） */
    row-gap: 0;
  }
  .p-form__fieldset--industry .wpcf7-list-item + .wpcf7-list-item,
  .p-form__fieldset--union .wpcf7-list-item + .wpcf7-list-item {
    /* SPはタップ領域確保のため、この10pxをlabelのpadding-blockに移す（見た目の行間ピッチは変えない） */
    margin-top: 0;
  }
  .p-form__fieldset--industry .wpcf7-list-item label,
  .p-form__fieldset--city .wpcf7-list-item label,
  .p-form__fieldset--union .wpcf7-list-item label {
    padding-block: 0.3125rem;
  }
  .p-form--entry {
    padding-block: 1.5rem 3rem;
  }
  .p-form__page-title {
    margin-bottom: 2rem;
  }
  .p-form--entry .wpcf7-form-control:is([type=text], [type=tel], [type=email], [type=url]),
  .p-form--entry select.wpcf7-form-control {
    padding-block: 0.625rem;
  }
  .p-form--entry .p-form__row {
    margin-top: 1.25rem;
  }
  .p-form--entry .p-form__title + .p-form__row {
    margin-top: 1.5rem;
  }
  .p-form--entry .p-form__fieldset--address + .p-form__row {
    margin-top: 1.25rem;
  }
  .p-form--entry .p-form__fieldset--choice + .p-form__row {
    margin-top: 1.25rem;
  }
  .p-form__title--section {
    margin-top: 2.5rem;
  }
  .p-form__fieldset--receipt + .p-form__title--section {
    margin-top: 2.5rem;
  }
  .p-form--entry .p-form__fieldset--address .p-form__subrow {
    -moz-column-gap: 0.75rem;
    column-gap: 0.75rem;
  }
  .p-form__control--split {
    -moz-column-gap: 0.75rem;
    column-gap: 0.75rem;
  }
  .p-form__fieldset--choice {
    margin-top: 1.25rem;
  }
  .p-form__fieldset--choice .p-form__choices {
    margin-top: 0.75rem;
  }
  .p-form__choices .wpcf7-list-item + .wpcf7-list-item {
    /* タップ領域確保のため、この4pxをlabelのpadding-blockに移す（見た目の行間ピッチは変えない） */
    margin-top: 0;
  }
  .p-form__choices .wpcf7-list-item label {
    padding-block: 0.125rem;
  }
  .p-form__choices--with-other .wpcf7-list-item:last-child {
    flex: 0 0 100%;
  }
  .p-form__choices--with-other .wpcf7-form-control-wrap[data-name=survey-source-other] {
    flex: 0 0 100%;
    margin-top: 0.375rem;
  }
  .p-form__fieldset--receipt .p-form__subrow {
    display: block;
    margin-top: 1rem;
  }
  .p-form__fieldset--receipt .p-form__sublabel {
    font-size: 0.9375rem;
  }
  .p-form__fieldset--receipt .p-form__control--narrow {
    margin-top: 0.375rem;
  }
  .p-form__question {
    font-size: 0.9375rem;
  }
  .p-form__question .p-form__required {
    top: -0.147em;
  }
  .p-form textarea.wpcf7-form-control {
    font-size: max(1rem, 16px);
  }
  .p-form__privacy-head {
    font-size: 0.9375rem;
  }
  .p-form__privacy-link {
    font-size: 0.6875rem;
  }
  .p-form select.wpcf7-form-control {
    font-size: max(1rem, 16px);
    padding-block: 0.625rem;
  }
  .p-fv {
    padding-block: 2rem;
  }
  .p-fv__decor {
    display: none;
  }
  .p-howto__card {
    max-width: none;
    padding-block: 1.5rem;
    padding-inline: 1.25rem;
  }
  .p-howto__item {
    flex-wrap: wrap;
    padding-block: 1.25rem;
  }
  .p-howto__step {
    flex: 0 0 100%; /* SPはStepラベルだけで1行使う */
    font-size: 1.125rem;
    width: auto;
  }
  .p-howto__icon {
    height: 7rem;
    margin-block: 0.75rem 0;
    margin-inline: 0;
    width: 7rem; /* 丸の直径 88px 相当（SPはデザイン無しのためコーダー判断） */
  }
  .p-howto__text {
    margin-left: 1rem; /* アイコンとの間（異種要素間のため gap ではなく margin） */
    margin-top: 0.75rem;
  }
  .p-member {
    padding-block: 1.5rem 3rem;
  }
  .p-member__title {
    margin-bottom: 2rem;
  }
  .p-member__name {
    font-size: 1.0625rem;
  }
  .p-member__info-row {
    display: block;
  }
  .p-member__info-row + .p-member__info-row {
    margin-top: 1rem;
  }
  .p-member__info-label {
    display: inline-block;
    flex-basis: auto;
    font-size: 0.75rem;
  }
  .p-member__info-value {
    margin-top: 0.375rem;
  }
  .p-member__map {
    aspect-ratio: 4/3;
  }
  .p-member__back-wrap {
    margin-top: 2rem;
  }
  .p-news {
    padding-top: 2.5rem;
  }
  .p-news__card {
    max-width: none;
    padding-inline: 1.25rem;
  }
  .p-news__item {
    align-items: stretch;
    flex-direction: column;
    padding-block: 0.75rem;
  }
  .p-news__date {
    flex: 0 1 auto;
  }
  .p-news__body {
    margin-left: 0;
    margin-top: 0.25rem;
  }
  .p-news__moreBtn {
    font-size: 0.6875rem;
    min-width: 7.5rem;
    padding-block: 0.5625rem;
  }
  .p-page {
    padding-block: 2.5rem 3.75rem;
  }
  .p-page__title {
    margin-bottom: 2rem;
  }
  .p-page__card {
    padding-block: 2rem;
    padding-inline: 1.25rem;
  }
  .p-search {
    padding-block: 1.5rem 3rem;
  }
  .p-search__title {
    margin-bottom: 2rem;
  }
  .p-search__card + .p-search__card,
  .p-search__form + .p-search__result {
    margin-top: 2rem;
  }
  .p-search__card-title {
    margin-bottom: 1.5rem;
  }
  .p-search__lead {
    font-size: 0.875rem;
  }
  .p-search__keyword input[type=text] {
    padding-block: 0.625rem;
  }
  .p-search__map {
    aspect-ratio: 4/3;
  }
  .p-search__group-title {
    font-size: 1.0625rem;
  }
  .p-search__tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1.25rem;
  }
  .p-search__tile-label {
    font-size: 0.75rem;
  }
  .p-search__cities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1.25rem;
    padding-left: 0;
  }
  .p-search__city-label {
    font-size: 0.8125rem;
    white-space: normal;
  }
  .p-search__link {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.5rem;
  }
  .p-search__store-name {
    font-size: 0.9375rem;
  }
  .p-terms {
    padding-top: 3rem; /* SP仮値 */
  }
  .p-terms__heading {
    font-size: 0.625rem;
  }
  .p-terms__text {
    font-size: 0.625rem;
  }
  .p-terms__bullet-list li {
    font-size: 0.625rem;
  }
  .p-top-nav {
    padding-block: 2rem;
  }
  .p-top-nav__list {
    gap: 0.875rem 0.625rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 28.25rem;
    padding-inline: 1rem;
  }
  .p-top-nav__btn {
    font-size: 0.8125rem;
    min-height: 4.625rem;
    padding-block: 0.625rem;
    padding-inline: 0.625rem;
  }
  .p-top-nav__btn-small {
    font-size: 0.5625rem;
    padding-inline: 0.625rem;
  }
  .u-pc-only {
    display: none;
  }
  br.u-pc-only {
    display: none;
  }
  .u-sp-only {
    display: block;
  }
}
@media screen and (max-width: 375px){
  html {
    font-size: 4.2666666667vw;
  }
}
@media (any-hover: hover){
  .l-footer__address a:hover {
    opacity: 0.7;
  }
  .l-header__logo a:hover {
    opacity: 0.7;
  }
  .c-btn:not(:disabled):hover {
    opacity: 0.7;
  }
  .p-form .wpcf7-form-control[type=file]::file-selector-button:hover {
    background-color: var(--color-bg-sub);
  }
  .p-form__fieldset--industry input[type=radio]:hover,
  .p-form__fieldset--city input[type=radio]:hover,
  .p-form__fieldset--union input[type=checkbox]:hover {
    border-color: var(--color-main);
  }
  .p-form__choices input[type=radio]:hover,
  .p-form__choices input[type=checkbox]:hover {
    border-color: var(--color-main);
  }
  .p-form__privacy-link:hover {
    opacity: 0.7;
  }
  .p-member__info-value a:hover {
    opacity: 0.6;
  }
  .p-member__map-link:hover {
    opacity: 0.7;
  }
  .p-news__moreBtn:hover {
    opacity: 0.7;
  }
  .p-search__bulk:hover {
    opacity: 0.7;
  }
  .p-search__tile:hover {
    opacity: 0.8;
  }
  .p-search__checkbox:hover {
    border-color: var(--color-main);
  }
  .p-search__result-clear:hover {
    opacity: 0.7;
  }
  .p-search__link:hover {
    opacity: 0.7;
  }
  .p-search a.page-numbers:hover {
    opacity: 0.7;
  }
  .p-terms__link:hover {
    opacity: 0.7;
  }
  .p-top-nav__btn:hover {
    opacity: 0.7;
  }
}
@media (prefers-reduced-motion: no-preference){
  html {
    scroll-behavior: smooth;
    interpolate-size: allow-keywords;
  }
}
@media (prefers-reduced-motion: reduce){
  .p-news__extra {
    transition-duration: 0.01ms;
  }
}