/* ------------------------------------------------------------------
 * Complianz — Sin Filtros Guía ブランド適用
 * プラグイン本体のCSSを上書きする。Complianz更新でクラス名が変わる
 * 可能性があるため、更新後はバナー表示を必ず目視確認すること。
 * 管理画面: Complianz → 見た目 → 「プラグインのスタイルを使用」をオンのまま。
 * ------------------------------------------------------------------ */

/* ---------- バナー本体 ---------- */
#cmplz-cookiebanner-container .cmplz-cookiebanner{
  font-family:'Noto Sans JP',Archivo,'Helvetica Neue',Arial,sans-serif;
  background:var(--bg-base,#fbfaf9);
  color:var(--text-base,#3d3a36);
  border:1px solid var(--line-strong,#111110);
  border-radius:0;
  box-shadow:0 18px 48px rgba(17,17,16,.14);
  padding:28px 30px 26px;
  max-width:460px;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner.bottom-right,
#cmplz-cookiebanner-container .cmplz-cookiebanner.bottom-left{margin:24px}

/* 見出し。ES スタンプを疑似要素で足す */
#cmplz-cookiebanner-container .cmplz-header{
  display:flex; align-items:center; gap:10px;
  padding:0 0 14px; margin:0 0 16px;
  border-bottom:1px solid var(--line-base,#e2e0dc);
}
#cmplz-cookiebanner-container .cmplz-header .cmplz-title{
  font-family:Archivo,sans-serif;
  font-size:15px; font-weight:600; letter-spacing:.06em;
  color:var(--text-strong,#111110);
  margin:0; padding:0;
}
#cmplz-cookiebanner-container .cmplz-header .cmplz-title::after{
  content:'ES';
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; margin-left:10px; vertical-align:middle;
  background:var(--accent,#E8480A); color:#fff;
  font-size:9px; font-weight:600; letter-spacing:.06em;
}
#cmplz-cookiebanner-container .cmplz-header .cmplz-close{
  color:var(--text-muted,#8b8781); font-size:18px; line-height:1;
}
#cmplz-cookiebanner-container .cmplz-header .cmplz-close:hover{color:var(--text-strong,#111110)}

/* 本文 */
#cmplz-cookiebanner-container .cmplz-body{padding:0}
#cmplz-cookiebanner-container .cmplz-message{
  font-size:13px; line-height:1.9; color:var(--text-body,#57544f);
  margin:0 0 18px; text-wrap:pretty;
}

/* カテゴリのチェックボックス列 */
#cmplz-cookiebanner-container .cmplz-categories{
  display:flex; flex-direction:column; gap:0;
  border-top:1px solid var(--line-base,#e2e0dc);
  margin-bottom:18px;
}
#cmplz-cookiebanner-container .cmplz-category{
  border:0; border-bottom:1px solid var(--line-base,#e2e0dc);
  border-radius:0; background:transparent; padding:12px 0;
}
#cmplz-cookiebanner-container .cmplz-category .cmplz-category-header{align-items:center}
#cmplz-cookiebanner-container .cmplz-category .cmplz-category-title{
  font-size:13px; font-weight:500; color:var(--text-strong,#111110);
}
#cmplz-cookiebanner-container .cmplz-category .cmplz-description{
  font-size:12px; line-height:1.8; color:var(--text-muted,#8b8781); margin-top:8px;
}
#cmplz-cookiebanner-container .cmplz-category .cmplz-banner-checkbox .cmplz-label{font-size:13px}
#cmplz-cookiebanner-container input[type=checkbox]{accent-color:var(--accent,#E8480A)}
/* トグル型スイッチを使う設定のとき */
#cmplz-cookiebanner-container .cmplz-banner-checkbox input:checked + .cmplz-slider,
#cmplz-cookiebanner-container .cmplz-slider:has(input:checked){background:var(--accent,#E8480A)}

/* ---------- ボタン ---------- */
/* 「同意」と「拒否」は同格に見せる。EUの要件でもあり、
   片方だけ目立たせると同意の有効性が争われる。 */
#cmplz-cookiebanner-container .cmplz-buttons{
  display:flex; flex-wrap:wrap; gap:10px; margin:0 0 16px;
}
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn{
  flex:1 1 140px;
  border-radius:0;
  font-family:inherit; font-size:13px; font-weight:400; letter-spacing:.05em;
  padding:14px 18px; min-height:46px;
  transition:background 140ms ease,color 140ms ease,border-color 140ms ease;
}
#cmplz-cookiebanner-container .cmplz-btn.cmplz-accept{
  background:var(--bg-inverse,#111110); color:var(--text-on-inverse,#fbfaf9);
  border:1px solid var(--bg-inverse,#111110);
}
#cmplz-cookiebanner-container .cmplz-btn.cmplz-accept:hover{
  background:var(--accent,#E8480A); border-color:var(--accent,#E8480A);
}
#cmplz-cookiebanner-container .cmplz-btn.cmplz-deny{
  background:transparent; color:var(--text-strong,#111110);
  border:1px solid var(--line-strong,#111110);
}
#cmplz-cookiebanner-container .cmplz-btn.cmplz-deny:hover{
  background:var(--bg-alt,#f4f3f1);
}
#cmplz-cookiebanner-container .cmplz-btn.cmplz-view-preferences,
#cmplz-cookiebanner-container .cmplz-btn.cmplz-save-preferences{
  flex:1 1 100%;
  background:transparent; color:var(--text-muted,#8b8781);
  border:1px solid var(--line-field,#d8d5d0);
}
#cmplz-cookiebanner-container .cmplz-btn.cmplz-view-preferences:hover,
#cmplz-cookiebanner-container .cmplz-btn.cmplz-save-preferences:hover{
  color:var(--text-strong,#111110); border-color:var(--text-strong,#111110);
}
#cmplz-cookiebanner-container .cmplz-btn:focus-visible{
  outline:2px solid var(--accent,#E8480A); outline-offset:2px;
}

/* ---------- フッターのリンク ---------- */
#cmplz-cookiebanner-container .cmplz-links{
  border-top:1px solid var(--line-base,#e2e0dc);
  padding-top:14px; gap:16px;
}
#cmplz-cookiebanner-container .cmplz-links .cmplz-link{
  font-size:11px; letter-spacing:.02em;
  color:var(--text-muted,#8b8781); text-decoration:none;
  border-bottom:1px solid transparent;
}
#cmplz-cookiebanner-container .cmplz-links .cmplz-link:hover{
  color:var(--accent,#E8480A); border-bottom-color:var(--accent,#E8480A);
}
#cmplz-cookiebanner-container .cmplz-documents{display:flex; flex-wrap:wrap; gap:14px}

/* ---------- 管理タブ（再表示ボタン） ---------- */
.cmplz-manage-consent{
  border-radius:0 !important;
  background:var(--bg-inverse,#111110) !important;
  color:var(--text-on-inverse,#fbfaf9) !important;
  font-family:'Noto Sans JP',Archivo,sans-serif !important;
  font-size:11px !important; letter-spacing:.08em;
  padding:10px 16px !important;
  border:0 !important;
}
.cmplz-manage-consent:hover{background:var(--accent,#E8480A) !important}

/* ---------- ブロック済みコンテンツのプレースホルダ（地図など） ---------- */
.cmplz-placeholder-element,
.cmplz-blocked-content-container{
  border:1px solid var(--line-field,#d8d5d0);
  border-radius:0;
  background-color:var(--bg-media,#efedea);
  background-image:repeating-linear-gradient(135deg,#e4e1dc 0 2px,transparent 2px 9px);
}
.cmplz-blocked-content-notice{
  background:var(--bg-base,#fbfaf9) !important;
  color:var(--text-body,#57544f) !important;
  border:1px solid var(--line-strong,#111110) !important;
  border-radius:0 !important;
  font-family:'Noto Sans JP',Archivo,sans-serif !important;
  font-size:12px !important; line-height:1.8 !important;
  padding:14px 18px !important;
  box-shadow:none !important;
}
.cmplz-blocked-content-notice .cmplz-links a,
.cmplz-blocked-content-notice a{color:var(--accent,#E8480A) !important; text-decoration:underline}

/* ---------- 本文中に置く同意管理リンク ---------- */
.hg-consent-link{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; color:var(--accent,#E8480A);
  border:0; background:transparent; padding:0; cursor:pointer;
  font-family:inherit; text-decoration:underline;
}
.hg-consent-link:hover{color:var(--text-strong,#111110)}

/* ---------- 下部バー（Position: Bottom）----------
 * 初期表示は画面幅いっぱいの横長バー。説明文が左、ボタンが右。
 * カテゴリ一覧は「View preferences」を押したときだけ出す
 * （押すと banner に cmplz-categories-visible が付く）。
 * .cmplz-body を無条件にフレックス化すると3列に割れるので、
 * カテゴリ非表示時だけ横並びにすること。
 * -------------------------------------------------------------- */
#cmplz-cookiebanner-container .cmplz-cookiebanner.bottom,
#cmplz-cookiebanner-container .cmplz-cookiebanner.top{
  max-width:none; width:100%; margin:0;
  border-left:0; border-right:0;
  padding:18px clamp(20px,4vw,48px) 16px;
  box-shadow:0 -10px 34px rgba(17,17,16,.10);
}
#cmplz-cookiebanner-container .cmplz-cookiebanner.bottom{border-bottom:0}
#cmplz-cookiebanner-container .cmplz-cookiebanner.top{border-top:0}

/* 見出し行は詰める */
#cmplz-cookiebanner-container .cmplz-cookiebanner.bottom .cmplz-header{
  padding-bottom:10px; margin-bottom:12px;
}

@media (min-width:900px){
  /* --- 初期表示（カテゴリ閉） --- */
  #cmplz-cookiebanner-container .cmplz-cookiebanner.bottom:not(.cmplz-categories-visible) .cmplz-categories{
    display:none;
  }
  #cmplz-cookiebanner-container .cmplz-cookiebanner.bottom:not(.cmplz-categories-visible) .cmplz-body{
    display:flex; align-items:center; gap:36px;
  }
  #cmplz-cookiebanner-container .cmplz-cookiebanner.bottom:not(.cmplz-categories-visible) .cmplz-message{
    flex:1; margin:0; font-size:12.5px; max-width:80ch;
  }
  #cmplz-cookiebanner-container .cmplz-cookiebanner.bottom:not(.cmplz-categories-visible) .cmplz-buttons{
    flex:none; width:auto; margin:0; flex-wrap:nowrap; gap:10px;
  }
  #cmplz-cookiebanner-container .cmplz-cookiebanner.bottom:not(.cmplz-categories-visible) .cmplz-buttons .cmplz-btn{
    flex:none; min-width:120px; padding:12px 20px; white-space:nowrap;
  }
  #cmplz-cookiebanner-container .cmplz-cookiebanner.bottom:not(.cmplz-categories-visible) .cmplz-btn.cmplz-view-preferences{
    width:auto; min-width:0; border-color:transparent; text-decoration:underline; padding:12px 8px;
  }

  /* --- カテゴリを開いたとき：中央寄せの読みやすい幅に --- */
  #cmplz-cookiebanner-container .cmplz-cookiebanner.bottom.cmplz-categories-visible{
    padding-left:0; padding-right:0;
  }
  #cmplz-cookiebanner-container .cmplz-cookiebanner.bottom.cmplz-categories-visible > *{
    max-width:760px; margin-left:auto; margin-right:auto;
    padding-left:clamp(20px,4vw,48px); padding-right:clamp(20px,4vw,48px);
  }
  #cmplz-cookiebanner-container .cmplz-cookiebanner.bottom.cmplz-categories-visible .cmplz-buttons .cmplz-btn{
    flex:1 1 0;
  }
}

/* リンク行 */
#cmplz-cookiebanner-container .cmplz-cookiebanner.bottom .cmplz-links{
  margin-top:12px; padding-top:10px;
}

/* ---------- SP ---------- */
@media (max-width:640px){
  #cmplz-cookiebanner-container .cmplz-cookiebanner{
    max-width:none; margin:0 !important; padding:22px 20px 20px;
    border-left:0; border-right:0; border-bottom:0;
  }
  #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn{flex:1 1 100%}
}

/* ==================================================================
 * 下部フル幅バー — 強制上書き
 * 注意: バナー要素に .bottom は付かない。位置は Complianz が動的生成する
 * banner-1-optimized-*.css の transform / left で決まるため、
 * セレクタは .cmplz-cookiebanner 単体、指定は !important で押し切る。
 * ================================================================== */
#cmplz-cookiebanner-container .cmplz-cookiebanner{
  position:fixed !important;
  left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
  transform:none !important;
  width:100% !important; max-width:none !important; min-width:0 !important;
  height:auto !important; max-height:80vh !important;
  margin:0 !important;
  padding:16px clamp(20px,4vw,48px) 14px !important;
  border:0 !important;
  border-top:1px solid #111110 !important;
  border-radius:0 !important;
  overflow-y:auto !important;
  box-shadow:0 -10px 34px rgba(17,17,16,.10) !important;
}

/* 初期表示：カテゴリを隠す（View preferences で展開） */
#cmplz-cookiebanner-container .cmplz-cookiebanner:not(.cmplz-categories-visible) .cmplz-categories{
  display:none !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body{
  display:block !important; width:100% !important; padding:0 !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message{
  width:auto !important; max-width:none !important;
  margin:0 0 14px !important; font-size:12.5px !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons{
  display:flex !important; width:auto !important; margin:0 !important;
  gap:10px !important; flex-wrap:wrap !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn{
  width:auto !important; min-width:130px !important; height:auto !important;
  flex:0 0 auto !important; padding:12px 20px !important; white-space:nowrap !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences{
  min-width:0 !important; border-color:transparent !important;
  text-decoration:underline !important; padding:12px 10px !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header{
  width:100% !important; padding:0 0 10px !important; margin:0 0 12px !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links{
  width:100% !important; margin:12px 0 0 !important; padding:10px 0 0 !important;
}

@media (min-width:900px){
  /* 説明文（左）とボタン（右）を1行に */
  #cmplz-cookiebanner-container .cmplz-cookiebanner:not(.cmplz-categories-visible) .cmplz-body{
    display:flex !important; align-items:center !important; gap:36px !important;
  }
  #cmplz-cookiebanner-container .cmplz-cookiebanner:not(.cmplz-categories-visible) .cmplz-message{
    flex:1 1 auto !important; margin:0 !important;
  }
  #cmplz-cookiebanner-container .cmplz-cookiebanner:not(.cmplz-categories-visible) .cmplz-buttons{
    flex:0 0 auto !important; flex-wrap:nowrap !important;
  }
  /* カテゴリ展開時は読みやすい幅で中央に */
  #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-categories-visible .cmplz-header,
  #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-categories-visible .cmplz-body,
  #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-categories-visible .cmplz-links{
    max-width:760px !important; margin-left:auto !important; margin-right:auto !important;
  }
}

@media (max-width:640px){
  #cmplz-cookiebanner-container .cmplz-cookiebanner{
    padding:18px 20px 16px !important;
  }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn{
    flex:1 1 100% !important; min-width:0 !important;
  }
}

/* ボタンの縦伸びを止める（親の flex stretch 対策） */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons{
  align-items:center !important;
  height:auto !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn{
  align-self:center !important;
  height:auto !important;
  min-height:46px !important;
  max-height:none !important;
  line-height:1.3 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* 900px 未満：Accept / Deny を等幅、View preferences は下に1行 */
@media (max-width:899px){
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons{
    flex-wrap:wrap !important;
  }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept,
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny{
    flex:1 1 0 !important;
    min-width:0 !important;
  }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences{
    flex:1 1 100% !important;
    padding:10px 0 !important;
  }
}

/* ボタン列は必ず横方向。プラグイン側が column + 固定高で組むため打ち消す */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons{
  flex-direction:row !important;
  min-height:0 !important;
  max-height:none !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn{
  height:46px !important;
  min-height:46px !important;
  max-height:46px !important;
  flex-basis:auto !important;
}
/* カテゴリ未展開のときは Save preferences を出さない */
#cmplz-cookiebanner-container .cmplz-cookiebanner:not(.cmplz-categories-visible) .cmplz-btn.cmplz-save-preferences{
  display:none !important;
}
@media (max-width:899px){
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences{
    height:40px !important; min-height:40px !important; max-height:40px !important;
  }
}

/* バナー本体は display:grid + grid-template-rows:minmax(0,1fr) で
   組まれており、行が引き伸ばされてボタンが縦に伸びる。グリッドを解除する。 */
/* display には触れないこと。プラグインが表示・非表示の制御に使っており、
   !important で固定すると「消えない」か「出ない」のどちらかになる。
   崩れの原因は grid-template-rows:minmax(0,1fr) による行の引き伸ばしなので、
   行・列の指定だけを上書きする。 */
#cmplz-cookiebanner-container .cmplz-cookiebanner{
  grid-template-columns:1fr !important;
  grid-template-rows:auto auto auto !important;
  align-content:start !important;
  align-items:start !important;
  gap:0 !important;
}

/* ---------- 最終レイアウト調整 ---------- */
/* 余白を広めに */
#cmplz-cookiebanner-container .cmplz-cookiebanner{
  padding:22px clamp(24px,5vw,64px) 20px !important;
}

/* View preferences が2つ出力されるので後続の重複を隠す */
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-view-preferences ~ .cmplz-btn.cmplz-view-preferences,
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-view-preferences + .cmplz-btn.cmplz-manage-options,
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-manage-options{
  display:none !important;
}

@media (min-width:900px){
  /* 説明文（左）／ ボタン（右）。Accept が右端に来るよう row-reverse */
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body{
    display:flex !important;
    align-items:center !important;
    gap:48px !important;
    flex-wrap:wrap !important;
  }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message{
    flex:1 1 340px !important;
    margin:0 !important;
  }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories{
    flex:1 1 100% !important;
    order:3 !important;
  }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons{
    flex:0 0 auto !important;
    flex-direction:row-reverse !important;
    flex-wrap:nowrap !important;
    gap:14px !important;
    margin-left:auto !important;
  }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn{
    min-width:148px !important;
  }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences{
    min-width:0 !important;
  }
}

@media (max-width:899px){
  /* SP: Accept を右に置く（DOM順が accept, deny のため反転） */
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons{
    flex-direction:row-reverse !important;
  }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message{
    margin-bottom:18px !important;
  }
}

/* View preferences が2つ出力される。ボタン列の中の2つ目以降を隠す。
   （クラスが同一でないため、:nth-of-type ではなく汎用の重複除去で対応） */
#cmplz-cookiebanner-container .cmplz-buttons > *:nth-child(n+4){
  display:none !important;
}

/* 本文中の再表示リンクは cmplz-manage-consent クラスを持つ（Complianz が
   このクラスにクリック処理を割り当てるため）。右下タブ用の見た目が
   当たってしまうので打ち消す。 */
.hg-consent-link.cmplz-manage-consent{
  position:static !important;
  display:inline !important;
  background:transparent !important;
  color:var(--accent,#E8480A) !important;
  padding:0 !important;
  border:0 !important;
  box-shadow:none !important;
  font-size:13px !important;
  letter-spacing:0 !important;
  text-decoration:underline !important;
  transform:none !important;
  width:auto !important; height:auto !important;
}
.hg-consent-link.cmplz-manage-consent:hover{
  background:transparent !important;
  color:var(--text-strong,#111110) !important;
}