@charset "utf-8";
/* ==========================================================================
   zoom.css — 画像拡大モーダル (.c-zoom)
   partial: components/zoom.html / shortcode: {{< c-zoom >}}

   components.css に同梱しないのは、この部品だけを使うページ
   （テンプレートダウンロードの個別ページ等）に 600 行の CSS を読ませないため。
   設計ルールは components.css 冒頭に従う（c- プレフィックス・px 指定・要素まで明示）。
   ========================================================================== */

/* トリガー（JS が対象要素に .c-zoom-trigger を付ける） */
.c-zoom-trigger { position: relative; cursor: zoom-in; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; }
.c-zoom-trigger:hover { opacity: 0.85; }
.c-zoom-trigger:focus-visible { outline: 2px solid #0084dd; outline-offset: 2px; }
.c-zoom-trigger::after {
  content: ""; position: absolute; right: 8px; bottom: 8px; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0, 132, 221, 0.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21M7.5 10.5h6M10.5 7.5v6'/%3E%3C/svg%3E") no-repeat center/18px 18px;
  pointer-events: none;
}
@media screen and (max-width: 768px) { .c-zoom-trigger::after { width: 28px; height: 28px; background-size: 16px 16px; } }

/* モーダル */
.c-zoom, .c-zoom *, .c-zoom *::before, .c-zoom *::after { -webkit-box-sizing: border-box; box-sizing: border-box; }
/* slider.css の #global_setting（SP の固定ヘッダー, z-index: 100000）より上に出す。
   10000 台だと SP で閉じるボタンがヘッダーの下に隠れる */
.c-zoom { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100010; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 24px 20px; -webkit-animation: cZoomIn 0.15s ease-out; animation: cZoomIn 0.15s ease-out; }
.c-zoom[hidden] { display: none; }

/* 背景: 薄いスクリム + ぼかし（backdrop-filter 非対応時はスクリムのみ濃くする） */
.c-zoom__backdrop { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(15, 23, 42, 0.4); cursor: zoom-out; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .c-zoom__backdrop { background: rgba(15, 23, 42, 0.22); -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%); }
}

/* 白背景は画像の大きさに合わせて縮む（幅 100% にしない。縦長の帳票画像の左右に余白が出るため） */
.c-zoom__body { position: relative; max-width: 100%; max-height: 100%; padding: 56px 24px 24px; background: #fff; border-radius: 12px; -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); overflow-y: auto; -webkit-animation: cZoomBodyIn 0.18s ease-out; animation: cZoomBodyIn 0.18s ease-out; }

/* 128px = モーダル上下 padding 48 + 白背景上下 padding 80。dvh 非対応ブラウザは vh 側が効く */
.c-zoom__img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 128px); max-height: calc(100dvh - 128px); margin: 0 auto; }

.c-zoom__close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; margin: 0; padding: 0; border: 1px solid #e2e8f0; border-radius: 50%; background: #fff; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-transition: background-color 0.2s; transition: background-color 0.2s; }
.c-zoom__close:hover { background: #f1f5f9; }
.c-zoom__close::before, .c-zoom__close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 15px; height: 2px; background: #323232; -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); }
.c-zoom__close::after { -webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); }

@media screen and (max-width: 768px) {
  .c-zoom { padding: 16px 12px; }
  .c-zoom__body { padding: 48px 12px 12px; }
  /* 92px = モーダル上下 padding 32 + 白背景上下 padding 60 */
  .c-zoom__img { max-height: calc(100vh - 92px); max-height: calc(100dvh - 92px); }
  .c-zoom__close { top: 8px; right: 8px; width: 32px; height: 32px; }
}

@-webkit-keyframes cZoomIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes cZoomIn { from { opacity: 0; } to { opacity: 1; } }
@-webkit-keyframes cZoomBodyIn { from { opacity: 0; -webkit-transform: translateY(8px) scale(0.98); } to { opacity: 1; -webkit-transform: none; } }
@keyframes cZoomBodyIn { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .c-zoom, .c-zoom__body { -webkit-animation: none; animation: none; } }

html.is-c-zoom-lock, html.is-c-zoom-lock body { overflow: hidden; }