/* 紙と版の展覧会（動きの見本）。このページだけの CSS。
   ポスターは4枚の版（.pl--c/m/y/k）を multiply で重ねる。版の中の大きさは cqw（ポスターの幅に対する割合）で決める。
   html.mo ＝ 動き用の並び。付いていなければ、版はずれずに重なった静かな形。 */

:root {
  --paper: #f4f1ea;
  --paper-2: #fbf8f1;
  --cy: #00a0e9;
  --mg: #e4007f;
  --ye: #ffe100;
  --kk: #231815;
  --gray: #6b655c;
  --mincho: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --gothic: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; overflow-x: hidden;
  color: var(--kk);
  font: 16px/1.9 var(--gothic); letter-spacing: .04em;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .36 0 0 0 0 .3 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--paper);
}
h1, h2, h3 { margin: 0; font-weight: 800; line-height: 1.4; letter-spacing: .06em; }
p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--mg); outline-offset: 4px; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .34em; color: var(--mg); margin-bottom: 12px; }

/* ── ポスター（4枚の版） ─────────────────────── */
.poster {
  position: relative; container-type: inline-size;
  width: min(74vh * .75, 560px, 84vw); aspect-ratio: 3 / 4;
  background: var(--paper-2);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 30px 60px -30px rgba(60, 40, 20, .45), 0 10px 20px -12px rgba(60, 40, 20, .25);
}
.pl { position: absolute; inset: 0; mix-blend-mode: multiply; pointer-events: none; }
.mo .pl, .mo [data-fv-side] { opacity: 0; }   /* JS が四方から飛ばして出す（その前の、合った状態を見せない） */
.poster__roller { display: none; }
.mo .poster__roller {
  display: block; position: absolute; top: -3%; bottom: -3%; left: 0; width: 3.4%; margin-left: -1.7%; z-index: 5; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, #444, #d6d6d6 40%, #8a8a8a 62%, #2e2e2e); border-radius: 999px; box-shadow: 0 0 24px rgba(0, 0, 0, .3);
}
.pl i, .pl span, .pl p, .pl h1 { position: absolute; display: block; }
.pl--y { color: var(--ye); }
.pl--m { color: var(--mg); }
.pl--c { color: var(--cy); }
.pl--k { color: var(--kk); pointer-events: auto; }
/* Y: 大きな丸と帯 */
.y-sun { left: 44%; top: 7%; width: 50%; aspect-ratio: 1; border-radius: 50%; background: var(--ye); }
.y-band { left: 0; right: 0; top: 63%; height: 7.5%; background: var(--ye); }
/* M: 「版」と小さな丸 */
.m-han { left: 3%; top: 9%; font-family: var(--mincho); font-weight: 700; font-size: 62cqw; line-height: 1; }
.m-dot { left: 68%; top: 56%; width: 19%; aspect-ratio: 1; border-radius: 50%; background: var(--mg); }
/* C: 「紙」と傾いた四角 */
.c-kami { right: 3%; top: 31%; font-family: var(--mincho); font-weight: 700; font-size: 46cqw; line-height: 1; }
.c-sq { left: 8%; top: 51%; width: 23%; aspect-ratio: 1; border: 2.6cqw solid var(--cy); transform: rotate(12deg); }
/* K: 文字と罫 */
.k-en { left: 7%; top: 5%; font-size: 1.9cqw; letter-spacing: .3em; font-weight: 700; }
.k-title { left: 7%; bottom: 12%; font-size: 7.4cqw; line-height: 1.25; letter-spacing: .1em; font-weight: 900; }
.k-date { right: 7%; bottom: 12.4%; display: flex !important; align-items: baseline; gap: 1cqw; font-family: var(--mincho); font-weight: 700; font-size: 7cqw; line-height: 1; }
.k-date span, .k-date i { position: static !important; display: inline !important; font-style: normal; }
.k-date i { font-size: 4cqw; }
.k-place { right: 7%; bottom: 7.4%; font-size: 2.2cqw; letter-spacing: .24em; font-weight: 700; }
.k-rule { left: 7%; right: 7%; height: .35cqw; background: var(--kk); }
.k-rule--t { top: 9%; }
.k-rule--b { bottom: 5%; }
/* 色の見本の帯（版ごとに1つずつ） */
.bar { bottom: 1.6%; width: 4.2%; height: 2.2%; background: currentColor; }
.bar--c { left: 7%; } .bar--m { left: 11.6%; } .bar--y { left: 16.2%; } .bar--k { left: 20.8%; }
/* トンボ（四隅の十字）。4色が重なると1本の濃い十字になる */
.tb { width: 6%; aspect-ratio: 1; }
.tb svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 1.4; }
.tb--tl { left: 1%; top: 1%; } .tb--tr { right: 1%; top: 1%; } .tb--bl { left: 1%; bottom: 1%; } .tb--br { right: 1%; bottom: 1%; }

/* ── 1. 最初の画面 ─────────────────────────── */
.fv { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; }
.fv__stage {
  min-height: 100vh; min-height: 100svh; padding: 76px 16px 90px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 5vw;
}
.fv__side--l { justify-self: end; writing-mode: vertical-rl; font-family: var(--mincho); font-weight: 700; font-size: clamp(20px, 2vw, 28px); letter-spacing: .4em; }
.fv__side--l span { font-family: var(--gothic); font-size: 11px; letter-spacing: .3em; color: var(--gray); margin-top: 1.2em; }
.fv__side--r { justify-self: start; position: relative; max-width: 300px; }
.fv__lead { font-family: var(--mincho); font-size: clamp(15px, 1.4vw, 18px); line-height: 2.2; letter-spacing: .12em; }
.fv__done { display: none; }
.mo .fv__done { display: block; position: absolute; left: 0; top: 0; bottom: 0; height: fit-content; margin: auto 0; opacity: 0; }
.fv__done b { display: block; font-family: var(--mincho); font-size: clamp(36px, 4vw, 60px); line-height: 1.3; letter-spacing: .1em; color: var(--mg); margin-bottom: 16px; }
.fv__done span { display: block; font-size: 14px; color: var(--gray); }
.fv__lead-in { display: block; }
.fv__cue-in { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fv__cue { position: absolute; left: 0; right: 0; bottom: 20px; display: flex; flex-direction: column; align-items: center; font-size: 12px; letter-spacing: .3em; color: var(--gray); }
.fv__cue i { width: 1px; height: 40px; background: linear-gradient(var(--kk), transparent); animation: cue 2.4s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ── 2. 網点のルーペ ───────────────────────── */
.dots { padding: 110px 16px; background: #fffdf8; }
.dots__in { width: min(1100px, 100%); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.2fr; gap: 6vw; align-items: center; }
.dots h2 { font-family: var(--mincho); font-size: clamp(30px, 4vw, 50px); margin-bottom: 20px; }
.dots__text > p:last-child { color: var(--gray); }
.dots__frame { position: relative; width: min(600px, 100%); aspect-ratio: 1; justify-self: center; background: #fffdf8; box-shadow: 0 30px 50px -34px rgba(60, 40, 20, .5); }
.dots__cv { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: none; }
.dots__hint { position: absolute; left: 50%; bottom: -34px; translate: -50% 0; font-size: 12px; letter-spacing: .24em; color: var(--gray); white-space: nowrap; }
html:not(.mo) .dots__hint { display: none; }

/* ── 3. 判子の言葉 ─────────────────────────── */
.stamp { padding: 120px 16px; text-align: center; overflow: hidden; }
.stamp__row { display: flex; flex-wrap: wrap; justify-content: center; gap: .1em .5em; font-family: var(--mincho); font-weight: 700; font-size: clamp(54px, 10vw, 150px); line-height: 1.2; }
.stamp__w {
  position: relative; display: inline-block; color: var(--kk); cursor: default;
  transition: text-shadow .35s ease;
}
.stamp__w:hover { text-shadow: -.05em -.01em 0 rgba(0, 160, 233, .75), .05em .02em 0 rgba(228, 0, 127, .75), .01em .05em 0 rgba(255, 225, 0, .85); }
.stamp__w:nth-child(2) { color: var(--mg); }
.ink { position: absolute; width: .09em; height: .09em; border-radius: 50%; background: currentColor; opacity: 0; }
.ink:nth-of-type(1) { left: -6%; top: 18%; }
.ink:nth-of-type(2) { right: -4%; top: 64%; width: .05em; height: .05em; }
.ink:nth-of-type(3) { left: 40%; bottom: -6%; width: .06em; height: .06em; }
.stamp__sub { margin-top: 26px; font-size: 13px; letter-spacing: .2em; color: var(--gray); }

/* ── 4. 三つの刷りかた ─────────────────────── */
.works { padding: 110px 16px 130px; background: #fffdf8; }
.works__in { width: min(1100px, 100%); margin: 0 auto; }
.works h2 { font-family: var(--mincho); font-size: clamp(28px, 3.6vw, 46px); margin-bottom: 44px; }
.works__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4vw; }
.work h3 { font-size: 19px; margin: 22px 0 8px; }
.work p { font-size: 15px; color: var(--gray); }
.work__print { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper); }
.work__ink { position: absolute; inset: 0; }
.work__print--kappan .work__ink { display: grid; place-items: center; }
.work__print--kappan span {
  font-family: var(--mincho); font-weight: 700; font-size: clamp(80px, 11vw, 160px); line-height: 1; color: #2a2522;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 -1px 0 rgba(0, 0, 0, .25);
}
.work__print--silk .work__ink i { position: absolute; mix-blend-mode: multiply; }
.work__print--silk .work__ink i:nth-child(1) { left: 14%; top: 16%; width: 44%; aspect-ratio: 1; border-radius: 50%; background: var(--mg); }
.work__print--silk .work__ink i:nth-child(2) { left: 40%; top: 30%; width: 46%; height: 52%; background: var(--cy); }
.work__print--silk .work__ink i:nth-child(3) { left: 8%; top: 68%; width: 84%; height: 10%; background: var(--ye); }
.work__print--riso .work__ink i {
  position: absolute; inset: 10%;
  background:
    radial-gradient(circle, #ff48b0 0 34%, transparent 36%) 0 0 / 9px 9px,
    radial-gradient(circle, #0078bf 0 30%, transparent 32%) 4px 4px / 9px 9px;
  -webkit-mask: radial-gradient(circle at 40% 40%, #000 0 30%, transparent 70%); mask: radial-gradient(circle at 40% 40%, #000 0 30%, transparent 70%);
}
.work__roller { display: none; }
.mo .work__roller {
  display: block; position: absolute; top: -6%; bottom: -6%; left: 0; width: 14px; margin-left: -7px;
  background: linear-gradient(90deg, #555, #cfcfcf 40%, #8a8a8a 60%, #3a3a3a); border-radius: 7px;
  box-shadow: 0 0 18px rgba(0, 0, 0, .25);
}

/* ── 5. 会期と入場・チケット ───────────────── */
.info { padding: 110px 16px; overflow-x: clip; }   /* もいだ半券が画面の外に残っても、横に広がらない */
.info__in { width: min(1000px, 100%); margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 6vw; align-items: center; }
.info h2 { font-family: var(--mincho); font-size: clamp(28px, 3.6vw, 44px); margin-bottom: 26px; }
.info__dl { margin: 0 0 22px; }
.info__dl div { display: grid; grid-template-columns: 6em 1fr; gap: 16px; padding: 15px 4px; border-bottom: 1px solid #ddd5c6; }
.info__dl dt { color: var(--gray); font-weight: 700; }
.info__dl dd { margin: 0; font-weight: 700; word-break: keep-all; overflow-wrap: anywhere; }
.info__fic { font-size: 13px; color: var(--gray); }
.ticket { position: relative; display: flex; filter: drop-shadow(0 18px 24px rgba(60, 40, 20, .22)); padding-bottom: 64px; }
.ticket__main, .ticket__stub { background: #fffdf8; position: relative; }
.ticket__main {
  width: 230px; padding: 22px 22px 24px; border-radius: 10px 0 0 10px;
  background: linear-gradient(90deg, transparent 0 calc(100% - 1px), #c9bfae calc(100% - 1px)) , #fffdf8;
  -webkit-mask: radial-gradient(circle at 100% 0, transparent 9px, #000 9.5px) top / 100% 51% no-repeat, radial-gradient(circle at 100% 100%, transparent 9px, #000 9.5px) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle at 100% 0, transparent 9px, #000 9.5px) top / 100% 51% no-repeat, radial-gradient(circle at 100% 100%, transparent 9px, #000 9.5px) bottom / 100% 51% no-repeat;
}
.ticket__main::after { content: ""; position: absolute; top: 12px; bottom: 12px; right: 0; border-right: 2px dashed #c9bfae; }
.ticket__en { font-size: 10px; letter-spacing: .3em; color: var(--mg); font-weight: 700; }
.ticket__ttl { font-family: var(--mincho); font-weight: 700; font-size: 24px; line-height: 1.35; margin: 10px 0 18px; }
.ticket__no { font-size: 11px; letter-spacing: .2em; color: var(--gray); }
.ticket__seal {
  position: absolute; right: 28px; bottom: 22px; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; font-style: normal; font-family: var(--mincho); font-weight: 700; font-size: 18px;
  color: var(--mg); border: 2px solid var(--mg); opacity: 0; transform: rotate(-14deg);
}
.ticket__stub {
  width: 86px; border-radius: 0 10px 10px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  -webkit-mask: radial-gradient(circle at 0 0, transparent 9px, #000 9.5px) top / 100% 51% no-repeat, radial-gradient(circle at 0 100%, transparent 9px, #000 9.5px) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle at 0 0, transparent 9px, #000 9.5px) top / 100% 51% no-repeat, radial-gradient(circle at 0 100%, transparent 9px, #000 9.5px) bottom / 100% 51% no-repeat;
}
.ticket__stub span { writing-mode: vertical-rl; font-size: 12px; letter-spacing: .3em; color: var(--gray); }
.ticket__stub b { font-family: var(--mincho); font-size: 22px; }
.ticket__btn {
  position: absolute; left: 0; right: 0; bottom: 0; margin: auto; width: max-content; cursor: pointer;
  padding: 12px 26px; border-radius: 999px; border: 1px solid var(--kk); background: transparent; font-weight: 700; letter-spacing: .14em;
  transition: background-color .3s, color .3s;
}
.ticket__btn:hover { background: var(--kk); color: #fff; }
html:not(.mo) .ticket__btn { display: none; }

@media (max-width: 860px) {
  .fv__stage { grid-template-columns: 1fr; justify-items: center; gap: 22px; padding-top: 70px; }
  .fv__side--l { writing-mode: horizontal-tb; justify-self: center; order: -1; letter-spacing: .3em; font-size: 18px; }
  .fv__side--l span { display: none; }
  .fv__side--r { justify-self: center; text-align: center; max-width: 520px; min-height: 9em; }
  .fv__lead br { display: none; }
  .mo .fv__done { left: 0; right: 0; }
  .fv__done b { font-size: 34px; margin-bottom: 8px; }
  .fv__done b br { display: none; }
  .poster { width: min(78vw, 50vh * .75); }
  .fv__stage { padding: 62px 16px 64px; gap: 14px; min-height: 0; }
  .fv { min-height: 100svh; }
  .fv__side--r { min-height: 7.4em; }
  .fv__lead { font-size: 14px; line-height: 2; }
  .fv__cue { letter-spacing: .14em; bottom: 12px; }
  .fv__cue i { height: 24px; }
  .dots__in, .info__in { grid-template-columns: 1fr; }
  .works__grid { grid-template-columns: 1fr; gap: 48px; }
  .ticket { justify-self: center; }
}
.pl--k > span:last-child { inset: 0; }