@charset "UTF-8";
/**
 * Nicole 画像ギャラリー
 * Updated: 2026-08-06
 * Version: 1.1.1
 * Release: NCB-IMAGE-GALLERY-WIDTH-THUMBNAILS-V1-20260806
 */

.nicole-image-gallery {
  --nicole-gallery-background: #fff;
  --nicole-gallery-columns-desktop: 5;
  --nicole-gallery-columns-mobile: 3;
  --nicole-gallery-carousel-desktop: 1;
  --nicole-gallery-carousel-mobile: 1;
  --nicole-gallery-thumbnails-desktop: 5;
  --nicole-gallery-thumbnails-mobile: 3;
  --nicole-gallery-gap: 16px;
  box-sizing: border-box;
  clear: both;
  color: var(--nicole-text-color, #262626);
  font-family: var(--nicole-font-body, sans-serif);
  max-width: none !important;
  overflow: clip;
  width: 100%;
}
.nicole-image-gallery *, .nicole-image-gallery *::before, .nicole-image-gallery *::after { box-sizing: border-box; }
.nicole-image-gallery--background-full,
.nicole-image-gallery--width-full {
  left: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  max-width: 100vw !important;
  position: relative;
  width: 100vw;
}
.nicole-image-gallery__background { background: var(--nicole-gallery-background); width: 100%; }
.nicole-image-gallery--background-same.nicole-image-gallery--width-contained .nicole-image-gallery__background { margin-inline: auto; max-width: 1140px; }
.nicole-image-gallery__inner { margin-inline: auto; width: 100%; }
.nicole-image-gallery--width-contained .nicole-image-gallery__inner { max-width: 1140px; }
.nicole-image-gallery--width-full .nicole-image-gallery__inner { max-width: none; }
.nicole-image-gallery--padding-none .nicole-image-gallery__background { padding-block: 0; }
.nicole-image-gallery--padding-small .nicole-image-gallery__background { padding-block: clamp(12px, 2vw, 24px); }
.nicole-image-gallery--padding-standard .nicole-image-gallery__background { padding-block: clamp(24px, 4vw, 48px); }
.nicole-image-gallery--padding-large .nicole-image-gallery__background { padding-block: clamp(40px, 6vw, 80px); }
.nicole-image-gallery--background-full.nicole-image-gallery--width-contained .nicole-image-gallery__inner,
.nicole-image-gallery--background-same.nicole-image-gallery--width-contained .nicole-image-gallery__inner { padding-inline: clamp(16px, 3vw, 24px); }
.nicole-image-gallery__figure { margin: 0; }
.nicole-image-gallery--gap-none { --nicole-gallery-gap: 0px; }
.nicole-image-gallery--gap-small { --nicole-gallery-gap: 8px; }
.nicole-image-gallery--gap-medium { --nicole-gallery-gap: 16px; }
.nicole-image-gallery--gap-large { --nicole-gallery-gap: 32px; }
.nicole-image-gallery__grid { display: grid; gap: var(--nicole-gallery-gap); grid-template-columns: repeat(var(--nicole-gallery-columns-desktop), minmax(0, 1fr)); }
.nicole-image-gallery__item, .nicole-image-gallery__slide { margin: 0; min-width: 0; }
.nicole-image-gallery__image-button { background: transparent; border: 0; cursor: zoom-in; display: block; padding: 0; width: 100%; }
.nicole-image-gallery__item-image { display: block; height: 100%; object-position: center; width: 100%; }
.nicole-image-gallery--ratio-original .nicole-image-gallery__item-image { height: auto; }
.nicole-image-gallery--ratio-16-9 .nicole-image-gallery__image-button,
.nicole-image-gallery--ratio-16-9 .nicole-image-gallery__item > .nicole-image-gallery__item-image,
.nicole-image-gallery--ratio-16-9 .nicole-image-gallery__slide > .nicole-image-gallery__item-image { aspect-ratio: 16 / 9; }
.nicole-image-gallery--ratio-3-2 .nicole-image-gallery__image-button,
.nicole-image-gallery--ratio-3-2 .nicole-image-gallery__item > .nicole-image-gallery__item-image,
.nicole-image-gallery--ratio-3-2 .nicole-image-gallery__slide > .nicole-image-gallery__item-image { aspect-ratio: 3 / 2; }
.nicole-image-gallery--ratio-4-3 .nicole-image-gallery__image-button,
.nicole-image-gallery--ratio-4-3 .nicole-image-gallery__item > .nicole-image-gallery__item-image,
.nicole-image-gallery--ratio-4-3 .nicole-image-gallery__slide > .nicole-image-gallery__item-image { aspect-ratio: 4 / 3; }
.nicole-image-gallery--ratio-1-1 .nicole-image-gallery__image-button,
.nicole-image-gallery--ratio-1-1 .nicole-image-gallery__item > .nicole-image-gallery__item-image,
.nicole-image-gallery--ratio-1-1 .nicole-image-gallery__slide > .nicole-image-gallery__item-image { aspect-ratio: 1; }
.nicole-image-gallery--fit-contain .nicole-image-gallery__item-image { object-fit: contain; }
.nicole-image-gallery--fit-cover .nicole-image-gallery__item-image { object-fit: cover; }
.nicole-image-gallery__item-caption { font-family: var(--nicole-font-body, sans-serif); font-size: clamp(.8125rem, 1.2vw, .9375rem); line-height: 1.6; overflow-wrap: anywhere; padding-top: 8px; }
.nicole-image-gallery__carousel-shell { overflow: hidden; position: relative; }
.nicole-image-gallery__carousel { display: flex; gap: var(--nicole-gallery-gap); overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; scroll-snap-type: x mandatory; }
.nicole-image-gallery__carousel::-webkit-scrollbar { display: none; }
.nicole-image-gallery__slide { flex: 0 0 calc((100% - (var(--nicole-gallery-carousel-desktop) - 1) * var(--nicole-gallery-gap)) / var(--nicole-gallery-carousel-desktop)); scroll-snap-align: start; }
.nicole-image-gallery__carousel-button { align-items: center; background: rgba(0,0,0,.62); border: 1px solid rgba(255,255,255,.75); border-radius: 50%; color: #fff; cursor: pointer; display: flex; font-size: 28px; height: 48px; justify-content: center; padding: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 48px; z-index: 2; }
.nicole-image-gallery__carousel-button:disabled { cursor: default; opacity: .28; }
.nicole-image-gallery__carousel-prev { left: 12px; }
.nicole-image-gallery__carousel-next { right: 12px; }
.nicole-image-gallery__dots { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.nicole-image-gallery__dot { background: #a7a7a7; border: 0; border-radius: 50%; cursor: pointer; height: 10px; padding: 0; width: 10px; }
.nicole-image-gallery__dot.is-current { background: var(--nicole-primary-color, #003b5c); }
.nicole-image-gallery__image-button:focus-visible, .nicole-image-gallery__carousel-button:focus-visible, .nicole-image-gallery__dot:focus-visible { outline: 3px solid var(--nicole-primary-color, #003b5c); outline-offset: 3px; }
.nicole-image-gallery__main-button, .nicole-image-gallery__main-static { align-items: center; background: transparent; border: 0; display: flex; justify-content: center; margin: 0; overflow: hidden; padding: 0; width: 100%; }
.nicole-image-gallery__main-button { cursor: zoom-in; }
.nicole-image-gallery__main-button:focus-visible, .nicole-image-gallery__thumbnail:focus-visible, .nicole-image-gallery__lightbox-button:focus-visible { outline: 3px solid var(--nicole-primary-color, #003b5c); outline-offset: 3px; }
.nicole-image-gallery__main-image { display: block; height: 100%; max-height: min(78vh, 900px); object-position: center; width: 100%; }
.nicole-image-gallery--ratio-original .nicole-image-gallery__main-button,
.nicole-image-gallery--ratio-original .nicole-image-gallery__main-static { aspect-ratio: auto; }
.nicole-image-gallery--ratio-original .nicole-image-gallery__main-image { height: auto; max-height: none; }
.nicole-image-gallery--ratio-16-9 .nicole-image-gallery__main-button,
.nicole-image-gallery--ratio-16-9 .nicole-image-gallery__main-static { aspect-ratio: 16 / 9; }
.nicole-image-gallery--ratio-3-2 .nicole-image-gallery__main-button,
.nicole-image-gallery--ratio-3-2 .nicole-image-gallery__main-static { aspect-ratio: 3 / 2; }
.nicole-image-gallery--ratio-4-3 .nicole-image-gallery__main-button,
.nicole-image-gallery--ratio-4-3 .nicole-image-gallery__main-static { aspect-ratio: 4 / 3; }
.nicole-image-gallery--ratio-1-1 .nicole-image-gallery__main-button,
.nicole-image-gallery--ratio-1-1 .nicole-image-gallery__main-static { aspect-ratio: 1; }
.nicole-image-gallery--fit-contain .nicole-image-gallery__main-image { object-fit: contain; }
.nicole-image-gallery--fit-cover .nicole-image-gallery__main-image { object-fit: cover; }
.nicole-image-gallery__caption { font-family: var(--nicole-font-body, sans-serif); font-size: clamp(.875rem, 1.4vw, 1rem); line-height: 1.7; overflow-wrap: anywhere; padding: 12px 2px 0; }
.nicole-image-gallery__thumbnails { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.nicole-image-gallery__thumbnail { aspect-ratio: 4 / 3; background: transparent; border: 2px solid transparent; cursor: pointer; flex: 0 0 min(104px, calc((100% - (var(--nicole-gallery-thumbnails-desktop) - 1) * 10px) / var(--nicole-gallery-thumbnails-desktop))); min-height: 44px; max-width: 104px; overflow: hidden; padding: 2px; position: relative; }
.nicole-image-gallery__thumbnail.is-current { border-color: var(--nicole-primary-color, #003b5c); }
.nicole-image-gallery__thumbnail.is-current::after { background: var(--nicole-primary-color, #003b5c); border: 2px solid #fff; border-radius: 50%; content: ""; height: 12px; position: absolute; right: 6px; top: 6px; width: 12px; }
.nicole-image-gallery__thumbnail-image { display: block; height: 100%; object-fit: cover; width: 100%; }
.nicole-image-gallery__empty { background: #f4f5f6; border: 1px dashed #8c8f94; color: #50575e; font-family: var(--nicole-font-body, sans-serif); padding: 24px; text-align: center; }
.nicole-image-gallery__lightbox { align-items: center; background: rgba(0,0,0,.92); display: flex; inset: 0; justify-content: center; padding: clamp(16px, 4vw, 48px); position: fixed; z-index: 100000; }
.nicole-image-gallery__lightbox[hidden] { display: none; }
.nicole-image-gallery__lightbox-content { align-items: center; display: flex; flex-direction: column; max-height: 100%; max-width: 100%; position: relative; }
.nicole-image-gallery__lightbox-image { display: block; max-height: calc(100vh - 140px); max-width: min(92vw, 1600px); object-fit: contain; }
.nicole-image-gallery__lightbox-caption, .nicole-image-gallery__lightbox-counter { color: #fff; font-family: var(--nicole-font-body, sans-serif); line-height: 1.6; margin-top: 10px; max-width: min(92vw, 1140px); overflow-wrap: anywhere; text-align: center; }
.nicole-image-gallery__lightbox-button { align-items: center; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.7); border-radius: 50%; color: #fff; cursor: pointer; display: flex; font-size: 28px; height: 48px; justify-content: center; padding: 0; position: fixed; width: 48px; }
.nicole-image-gallery__lightbox-close { right: 20px; top: 20px; }
.nicole-image-gallery__lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.nicole-image-gallery__lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }
body.nicole-gallery-lightbox-open { overflow: hidden; }
@media (max-width: 767px) {
  .nicole-image-gallery__grid { grid-template-columns: repeat(var(--nicole-gallery-columns-mobile), minmax(0, 1fr)); }
  .nicole-image-gallery__slide { flex-basis: calc((100% - (var(--nicole-gallery-carousel-mobile) - 1) * var(--nicole-gallery-gap)) / var(--nicole-gallery-carousel-mobile)); }
  .nicole-image-gallery__thumbnails { flex-wrap: nowrap; margin-inline: 0; overflow-x: auto; overscroll-behavior-inline: contain; padding: 0 16px 6px; scrollbar-width: thin; }
  .nicole-image-gallery__thumbnail { flex-basis: min(88px, calc((100vw - 32px - (var(--nicole-gallery-thumbnails-mobile) - 1) * 10px) / var(--nicole-gallery-thumbnails-mobile))); max-width: 88px; }
  .nicole-image-gallery--width-full .nicole-image-gallery__caption,
  .nicole-image-gallery--width-full .nicole-image-gallery__thumbnails { margin-inline: 0; }
  .nicole-image-gallery__lightbox-button { height: 44px; width: 44px; }
  .nicole-image-gallery__lightbox-prev { left: 8px; }
  .nicole-image-gallery__lightbox-next { right: 8px; }
  .nicole-image-gallery__lightbox-close { right: 8px; top: 8px; }
}
@media (prefers-reduced-motion: reduce) { .nicole-image-gallery * { scroll-behavior: auto !important; transition: none !important; } }