@charset "UTF-8";

/* zoro.css の後に読み込む。パネルの opacity / inert は app.js が管理する。 */
.panel-gallery {
  --gallery-card-width: 24vw;
  --gallery-gap: 9vw;
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  isolation: isolate;
  color: var(--ink, #151515);
  background: var(--paper, #e5e4e0);
}

.gallery-heading {
  position: absolute;
  z-index: 3;
  top: 15%;
  left: 8%;
  pointer-events: none;
}

.gallery-heading .micro {
  display: block;
  margin-bottom: 14px;
  color: var(--red, #99192d);
  font: 9px/1.5 "Courier New", monospace;
  letter-spacing: .09em;
}

.gallery-heading h2 {
  margin: 0;
  font: 500 clamp(18px, 1.65vw, 29px)/1.15 Arial, "Helvetica Neue", sans-serif;
  letter-spacing: -.025em;
}

.gallery-window {
  position: absolute;
  z-index: 2;
  top: 24%;
  left: 0;
  width: 100%;
  height: 63%;
  overflow: visible;
}

.gallery-track {
  position: absolute;
  left: 0;
  top: 50%;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: var(--gallery-gap);
  width: max-content;
  transform: translate3d(0, -50%, 0);
  will-change: transform;
}

.gallery-card {
  position: relative;
  flex: 0 0 var(--gallery-card-width);
  width: var(--gallery-card-width);
  margin: 0;
  order: 0;
  transform-origin: 50% 50%;
  will-change: transform;
  backface-visibility: hidden;
}

.gallery-photo {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #ccc7bd;
  box-shadow: 0 1px 0 rgb(21 21 21 / 12%);
}

.gallery-photo::after {
  position: absolute;
  inset: 0;
  border: 1px solid rgb(21 21 21 / 7%);
  content: "";
  pointer-events: none;
}

.gallery-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--gallery-object-position, 50% 50%);
  filter: saturate(calc(.86 + var(--gallery-focus, 0) * .14));
}

.gallery-card figcaption {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 13px;
  align-items: start;
  padding-top: 15px;
  color: var(--ink, #151515);
  opacity: calc(.36 + var(--gallery-focus, 0) * .64);
}

.gallery-card__number {
  padding-top: 1px;
  font: 8px/1.4 "Courier New", monospace;
  color: var(--red, #99192d);
  letter-spacing: .04em;
}

.gallery-card__place {
  display: block;
  font: 8px/1.4 "Courier New", monospace;
  letter-spacing: .095em;
}

.gallery-card__copy {
  display: block;
  margin-top: 4px;
  font: 9px/1.6 Arial, "Helvetica Neue", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  letter-spacing: .07em;
  white-space: nowrap;
}

.gallery-tail {
  position: absolute;
  z-index: 3;
  right: 8%;
  bottom: 12%;
  display: flex;
  align-items: center;
  gap: 17px;
  font: 8px/1.5 "Courier New", monospace;
  letter-spacing: .07em;
  pointer-events: none;
}

.gallery-tail__line {
  width: 69px;
  height: 1px;
  overflow: hidden;
  background: rgb(21 21 21 / 20%);
}

.gallery-tail__line i {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(var(--gallery-progress, 0));
  transform-origin: left;
  background: var(--red, #99192d);
}

.gallery-tail__arrow { font-size: 17px; line-height: 1; }

.gallery-vine {
  position: absolute;
  z-index: 0;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: .8;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: #30292a;
  opacity: .46;
  pointer-events: none;
}

.gallery-vine--upper {
  top: 4%;
  right: 4%;
  width: min(28vw, 430px);
  height: auto;
  transform: rotate(-8deg);
}

.gallery-vine--lower {
  bottom: 6%;
  left: 3%;
  width: min(27vw, 420px);
  height: auto;
  transform: rotate(7deg);
  opacity: .37;
}

.gallery-vine .gallery-vine__red { stroke: var(--red, #99192d); }

@media (min-width: 761px) and (max-height: 700px) {
  .panel-gallery { --gallery-card-width: min(23vw, 42svh); --gallery-gap: 8vw; }
  .gallery-heading { top: 14%; }
  .gallery-heading .micro { margin-bottom: 9px; }
  .gallery-heading h2 { font-size: 20px; }
  .gallery-tail { bottom: 11%; }
}

@media (max-width: 760px) {
  .panel-gallery { --gallery-card-width: 56vw; --gallery-gap: 15vw; }
  .gallery-heading { top: 17%; left: 8%; }
  .gallery-heading .micro { font-size: 7px; margin-bottom: 12px; }
  .gallery-heading h2 { font-size: 18px; letter-spacing: -.025em; }
  .gallery-window { top: 29%; height: 51%; }
  .gallery-card figcaption { padding-top: 12px; gap: 5px 10px; }
  .gallery-card__number, .gallery-card__place { font-size: 7px; }
  .gallery-card__copy { font-size: 8px; margin-top: 3px; letter-spacing: .035em; }
  .gallery-tail { right: 8%; bottom: 17%; font-size: 7px; gap: 11px; }
  .gallery-tail__line { width: 47px; }
  .gallery-vine--upper { top: 22%; right: -1%; width: 47vw; opacity: .33; }
  .gallery-vine--lower { bottom: 11%; left: -5%; width: 53vw; opacity: .31; }
}

/* 線形表示 / JS 無効でも、6枚を自然な 01→06 の順に読める。 */
.linear .panel-gallery,
html:not(.enhanced) .panel-gallery,
.no-js .panel-gallery {
  position: relative !important;
  inset: auto;
  height: auto !important;
  min-height: 0 !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  padding: 100px 8% 110px;
  overflow: hidden;
}

.linear .gallery-heading,
html:not(.enhanced) .gallery-heading,
.no-js .gallery-heading { position: relative; top: auto; left: auto; margin-bottom: 48px; }

.linear .gallery-window,
html:not(.enhanced) .gallery-window,
.no-js .gallery-window { position: relative; top: auto; left: auto; width: 100%; height: auto; }

.linear .gallery-track,
html:not(.enhanced) .gallery-track,
.no-js .gallery-track {
  position: relative;
  top: auto;
  left: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 46px 25px;
  width: 100%;
  transform: none !important;
  will-change: auto;
}

.linear .gallery-card,
html:not(.enhanced) .gallery-card,
.no-js .gallery-card {
  order: var(--gallery-order);
  width: 100%;
  transform: none !important;
  z-index: auto !important;
  will-change: auto;
}

.linear .gallery-card figcaption,
html:not(.enhanced) .gallery-card figcaption,
.no-js .gallery-card figcaption { opacity: 1; }

.linear .gallery-photo img,
html:not(.enhanced) .gallery-photo img,
.no-js .gallery-photo img { filter: none; }

.linear .gallery-tail,
html:not(.enhanced) .gallery-tail,
.no-js .gallery-tail { display: none; }

@media (max-width: 900px) {
  .linear .gallery-track,
  html:not(.enhanced) .gallery-track,
  .no-js .gallery-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .linear .panel-gallery,
  html:not(.enhanced) .panel-gallery,
  .no-js .panel-gallery { padding: 86px 8% 80px; }
  .linear .gallery-heading,
  html:not(.enhanced) .gallery-heading,
  .no-js .gallery-heading { margin-bottom: 33px; }
  .linear .gallery-track,
  html:not(.enhanced) .gallery-track,
  .no-js .gallery-track { grid-template-columns: 1fr; gap: 35px; }
  .linear .gallery-card__copy,
  html:not(.enhanced) .gallery-card__copy,
  .no-js .gallery-card__copy { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-track, .gallery-card { will-change: auto; }
}

/* 中央で1.5倍になるカードは、拡大後のコピーを各章のサブコピーと揃える。 */
.gallery-card__copy{font-size:calc(var(--chapter-copy-size) / 1.5);font-weight:600}
.gallery-card figcaption>span:last-child{min-width:0}
.linear .gallery-card__copy,
html:not(.enhanced) .gallery-card__copy,
.no-js .gallery-card__copy{font-size:var(--chapter-copy-size);white-space:normal;word-break:auto-phrase;text-wrap:balance;overflow-wrap:normal}