@media (max-width:520px){ .foot-main{ grid-template-columns:minmax(0,1fr); } }
.fbrand { display:flex; flex-direction:column; align-items:flex-start; gap:var(--s4); }
.fbrand .fl { font-size:26px; font-weight:900; line-height:1; letter-spacing:-.02em; text-shadow:3px 3px 0 var(--yellow); text-decoration:none; }
.fbrand .fl em { font-style:normal; color:var(--c-why); }
.fbrand p { font-size:13.5px; line-height:1.85; color:var(--ink2); max-width:34ch; }
.fstamp { display:inline-flex; align-items:center; gap:var(--s2); height:34px; padding:0 16px;
  font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:.06em; line-height:1; color:var(--ink);
  background:var(--bg2); border:2.5px solid var(--line); border-radius:999px; box-shadow:3px 3px 0 var(--shadow); }
.fcol { display:flex; flex-direction:column; align-items:flex-start; gap:var(--s4); }
.fcol h3 { display:inline-flex; align-items:center; height:30px; padding:0 15px;
  font-size:12.5px; font-weight:900; letter-spacing:.08em; line-height:1; color:#fff;
  border:2.5px solid var(--line); border-radius:999px; box-shadow:3px 3px 0 var(--shadow); }
.fcol.c-1 h3 { background:var(--c-zkn); }
.fcol.c-2 h3 { background:var(--c-rep); }
.fcol.c-3 h3 { background:var(--ink); color:var(--bg); }
.fcol ul { display:flex; flex-direction:column; gap:var(--s3); }
.fcol a { font-size:13.5px; font-weight:800; line-height:1.5; text-decoration:none; color:var(--ink2); border-bottom:3px solid transparent; }
.fcol a:hover { color:var(--ink); border-bottom-color:var(--yellow); }
.foot-bar { border-top:3px solid var(--line); padding:var(--s5) 0 var(--s6);
  display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5); align-items:baseline; justify-content:space-between; }
.foot-bar p { font-size:12.5px; line-height:1.8; color:var(--ink3); max-width:76ch; }
.foot-bar .cp { font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--ink3); line-height:1; }

@media (prefers-reduced-motion:reduce){ *{ transition:none!important; animation:none!important; } }
/* =========================================================
   お問い合わせフォーム（Contact Form 7）
   ========================================================= */
.oh-form { display:flex; flex-direction:column; gap:var(--s5); max-width:62ch; margin-bottom:var(--s8); }
.oh-form p { margin:0; }
.oh-f-row label { display:block; font-size:14.5px; font-weight:900; color:var(--ink); }
/* CF7 はコントロールを span.wpcf7-form-control-wrap で包む。
   これをブロックにして、ラベル文言＋バッジは同じ行のまま入力欄だけ下に落とす。 */
.oh-f-row label > .wpcf7-form-control-wrap,
.oh-f-row label > input, .oh-f-row label > select, .oh-f-row label > textarea {
  display:block; margin-top:var(--s2); }
.oh-f-row .req, .oh-f-row .opt { display:inline-flex; align-items:center; height:22px; padding:0 9px;
  margin-left:8px; font-size:10.5px; font-weight:900; letter-spacing:.06em; line-height:1;
  border:2px solid var(--line); border-radius:999px; vertical-align:2px; }
.oh-f-row .req { background:var(--c-why); color:#fff; }
.oh-f-row .opt { background:var(--bg3); color:var(--ink2); }

.oh-form input[type="text"], .oh-form input[type="email"], .oh-form select, .oh-form textarea {
  width:100%; font-family:inherit; font-size:15px; font-weight:500; line-height:1.7; color:var(--ink);
  background:var(--bg2); border:3px solid var(--line); border-radius:14px;
  padding:14px 16px; box-shadow:4px 4px 0 var(--shadow); }
.oh-form input[type="text"], .oh-form input[type="email"], .oh-form select { height:58px; padding:0 16px; }
.oh-form select { appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 22px) 26px, calc(100% - 15px) 26px;
  background-size:7px 7px, 7px 7px; background-repeat:no-repeat; padding-right:46px; }
.oh-form textarea { min-height:190px; resize:vertical; }
.oh-form ::placeholder { color:var(--ink3); font-weight:500; }
.oh-form input:focus, .oh-form select:focus, .oh-form textarea:focus {
  outline:none; border-color:var(--c-mth); box-shadow:4px 4px 0 var(--c-mth); }

.oh-f-consent { display:flex; align-items:center; gap:var(--s3); font-size:14px; font-weight:700; color:var(--ink2);
  background:var(--bg3); border:3px solid var(--line); border-radius:14px; padding:var(--s4) var(--s5); }
.oh-f-consent a { color:var(--c-mth); font-weight:900; }
.oh-f-consent input[type="checkbox"] { width:22px; height:22px; accent-color:var(--c-why); flex:none; cursor:pointer; }
.oh-f-consent .wpcf7-list-item { margin:0; }

.oh-f-submit input[type="submit"] { display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--h-btn); padding:0 44px; font-family:inherit; font-size:16px; font-weight:900; letter-spacing:.04em;
  color:#fff; background:var(--c-why); border:3px solid var(--line); border-radius:999px;
  box-shadow:6px 6px 0 var(--shadow); cursor:pointer; transition:transform .1s ease, box-shadow .1s ease; }
.oh-f-submit input[type="submit"]:hover { transform:translate(3px,3px); box-shadow:3px 3px 0 var(--shadow); }
.oh-f-submit input[type="submit"]:disabled { opacity:.5; cursor:not-allowed; }

/* CF7 のメッセージ表示 */
.wpcf7-not-valid-tip { font-size:13px; font-weight:900; color:var(--c-why); margin-top:var(--s2); }
.wpcf7-response-output { font-size:14.5px; font-weight:700; line-height:1.8; color:var(--ink);
  background:var(--bg3); border:3px solid var(--line) !important; border-radius:14px;
  padding:var(--s4) var(--s5) !important; margin:var(--s5) 0 0 !important; max-width:62ch; }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output { border-color:var(--c-why) !important; }
.wpcf7 form.sent .wpcf7-response-output { border-color:var(--c-src) !important; }
.wpcf7-spinner { margin-left:var(--s3); }

/* =========================================================
   裏取り率メーター（図鑑詳細）
   掲載サイトの評価ではなく、当白書の調査到達度を示す指標。
   ========================================================= */
.cov { border:3px solid var(--line); border-radius:20px; background:var(--bg2);
  box-shadow:6px 6px 0 var(--shadow); padding:var(--s5) var(--s6) var(--s5);
  display:flex; flex-direction:column; gap:var(--s3); margin-bottom:var(--s8); }
.cov-h { display:flex; align-items:center; justify-content:space-between; gap:var(--s4); }
.cov-h h2 { font-size:16px; font-weight:900; letter-spacing:.02em; }
.cov-h b { font-size:40px; font-weight:900; line-height:1; letter-spacing:-.03em;
  color:var(--c-mth); font-variant-numeric:tabular-nums; }
.cov-bar { display:flex; height:22px; border:3px solid var(--line); border-radius:999px;
  overflow:hidden; background:var(--bg3); }
.cov-bar i { display:block; height:100%; }
.cov-bar i.p { background:var(--c-mth); }
.cov-bar i.s { background:var(--c-zkn); }
.cov-k { display:flex; flex-wrap:wrap; gap:var(--s4); }
.cov-k span { display:inline-flex; align-items:center; gap:var(--s2);
  font-size:13px; font-weight:800; color:var(--ink2); font-variant-numeric:tabular-nums; }
.cov-k .src { margin-left:0; }
.cov p { font-size:13.5px; line-height:1.85; color:var(--ink2); margin:0; }
.cov p b { color:var(--ink); font-weight:900; }

/* 出典リスト */
.srclist { display:flex; flex-direction:column; gap:var(--s2); }
.srclist li { position:relative; padding-left:22px; font-size:14px; line-height:1.8; color:var(--ink2); }
.srclist li::before { content:""; position:absolute; left:0; top:11px; width:9px; height:9px;
  background:var(--c-mth); border:2px solid var(--line); border-radius:2px; }
.srclist a { color:var(--c-mth); font-weight:800; word-break:break-all; }

/* 更新履歴 */
.chlog { display:flex; flex-direction:column; gap:var(--s3); }
.chlog li { display:grid; grid-template-columns:112px minmax(0,1fr); gap:var(--s3);
  padding-bottom:var(--s3); border-bottom:2px solid var(--bg3);
  font-size:14px; line-height:1.8; color:var(--ink2); }
.chlog li span { font-family:var(--mono); font-size:12.5px; font-weight:700; color:var(--ink3); }
@media (max-width:620px){ .chlog li { grid-template-columns:minmax(0,1fr); gap:var(--s1); } }
/* 招待コード（図鑑CTA内） */
.zk-code { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"ttl ttl" "val btn";
  gap:var(--s2) var(--s3); align-items:center; background:var(--bg2);
  border:3px solid var(--line); border-radius:14px; padding:var(--s3) var(--s3) var(--s3) var(--s4); }
.zk-code-ttl { grid-area:ttl; font-size:11px; font-weight:900; letter-spacing:.1em; color:var(--ink3); }
.zk-code-val { grid-area:val; font-family:var(--mono); font-size:23px; font-weight:700; letter-spacing:.1em;
  color:var(--ink); user-select:all; -webkit-user-select:all; overflow-wrap:anywhere; line-height:1.2; }
.zk-copy { grid-area:btn; display:inline-flex; align-items:center; justify-content:center;
  min-height:40px; padding:0 16px; font-family:inherit; font-size:12.5px; font-weight:900; line-height:1;
  color:#fff; background:var(--c-mth); border:3px solid var(--line); border-radius:999px;
  box-shadow:3px 3px 0 var(--shadow); cursor:pointer; white-space:nowrap;
  transition:transform .1s ease, box-shadow .1s ease, background .1s ease; }
.zk-copy:hover { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--shadow); }
.zk-copy.is-done { background:var(--c-src); }
.zk-copy.is-fail { background:var(--c-zkn); }
.zk-cta small strong { color:#fff; }

/* =========================================================
   証拠画像（図鑑本文内）
   引用として成立させるため、本文が主・画像が従の関係を保つ。
   撮影日と出典URLのキャプションを必ず添える。
   ========================================================= */
.zk-fig { margin:var(--s5) 0 var(--s6); display:flex; flex-direction:column; gap:var(--s3);
  max-width:760px; }
.zk-fig img { width:100%; height:auto; display:block;
  border:3px solid var(--line); border-radius:14px; box-shadow:6px 6px 0 var(--shadow); background:var(--bg2); }
.zk-fig figcaption { display:flex; flex-wrap:wrap; gap:var(--s2) var(--s3); align-items:baseline;
  font-size:12.5px; line-height:1.75; color:var(--ink3); }
.zk-fig figcaption b { font-size:13px; font-weight:900; color:var(--ink2); }
.zk-fig figcaption .cap-date { font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
  display:inline-flex; align-items:center; height:24px; padding:0 10px;
  background:var(--bg3); border:2px solid var(--line); border-radius:999px; color:var(--ink2); }
.zk-fig figcaption a { color:var(--c-mth); font-weight:700; word-break:break-all; }

/* =========================================================
   証拠画像（図鑑本文内）
   引用として成立させるため、本文が主・画像が従の関係を保つ。
   撮影日と出典URLのキャプションを必ず添える。
   ========================================================= */
.zk-fig { margin:var(--s5) 0 var(--s6); display:flex; flex-direction:column; gap:var(--s3);
  max-width:760px; }
.zk-fig img { width:100%; height:auto; display:block;
  border:3px solid var(--line); border-radius:14px; box-shadow:6px 6px 0 var(--shadow); background:var(--bg2); }
.zk-fig figcaption { display:flex; flex-wrap:wrap; gap:var(--s2) var(--s3); align-items:baseline;
  font-size:12.5px; line-height:1.75; color:var(--ink3); }
.zk-fig figcaption b { font-size:13px; font-weight:900; color:var(--ink2); }
.zk-fig figcaption .cap-date { font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
  display:inline-flex; align-items:center; height:24px; padding:0 10px;
  background:var(--bg3); border:2px solid var(--line); border-radius:999px; color:var(--ink2); }
.zk-fig figcaption a { color:var(--c-mth); font-weight:700; word-break:break-all; }

/* =========================================================