/* gothic — 美術館の壁と、出口の案内 */
.sc-gothic { background: #f1ede2; }
.sc-gothic .gt-wall { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 30%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%), linear-gradient(#f1ede2, #e9e3d4); }
.sc-gothic .gt-wm { position: absolute; right: 4%; bottom: 6%; font: 400 calc(64 * var(--u))/1 var(--f-goth); color: rgba(22, 20, 18, .045); will-change: transform; }
.sc-gothic .gt-skirt { position: absolute; left: 0; right: 0; bottom: 0; height: calc(5 * var(--u)); background: #dcd4c0; border-top: 2px solid rgba(22, 20, 18, .5); }

.sc-gothic .gt-plaque { width: auto; white-space: nowrap; text-align: right; z-index: 2; }
.sc-gothic .gt-plaque b { display: block; font: 400 calc(max(13px, 3 * var(--u)))/1 var(--f-anton); letter-spacing: .14em; }
.sc-gothic .gt-plaque span { display: block; margin-top: .5em; font: 700 calc(max(7px, 1.1 * var(--u)))/1 var(--f-mono); letter-spacing: .18em; color: #8a8478; }

/* 絵 */
.sc-gothic .gt-pic { z-index: 4; aspect-ratio: 3840 / 4634; }
.sc-gothic .gt-swing { position: absolute; inset: 0; transform-origin: 50% -9%; will-change: transform; }
.sc-gothic .gt-nail { position: absolute; left: 50%; top: -10%; width: calc(1.6 * var(--u)); height: calc(1.6 * var(--u)); margin-left: calc(-.8 * var(--u)); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #8a8478 45%, #2a2620); box-shadow: 0 calc(.4 * var(--u)) calc(.6 * var(--u)) rgba(0, 0, 0, .35); z-index: 3; }
.sc-gothic .gt-wire { position: absolute; left: 18%; right: 18%; top: -9.2%; height: 9.2%; z-index: 0;
  background: linear-gradient(to bottom right, transparent calc(50% - 1px), #2a2620 calc(50% - 1px), #2a2620 calc(50% + 1px), transparent calc(50% + 1px)) left / 50% 100% no-repeat,
              linear-gradient(to bottom left, transparent calc(50% - 1px), #2a2620 calc(50% - 1px), #2a2620 calc(50% + 1px), transparent calc(50% + 1px)) right / 50% 100% no-repeat; }
.sc-gothic .gt-lamp { position: absolute; left: 26%; right: 26%; top: -6.6%; height: 2.6%; z-index: 4; border-radius: 99px;
  background: linear-gradient(#e8cf8a, #a8842f 55%, #6b5118); box-shadow: 0 calc(.5 * var(--u)) calc(.8 * var(--u)) rgba(0, 0, 0, .3); }
.sc-gothic .gt-lamp i { position: absolute; left: 50%; top: -120%; width: 3%; height: 130%; margin-left: -1.5%; background: #6b5118; }
.sc-gothic .gt-frame { position: absolute; inset: -4.4%; padding: 4.4% ; z-index: 2;
  background: linear-gradient(135deg, #3a2a17, #1d140a 40%, #4a3520 70%, #20160b);
  box-shadow: inset 0 0 0 calc(.5 * var(--u)) #6b5118, inset 0 0 0 calc(.8 * var(--u)) #1a1208,
              0 calc(2.2 * var(--u)) calc(3.6 * var(--u)) rgba(30, 20, 5, .34), 0 calc(.5 * var(--u)) calc(.8 * var(--u)) rgba(30, 20, 5, .3); }
.sc-gothic .gt-canvas { position: relative; width: 100%; height: 100%; overflow: hidden; background: #2a2620; }
.sc-gothic .gt-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sc-gothic .gt-face, .sc-gothic .gt-h { position: absolute; max-width: none; height: auto; transform: translate(-50%, -50%); will-change: transform; pointer-events: none; }
.sc-gothic .gt-face { opacity: 0; z-index: 2; }
.sc-gothic .gt-h { z-index: 3; filter: drop-shadow(calc(.3 * var(--u)) calc(.5 * var(--u)) calc(.4 * var(--u)) rgba(20, 0, 0, .5)); }
.sc-gothic .gt-glow { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; mix-blend-mode: soft-light;
  background: radial-gradient(90% 70% at 50% -8%, rgba(255, 240, 190, 1), rgba(255, 240, 190, .35) 45%, rgba(0, 0, 0, .25) 100%); }
.sc-gothic .gt-hit { position: absolute; inset: -4.4%; z-index: 6; cursor: grab; }
.sc-gothic .gt-hit:active { cursor: grabbing; }

.sc-gothic .gt-like { position: absolute; left: 23.6%; top: 19.5%; z-index: 7; transform-origin: 50% 120%; pointer-events: none;
  display: flex; align-items: center; gap: .3em; padding: .28em .55em .25em; border-radius: .45em; background: #ed3b4b; color: #fff;
  font: 700 calc(4.6 * var(--u))/1 var(--f-sans); white-space: nowrap; box-shadow: 0 calc(.6 * var(--u)) calc(.9 * var(--u)) rgba(60, 0, 0, .35); }
.sc-gothic .gt-like::after { content: ''; position: absolute; left: 50%; top: 100%; margin: -1px 0 0 -.3em; border: .3em solid transparent; border-top: .42em solid #ed3b4b; border-bottom: 0; }
.sc-gothic .gt-like span { font-size: 1.05em; }

.sc-gothic .gt-floats { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 8; pointer-events: none; font-size: calc(3.2 * var(--u)); }
.sc-gothic .gt-fl { position: absolute; left: 0; top: 0; margin: -.5em 0 0 -.5em; font-style: normal; line-height: 1; color: #d3202c; opacity: 0; will-change: transform; text-shadow: 0 .06em .1em rgba(60, 0, 0, .25); }
.sc-gothic .gt-fl:nth-child(3n) { color: #ed3b4b; } .sc-gothic .gt-fl:nth-child(5n) { color: #a8141c; }

.sc-gothic .gt-sign { position: absolute; right: -9%; bottom: -9%; z-index: 9; padding: .7em 1em .6em; background: #fff; border: calc(.35 * var(--u)) solid #161412; text-align: center; cursor: pointer;
  box-shadow: calc(.6 * var(--u)) calc(.6 * var(--u)) 0 #161412; transform: scale(0); transform-origin: 30% 0; font-size: calc(1 * var(--u)); will-change: transform; }
.sc-gothic .gt-sign b { display: block; font: 400 3em/1 var(--f-anton); letter-spacing: .08em; color: #d3202c; white-space: nowrap; }
.sc-gothic .gt-sign span { display: block; margin-top: .15em; font: 400 3.4em/.8 var(--f-hand); }
.sc-gothic .gt-sign:hover b { color: #161412; }

/* キャプション */
.sc-gothic:not(.wide) .gt-label { --w: 90; }
.sc-gothic:not(.wide) .gt-label h2 { font-size: calc(9.4 * var(--u)); }
.sc-gothic:not(.wide) .gt-dir { --w: 92; }
.sc-gothic .gt-label { --w: 96; z-index: 5; opacity: 0; color: #161412; }
.sc-gothic .gt-label h2 { margin: 0; font: 400 calc(11.4 * var(--u))/1 var(--f-goth); white-space: nowrap; letter-spacing: -.01em; }
.sc-gothic .gt-ex { display: flex; justify-content: flex-end; align-items: center; gap: .6em; margin: 0 0 calc(1.2 * var(--u)); padding-bottom: calc(1 * var(--u)); border-bottom: 2px solid #161412;
  font: 700 calc(max(9px, 1.9 * var(--u)))/1 var(--f-sans); letter-spacing: .22em; }
.sc-gothic .gt-ex i { font-style: normal; color: #d3202c; font-size: 1.5em; letter-spacing: 0; }
.sc-gothic .gt-sub { margin: calc(1.6 * var(--u)) 0 0; font: 700 calc(max(9px, 1.75 * var(--u)))/1 var(--f-sans); letter-spacing: .3em; }
.sc-gothic .gt-cap { margin: calc(1.6 * var(--u)) 0 0; max-width: 58em; font: italic 500 calc(max(10.5px, 2.25 * var(--u)))/1.35 var(--f-serif); color: #3a352e; }
.sc-gothic .gt-label dl { margin: calc(2 * var(--u)) 0 0; padding-top: calc(1 * var(--u)); border-top: 1px solid rgba(22, 20, 18, .5); }
.sc-gothic .gt-label dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; padding: calc(.45 * var(--u)) 0; }
.sc-gothic .gt-label dt { font: 700 calc(max(7.5px, 1.25 * var(--u)))/1 var(--f-sans); letter-spacing: .26em; color: #8a8478; }
.sc-gothic .gt-label dd { margin: 0; font: italic 500 calc(max(10px, 2.15 * var(--u)))/1.1 var(--f-serif); color: #3a352e; text-align: right; }

/* 出口の案内 */
.sc-gothic .gt-dir { --w: 94; z-index: 6; opacity: 0; visibility: hidden; }
.sc-gothic .gt-exit { display: flex; align-items: stretch; width: max-content; margin: 0 0 calc(1.4 * var(--u)); border: calc(.35 * var(--u)) solid #0d7a3f; background: #fff; rotate: -1.5deg;
  font: 400 calc(max(13px, 3.3 * var(--u)))/1 var(--f-anton); letter-spacing: .12em; box-shadow: 0 0 calc(2.4 * var(--u)) rgba(20, 160, 80, .35); }
.sc-gothic .gt-exit i { font-style: normal; background: #0d7a3f; color: #fff; padding: .32em .55em .28em; }
.sc-gothic .gt-exit b { font-weight: 400; color: #0d7a3f; padding: .32em .6em .28em .5em; }
.sc-gothic .gt-jp { margin: 0 0 calc(1.8 * var(--u)); font: 700 calc(max(12px, 2.7 * var(--u)))/1.3 var(--f-jp); letter-spacing: .06em; }
.sc-gothic .gt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(2 * var(--u)) calc(2.4 * var(--u)); }
.sc-gothic .gt-lk { position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: calc(1.2 * var(--u)); align-items: baseline;
  padding: calc(1.5 * var(--u)) calc(1.8 * var(--u)) calc(1.2 * var(--u)); background: #fff; color: #161412; text-decoration: none; border: calc(.4 * var(--u)) solid #161412;
  box-shadow: calc(.8 * var(--u)) calc(.8 * var(--u)) 0 #161412; opacity: 0; transform: translateY(calc(4 * var(--u))) rotate(2deg);
  transition: opacity .3s, transform .35s cubic-bezier(.3, 1.5, .5, 1), background .15s, color .15s, box-shadow .15s; }
.sc-gothic .gt-lk.in { opacity: 1; transform: none; }
.sc-gothic .gt-lk:nth-child(odd).in { rotate: -.7deg; } .sc-gothic .gt-lk:nth-child(even).in { rotate: .8deg; }
.sc-gothic .gt-lk i { font: 700 calc(max(9px, 1.7 * var(--u)))/1 var(--f-mono); font-style: normal; color: #d3202c; }
.sc-gothic .gt-lk b { font: 400 calc(max(17px, 5.6 * var(--u)))/1 var(--f-anton); letter-spacing: .05em; white-space: nowrap; }
.sc-gothic .gt-lk em { grid-column: 2; font: 700 calc(max(9px, 1.7 * var(--u)))/1.2 var(--f-jp); font-style: normal; letter-spacing: .1em; color: #8a8478; margin-top: .3em; }
.sc-gothic .gt-lk span { grid-column: 3; grid-row: 1 / 3; align-self: center; font: 400 calc(max(15px, 4.4 * var(--u)))/1 var(--f-anton); transition: transform .2s; }
.sc-gothic .gt-lk:hover, .sc-gothic .gt-lk:focus-visible { background: #f8d517; box-shadow: calc(1.3 * var(--u)) calc(1.3 * var(--u)) 0 #d3202c; outline: none; transform: translate(calc(-.4 * var(--u)), calc(-.5 * var(--u))); }
.sc-gothic .gt-lk:hover span { transform: translateX(.3em); }
.sc-gothic .gt-end { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: calc(1.2 * var(--u)) calc(2 * var(--u)); margin-top: calc(2.6 * var(--u)); padding-top: calc(1.4 * var(--u)); border-top: 2px solid #161412; }
.sc-gothic .gt-top { padding: .55em .9em .45em; background: #161412; color: #fff; font: 400 calc(max(12px, 2.5 * var(--u)))/1 var(--f-anton); letter-spacing: .14em; transition: background .15s, transform .2s; }
.sc-gothic .gt-top:hover { background: #d3202c; transform: translateY(-3px); }
.sc-gothic .gt-end p { margin: 0; font: 700 calc(max(8px, 1.35 * var(--u)))/1.3 var(--f-mono); letter-spacing: .08em; color: #5a554b; }

/* 境目にまたがるもの */
.scene-gothic .gt-ov { position: absolute; z-index: 2; }
.scene-gothic .gt-ov1 { left: 7%; top: calc(-7 * var(--u)); padding: .5em .8em .4em; background: #161412; color: #f1ede2; rotate: -4deg; text-align: center;
  font: 400 calc(max(13px, 3 * var(--u)))/1 var(--f-anton); letter-spacing: .14em; box-shadow: 4px 4px 0 rgba(0, 0, 0, .25); }
.scene-gothic .gt-ov1 span { display: block; margin-top: .15em; }
.scene-gothic .gt-ov2, .scene-gothic .gt-ov3 { font-style: normal; color: #d3202c; line-height: 1; }
.scene-gothic .gt-ov2 { right: 12%; top: calc(-9 * var(--u)); font-size: calc(max(34px, 9 * var(--u))); rotate: 14deg; }
.scene-gothic .gt-ov3 { right: 24%; top: calc(-3 * var(--u)); font-size: calc(max(20px, 5 * var(--u))); rotate: -18deg; color: #ed3b4b; }