/* Cookie の同意の確認（consent.js が差し込む）。
   ★ 色と書体は index.html・legal.css の :root と同じ値（生成り #fffdf8 の地・深緑 #2f5d50・明朝の見出し）。
     どのページでも同じに見えるよう、変数に頼らずここで閉じる。サイトの配色を変えたら、ここも変える。
   ★ 画面の右下に浮かぶカードにする（サイトの .card と同じ枠線と角の丸み 12px）。
     ボタンはフォームの入力欄と同じ角の丸み 8px。 */
.consent {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 20;
  box-sizing: border-box;
  width: 400px;
  max-width: calc(100% - 40px);
  padding: 20px 22px 18px;
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  border: 1px solid #d8d0c0;
  border-top: 3px solid #2f5d50;
  border-radius: 12px;
  background: #fffdf8;
  color: #2b2a26;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 30px rgba(43, 42, 38, 0.16);
}
.consent[hidden] { display: none; }
.consent-title {
  margin: 0 0 6px;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #2f5d50;
}
.consent-text { margin: 0; color: #6b675c; overflow-wrap: anywhere; }
.consent a { color: #2f5d50; }
.consent-actions { display: flex; gap: 10px; margin-top: 14px; }
/* 2つのボタンは同じ大きさ。「同意する」だけ深緑の塗り、「同意しない」は深緑の枠線 */
.consent-button {
  flex: 1 1 0;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #2f5d50;
  border-radius: 8px;
  background: transparent;
  color: #2f5d50;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.consent-button:hover, .consent-button:focus-visible { background: #d9e6e0; }
.consent-button:focus-visible { outline: 2px solid #2f5d50; outline-offset: 2px; }
/* 深緑 #2f5d50 と生成りの字 #f6f1e7 の対比は約 6.6:1 */
.consent-button[data-consent="granted"] { background: #2f5d50; color: #f6f1e7; }
.consent-button[data-consent="granted"]:hover,
.consent-button[data-consent="granted"]:focus-visible { background: #244a40; }
/* 確認が出ているあいだ、ページの最後が隠れないようにする（--consent-h は consent.js が実測して入れる） */
body.has-consent { padding-bottom: calc(var(--consent-h, 260px) + 32px); }
/* 狭い幅では、左右に余白を残したまま下に広げる */
@media (max-width: 680px) {
  .consent { right: 12px; left: 12px; bottom: 12px; width: auto; max-width: none; padding: 16px 16px 14px; }
  body.has-consent { padding-bottom: calc(var(--consent-h, 280px) + 24px); }
}