@charset "UTF-8";
/* ==========================================================================
   本文画像のライトボックス (Colorbox の見た目) 2026-10-14
   - common/js/content_lightbox.js がブログ・ナレッジベース・ACF 自由欄の画像に Colorbox を自動で付ける
   - base.css の Colorbox 最小定義 (#cboxOverlay ほか) をここで上書きする。機能紹介などの .colorbox1 も同じ見た目になる
   - 閉じる・前後・枚数・キャプションは position:fixed で画面の端に置く (#colorbox の overflow:hidden を抜けるため)。
     #colorbox に transform を付けると fixed が効かなくなるので付けない
   ========================================================================== */

/* 拡大できる画像 */
.cf-lb-zoom,
.cf-lb-zoom img { cursor: zoom-in; }
img.cf-lb-zoom,
a.cf-lb-zoom img { transition: opacity .2s ease; }
img.cf-lb-zoom:hover,
a.cf-lb-zoom:hover img { opacity: .88; }
img.cf-lb-zoom:focus-visible,
a.cf-lb-zoom:focus-visible { outline: 3px solid #2E8BC0; outline-offset: 3px; }

/* 背景 (Colorbox は開くたびに inline で opacity を入れるので、.colorbox1 と揃えるため !important) */
#cboxOverlay { background: #07182c; opacity: .9 !important; cursor: zoom-out; }

/* 重なり順: スマホのメニューボタン #humberger (z-index:10000) や HubSpot (9999) より上に出す。base.css は 9999 */
#cboxOverlay, #colorbox { z-index: 10010; }

/* 本体 (Colorbox は content-box 前提で大きさを計算する。base.css の * { box-sizing:border-box } を戻す) */
#colorbox, #cboxContent, #cboxLoadedContent { box-sizing: content-box; }
#colorbox { outline: 0; }
#cboxContent { position: relative; margin-top: 0; background: transparent; }
#cboxLoadedContent {
  border: 0;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .45);
}
.cboxPhoto { display: block; float: left; margin: auto; border: 0; max-width: none; }
#cboxSlideshow { display: none !important; }

/* 読み込み中 */
#cboxLoadingOverlay, #cboxLoadingGraphic { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#cboxLoadingGraphic::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border: 3px solid rgba(255, 255, 255, .3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: cf-lb-spin .8s linear infinite;
}
@keyframes cf-lb-spin { to { transform: rotate(360deg); } }

/* 閉じる・前へ・次へ */
#cboxClose, #cboxPrevious, #cboxNext {
  position: fixed;
  z-index: 2;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font: 400 32px/46px Arial, Helvetica, sans-serif;
  text-align: center;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background .2s ease;
}
#cboxClose:hover, #cboxPrevious:hover, #cboxNext:hover { background: rgba(255, 255, 255, .3); }
#cboxClose:focus-visible, #cboxPrevious:focus-visible, #cboxNext:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#cboxClose { top: 16px; right: 16px; }
#cboxPrevious { top: 50%; left: 16px; margin-top: -24px; }
#cboxNext { top: 50%; right: 16px; margin-top: -24px; }

/* 枚数 (2 枚以上のときだけ Colorbox が表示する) */
#cboxCurrent {
  position: fixed;
  top: 28px;
  left: 20px;
  z-index: 2;
  color: rgba(255, 255, 255, .85);
  font-size: 14px;
  letter-spacing: .06em;
}

/* キャプション (figcaption か alt) */
#cboxTitle {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 2;
  max-width: 900px;
  width: max-content;
  max-width: min(90vw, 900px);
  margin: 0;
  padding: 8px 16px;
  border-radius: 6px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  transform: translateX(-50%);
}
#cboxTitle:empty { display: none !important; }

/* ログイン中は WordPress の管理バー (高さ 32px、z-index:99999) の下にずらす */
body.admin-bar #cboxClose { top: 48px; }
body.admin-bar #cboxCurrent { top: 60px; }

/* スクリーンリーダー用の文言 (ボタンの記号の代わりに読み上げる) */
.cf-lb-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media screen and (max-width: 767px) {
  #cboxClose { top: 10px; right: 10px; width: 44px; height: 44px; line-height: 42px; }
  #cboxPrevious, #cboxNext { top: auto; bottom: 14px; margin-top: 0; width: 44px; height: 44px; line-height: 42px; }
  #cboxPrevious { left: 14px; }
  #cboxNext { right: 14px; }
  #cboxCurrent { top: 22px; left: 16px; font-size: 13px; }
  #cboxTitle { bottom: 70px; max-width: 92vw; font-size: 13px; padding: 6px 12px; }
  body.admin-bar #cboxClose { top: 56px; }   /* 管理バーはスマホ幅で 46px */
  body.admin-bar #cboxCurrent { top: 68px; }
}