@charset "utf-8";
/*
 * Cookie 許可／拒否 バナーと、固定ページ用ボタンのスタイル。
 * 操作方法・文言の出し分けは js/cookie-consent.js と functions.php が担当。
 * 色合いはテーマ（style.css / theme.json）のアクセント色 #00b776 に合わせます。
 */

/* === バナー（画面下部の固定表示）============== */
.cookie-consent{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  background: #1b1b24;
  color: #fff;
  padding: 16px 20px;
  box-shadow: 0 -4px 14px rgba(0, 0, 0, .25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(110%);
  transition: transform .35s ease, opacity .35s ease, visibility .35s;
}
.cookie-consent.is-visible{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* 動きを減らす設定の人には、滑り込みの動きを付けません（2026-09-24）。 */
@media (prefers-reduced-motion: reduce){
  .cookie-consent{ transition: none; }
}
.cookie-consent__inner{
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
}
.cookie-consent__text{
  flex: 1 1 58%;
  font-size: .84rem;
  line-height: 1.7;
  letter-spacing: .05em;
}
.cookie-consent__text a{
  color: #7fd8ff;
  text-decoration: underline;
}
.cookie-consent__actions{
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

@media (max-width: 640px){
  .cookie-consent__text{ flex-basis: 100%; }
  .cookie-consent__actions{ flex-basis: 100%; justify-content: stretch; }
  .cookie-consent__actions .cookie-consent__btn{ flex: 1 1 0; }
}

/* === 共通ボタン（バナー／固定ページの両方で使う）============== */
.cookie-consent__btn{
  font: inherit;
  padding: .65em 1.5em;
  border-radius: 6px;
  letter-spacing: .06em;
  cursor: pointer;
  transition: opacity .2s ease-in-out;
}
.cookie-consent__btn:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.cookie-consent__allow{
  background: #00b776;
  border: 1px solid #00b776;
  color: #fff;
}
.cookie-consent__allow:hover{
  opacity: .85;
}
.cookie-consent__deny{
  background: transparent;
  border: 1px solid #9294a0;
  color: #fff;
}
.cookie-consent__deny:hover{
  opacity: .75;
}

/* === 固定ページ用（「このサイトについて」）============== */
/*
 * 2026-09-24：www.eng.hokudai.ac.jp/about/ の「設定しなおす」ボタンと同じ、
 * 飾りの無い形。箱・題・説明文は無く、「現在の設定」の1行と2つのボタンだけ。
 * 2つのボタンは同じ見た目（白地に枠）で、押されている側（aria-pressed）に
 * ✓ と緑の枠を付けて、いまの状態が見えるようにします。
 * 本文の段落と同じ下の余白（.news_single_text p の 1.2rem）に合わせます。
 */
.cookie-consent-inline{
  margin: 0 0 1.2rem;
}
.cookie-consent-inline__state{
  margin: 0 0 .6em;
  font-weight: 700;
  color: #1b1b24;
}
.cookie-consent-inline__buttons{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cookie-consent-inline .cookie-consent__btn{
  background: #fff;
  color: #1b1b24;
  border: 1px solid #6b6e7a;
  border-radius: 4px;
  padding: .5em 1.3em;
}
.cookie-consent-inline .cookie-consent__btn:hover{
  opacity: 1;
  background: #f0f2f4;
}
.cookie-consent-inline .cookie-consent__btn:focus-visible{
  outline: 2px solid #005a3c;
  outline-offset: 3px;
}
.cookie-consent-inline .cookie-consent__btn[aria-pressed="true"]{
  background: #e6f7f0;
  border-color: #00b776;
  box-shadow: inset 0 0 0 1px #00b776;
}
.cookie-consent-inline .cookie-consent__btn[aria-pressed="true"]::before{
  content: "\2713 ";
  color: #007a50;
}
.cookie-consent-inline__policy{
  margin: 1em 0 0;
  font-size: .85rem;
}
.cookie-consent-inline__policy a{
  color: #007a50;
  text-decoration: underline;
}