/* Cookie の同意の帯（consent.js が差し込む）。どのページの配色でも読めるよう、色はここで閉じる */
/* ★ 画面の左右いっぱいの帯にして、下端に貼り付ける。広い画面では左に文、右にボタン（TN-18） */
.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 14px 24px;
  /* 中身は 1100px の幅に収め、帯そのものは左右いっぱいに伸ばす */
  padding: 14px max(18px, calc((100% - 1100px) / 2));
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(159, 211, 239, 0.35);
  background: rgba(2, 14, 21, 0.98);
  color: #e4edf2;
  font-size: 0.86rem;
  line-height: 1.75;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.4);
}
.consent[hidden] { display: none; }
.consent-text { flex: 1 1 auto; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.consent a { color: #6fd3ef; }
.consent-actions { flex: 0 0 auto; display: flex; gap: 10px; }
/* ★ 2つのボタンは同じ大きさにする。「同意する」だけ青の塗り・白い字にして、押してもらいやすくする
     （2026-10-08、運営の指示）。「同意しない」も枠線で、押せることが分かる見た目は残す */
.consent-button {
  flex: 0 0 9.5em;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid #6fd3ef;
  border-radius: 999px;
  background: transparent;
  color: #e8f6fb;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.consent-button:hover, .consent-button:focus-visible { background: rgba(111, 211, 239, 0.16); }
.consent-button:focus-visible { outline: 2px solid #e8f6fb; outline-offset: 2px; }
/* 青は #0e6f91（--sea-top と --accent のあいだ）。白い字との対比 5.67:1、帯の地との対比 3.44:1 */
.consent-button[data-consent="granted"] { background: #0e6f91; color: #ffffff; }
.consent-button[data-consent="granted"]:hover,
.consent-button[data-consent="granted"]:focus-visible { background: #0b5c78; }
/* 帯が出ているあいだ、ページの最後が帯の下に隠れないようにする */
body.has-consent { padding-bottom: 200px; }
/* 文の右にボタンが入らない幅では、文の下にボタンを置く */
@media (max-width: 680px) {
  .consent { flex-direction: column; align-items: stretch; padding-left: 16px; padding-right: 16px; }
  .consent-actions { justify-content: flex-end; }
  .consent-button { flex: 0 1 9.5em; }
  body.has-consent { padding-bottom: 230px; }
}
@media (max-width: 520px) {
  .consent-button { flex: 1 1 0; }
  body.has-consent { padding-bottom: 290px; }
}