/* ゲストのページの見比べ用の3案（テスト環境だけ。src/guest-patterns.mjs）。
   部品はトップのヒーローと同じもの（白い紙・淡い虹色の帯・青いピース・明朝・軌道の線）。色は style.css の :root の値だけを使う */

/* ---------- 見比べの切り替え（テスト環境だけ） ---------- */
.gp-bar { position: sticky; top: var(--header-h); z-index: 40; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 20px; padding: 9px max(16px, calc((100% - var(--container)) / 2)); background: var(--navy-deep); color: #fff; font-size: 13px; letter-spacing: 0.04em; }
.gp-bar__k { margin-right: 4px; color: rgba(255, 255, 255, 0.62); }
.gp-bar a { padding: 3px 0; color: #fff; border-bottom: 2px solid transparent; }
.gp-bar a:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.4); }
.gp-bar a[aria-current] { font-weight: 700; border-bottom-color: #8fc1ec; }

/* ---------- 共通 ---------- */
.gp-prism {
  position: absolute; inset: -10% -18%; z-index: 0; pointer-events: none;
  background:
    linear-gradient(118deg, transparent 38%, rgba(255, 196, 222, 0.26) 44%, rgba(186, 226, 255, 0.36) 50%, rgba(255, 240, 196, 0.24) 56%, transparent 62%),
    linear-gradient(128deg, transparent 66%, rgba(186, 226, 255, 0.28) 71%, transparent 76%);
  animation: prism-drift 22s ease-in-out infinite alternate;
}
.gp-orbit { fill: none; stroke: var(--blue); stroke-width: 1.1; stroke-opacity: 0.5; vector-effect: non-scaling-stroke; stroke-dasharray: 3200; stroke-dashoffset: 3200; animation: orbit-draw 1.8s var(--ease) .2s forwards; }
.gp-orbit--2 { stroke-opacity: 0.3; animation-delay: .45s; }

/* 時刻・日付の数字：見出しと同じ明朝の数字（英字の書体の数字は「Ⅱ:OO」のように見えたので使わない。委員長 10/25「時間のフォント」） */
.gp-num { font-family: var(--mincho); font-weight: 800; font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0.02em; }
.gp-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; margin: 0; }
.gp-title .mincho { font-size: clamp(40px, 5vw, 70px); font-weight: 800; line-height: 1.15; letter-spacing: 0.08em; background-size: 34px 34px, 220% 220%; }
.gp-title .latin { font-size: 14px; color: var(--blue); }

.gp-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin: 0; font-size: clamp(24px, 2.8vw, 32px); font-weight: 700; letter-spacing: 0.1em; color: var(--navy); }
.gp-sub .latin { font-size: 13px; font-weight: 600; color: var(--blue); }

/* ピースから人が飛び出す絵。影はぼかして、ピースの下に少しずらす */
.gp-pop { display: block; width: 100%; height: auto; overflow: visible; }
.gp-pop__shadow { opacity: 0.2; filter: blur(7px); }
.gp-pop--plain { display: grid; place-items: center; aspect-ratio: 1; font-size: 40px; font-weight: 800; color: #fff; writing-mode: vertical-rl; background: var(--grad); }
/* 切り抜きの無い写真：形に切らずにまるごと。ピースは写真のうしろからのぞく（写真には重ねない） */
.gp-frame { position: relative; display: block; isolation: isolate; }
.gp-frame img { position: relative; z-index: 1; display: block; width: 100%; height: auto; border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 20px 40px rgba(14, 42, 82, 0.2); }
.gp-frame__piece { position: absolute; z-index: 0; filter: drop-shadow(0 8px 12px rgba(14, 42, 82, 0.22)); }
.gp-frame__piece--a { right: -14%; bottom: 10%; width: 40%; rotate: 12deg; } /* 写真の下にはみ出さない（クレジットに重ねない） */
.gp-frame__piece--b { left: -11%; top: -5%; width: 26%; rotate: -16deg; }
.gp-credit { position: relative; z-index: 2; margin: 8px 0 0; font-size: 11px; letter-spacing: 0.06em; color: var(--muted); text-align: right; }
.gp-note { margin-top: 14px; font-size: 13px; line-height: 1.8; color: var(--muted); }

/* 講演会の表 */
.gp-facts { margin: 26px 0 0; border-bottom: 1px solid var(--line); }
.gp-facts > div { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 16px; padding: 13px 0; border-top: 1px solid var(--line); }
.gp-facts dt { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--blue); padding-top: 2px; }
.gp-facts dd { margin: 0; font-size: 15px; line-height: 1.85; color: var(--navy); }
.gp-facts dd small { display: block; font-size: 13px; color: var(--ink); }

/* 事前申込。カードにせず、上の太い線と白い地だけで区切る */
.gp-entry { margin-top: 26px; padding: 20px 22px 22px; background: rgba(255, 255, 255, 0.78); border-top: 2px solid var(--navy); }
.gp-entry__h { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.16em; color: var(--blue); }
.gp-entry__soon { margin: 0; font-size: clamp(18px, 1.8vw, 21px); font-weight: 700; letter-spacing: 0.08em; color: var(--navy); }
.gp-entry__due { margin: 10px 0 0; font-size: 14px; letter-spacing: 0.04em; color: var(--ink); }
.gp-entry__due b { color: var(--navy); }
.gp-entry__note { margin: 6px 0 0; font-size: 13px; color: var(--muted); }

/* 講演者・聞き手 */
.gp-prof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); margin-top: clamp(36px, 5vw, 56px); }
.gp-prof__k { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.16em; color: var(--blue); }
.gp-prof__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 12px; font-size: 24px; font-weight: 700; letter-spacing: 0.1em; color: var(--navy); }
.gp-prof__name small { font-family: var(--goth); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; color: var(--ink); }
.gp-prof__text p { margin: 0; font-size: 14px; line-height: 2; color: var(--ink); }
.gp-org { margin: 28px 0 0; font-size: 13px; letter-spacing: 0.06em; color: var(--muted); }

/* 小さな時間割 */
.gp-sched { padding-block: clamp(56px, 7vw, 88px); background: var(--white); }
.gp-sched__list { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--line); }
.gp-sched__list a { display: grid; grid-template-columns: 11em minmax(0, 1fr) auto; align-items: baseline; gap: 8px 24px; padding: 18px 4px; border-bottom: 1px solid var(--line); color: var(--navy); transition: background-color .2s var(--ease); }
.gp-sched__list a:hover { background: var(--pale); }
.gp-sched__t { font-size: 22px; font-weight: 700; letter-spacing: 0.04em; }
.gp-sched__n { font-size: 18px; font-weight: 700; letter-spacing: 0.06em; }
.gp-sched__p { font-size: 13px; color: var(--ink); }
.gp-sched__more { margin: 22px 0 0; text-align: right; }
.gp-sched__more a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--blue); border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* ゲストごとの章（A） */
.gp-ch { position: relative; padding-block: clamp(64px, 8vw, 112px); background: var(--white); }
.gp-ch--flip { background: var(--paper); }
.gp-ch__inner { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.gp-ch--flip .gp-ch__media { order: 2; }
.gp-ch__media { width: 100%; max-width: 470px; justify-self: center; }
.gp-ch__when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0; font-size: 14px; letter-spacing: 0.06em; color: var(--ink); }
.gp-ch__when .latin { font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; letter-spacing: 0.04em; color: var(--navy); }
.gp-ch__kicker { margin: 18px 0 0; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; color: var(--blue); }
.gp-ch__name { margin: 10px 0 8px; font-size: clamp(36px, 4.6vw, 60px); font-weight: 800; line-height: 1.2; letter-spacing: 0.1em; color: var(--navy); }
.gp-ch__role { margin: 0; font-size: 14px; letter-spacing: 0.08em; color: var(--ink); }
.gp-ch__text { margin-top: 22px; }
.gp-ch__text p { margin: 0 0 1em; font-size: 16px; line-height: 2.1; color: var(--ink); }
.gp-ch__sum { margin: 22px 0 0; font-size: clamp(17px, 1.6vw, 19px); font-weight: 600; line-height: 2; letter-spacing: 0.04em; color: #1f3f6c; }
.gp-ch__web { margin: 18px 0 0; }
.gp-ch__web a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--blue); border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.gp-ch__prof .gp-prof { padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line); }

.gend { padding-block: clamp(48px, 6vw, 80px); background: var(--paper); }

/* ============================================================
   A「ステージ」
   ============================================================ */
.gpa { position: relative; isolation: isolate; overflow: hidden; padding: clamp(28px, 4vw, 44px) 0 clamp(48px, 6vw, 88px); background: var(--paper); }
/* 軌道の線は、3組の絵の足もと（舞台の床）の高さで、絵のうしろを通す。名前には重ねない */
.gpa__wrap { position: relative; }
.gpa__orbits { position: absolute; left: -3%; top: calc(var(--floor, 60%) - 13%); z-index: -1; width: 106%; height: 26%; pointer-events: none; }
.gpa__inner { position: relative; z-index: 1; }
.gpa__head { position: relative; }
.gpa__lead { margin: 14px 0 0; font-size: clamp(16px, 1.7vw, 21px); font-weight: 600; letter-spacing: 0.12em; color: #1f3f6c; }
.gpa__year { position: absolute; right: 0; top: -6px; margin: 0; font-size: 15px; font-weight: 500; letter-spacing: 0.34em; color: #1f3f6c; }
/* 絵の下の辺（舞台の床）と、その下の時刻・名前の頭を3組でそろえる（subgrid） */
.gpa__stage { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: clamp(10px, 3vw, 52px); margin: clamp(8px, 2vw, 24px) 0 0; padding: 0; }
.gpa__act, .gpa__act a { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
.gpa__act a { justify-items: center; text-align: center; color: var(--navy); }
.gpa__fig { display: block; width: 100%; align-self: end; }
.gpa__txt { display: flex; flex-direction: column; align-items: center; padding-top: 14px; }
.gpa__fig .gp-pop { transition: transform .5s var(--ease); }
.gpa__act a:hover .gp-pop { transform: translateY(-6px); }
.gpa__act--head .gpa__fig { width: 56%; margin-bottom: 4%; }
.gp-ch--head .gp-ch__media { max-width: 340px; }
.gp-ch--head .gp-credit { margin-top: 18px; }
.gpa__time { margin-top: 4px; font-size: clamp(24px, 2.6vw, 36px); font-weight: 700; line-height: 1; letter-spacing: 0.06em; color: var(--blue); }
.gpa__name { margin-top: 10px; font-size: clamp(26px, 3vw, 42px); font-weight: 800; line-height: 1.15; letter-spacing: 0.12em; }
.gpa__act--head .gpa__name { font-size: clamp(40px, 5vw, 70px); }
.gpa__role { margin-top: 8px; font-size: 13px; letter-spacing: 0.06em; color: var(--ink); }
.gpa__act--head .gpa__role { font-family: var(--mincho); font-size: clamp(15px, 1.4vw, 18px); font-weight: 700; color: #1f3f6c; }

/* ============================================================
   B「時間順」
   ============================================================ */
.gpb-head { position: relative; isolation: isolate; overflow: hidden; padding: clamp(28px, 4vw, 44px) 0 clamp(40px, 5vw, 64px); background: var(--paper); }
.gpb-head__orbits { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.gpb-head__pieces { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.gpb-head__piece { position: absolute; filter: drop-shadow(0 8px 12px rgba(14, 42, 82, 0.2)); }
.gpb-head__piece--1 { right: 26%; top: 10%; width: 66px; rotate: 18deg; }
.gpb-head__piece--2 { right: 8%; top: 16%; width: 104px; rotate: 8deg; }
.gpb-head__piece--3 { right: 36%; top: 34%; width: 38px; rotate: -14deg; }
.gpb-head__inner { position: relative; z-index: 1; }
/* 頭の虹色の地と、下の欄の境目を線にしない（委員長 10/25「背景の差」）。下 160px で次の欄と同じ色へ */
.gpb-head::after, .ghs::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; height: 160px; background: linear-gradient(180deg, rgba(244, 246, 248, 0), var(--paper)); pointer-events: none; }
.gpb-head__lead { margin: 14px 0 0; font-size: clamp(16px, 1.7vw, 21px); font-weight: 600; letter-spacing: 0.12em; color: #1f3f6c; }
.gpb-head__date { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 26px 0 0; color: var(--navy); }
.gpb-head__date > .latin:first-child { font-size: clamp(56px, 7vw, 96px); font-weight: 700; line-height: 1; letter-spacing: 0.02em; background-size: 30px 30px, 220% 220%; }
.gpb-head__date > .latin:nth-child(2) { font-size: 14px; letter-spacing: 0.16em; color: var(--muted); }
.gpb-head__names { margin-left: 8px; font-family: var(--mincho); font-size: clamp(16px, 1.6vw, 20px); font-weight: 700; letter-spacing: 0.1em; }
.gpb-head__names i { margin: 0 10px; font-style: normal; font-size: 11px; color: var(--blue); vertical-align: 0.2em; }

/* 講演会の申込の案内：チケットの形。左（白）とミシン目の右の半券（紺）。半券の上下は丸く欠く（mask）。影は外側の .gp-band に */
.gp-band { margin-top: clamp(24px, 3vw, 36px); filter: drop-shadow(0 14px 24px rgba(14, 42, 82, 0.12)); --stub: 250px; }
.gp-ticket { display: grid; grid-template-columns: minmax(0, 1fr) var(--stub); border-radius: 10px;
  -webkit-mask: radial-gradient(circle 12px at calc(100% - var(--stub)) 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 12px at calc(100% - var(--stub)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 12px at calc(100% - var(--stub)) 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 12px at calc(100% - var(--stub)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; }
.gp-ticket__main { position: relative; padding: 22px clamp(20px, 2.6vw, 34px) 20px; background: var(--white); }
.gp-ticket__main::after { content: ""; position: absolute; right: 0; top: 16px; bottom: 16px; border-right: 2px dashed rgba(20, 48, 90, 0.2); }
.gp-ticket__k { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; color: var(--blue); }
.gp-ticket__k span { font-weight: 500; letter-spacing: 0.04em; color: var(--ink); }
.gp-ticket__t { margin: 8px 0 0; font-size: clamp(18px, 1.8vw, 22px); font-weight: 700; letter-spacing: 0.06em; color: var(--navy); }
.gp-ticket__t b { display: block; font-weight: 800; }
.gp-ticket__d { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin: 8px 0 0; color: var(--navy); }
.gp-ticket__d .gp-num { font-size: 22px; }
.gp-ticket__d small { margin-left: -6px; font-size: 13px; color: var(--ink); }
.gp-ticket__d small:last-child { margin-left: 4px; }
.gp-ticket__d--big .gp-num { font-size: clamp(22px, 2.2vw, 28px); }
.gp-ticket__p { margin: 4px 0 0; font-size: 13.5px; letter-spacing: 0.04em; color: var(--ink); }
.gp-ticket__q { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--blue); border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.gp-ticket__stub { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 20px 26px; background: linear-gradient(160deg, #1d4378, #0e2a52); color: #fff; transition: background-color .3s var(--ease); }
.gp-ticket__stub:hover { color: #fff; background: linear-gradient(160deg, #2a5b9c, #123668); }
.gp-ticket__sk { font-size: 12px; color: #8fc1ec; }
.gp-ticket__st { margin-top: 6px; font-size: 22px; font-weight: 800; letter-spacing: 0.1em; }
.gp-ticket__ss { margin-top: 6px; font-size: 12.5px; color: rgba(255, 255, 255, 0.8); }
.gp-ticket__go { position: absolute; right: 22px; bottom: 20px; transition: transform .3s var(--ease); }
.gp-ticket__go svg { width: 18px; height: 18px; }
.gp-ticket__stub:hover .gp-ticket__go { transform: translateX(4px); }
.ghs .gp-band { max-width: 640px; --stub: 210px; }
.gp-ticket__d--big { flex-wrap: nowrap; white-space: nowrap; }
/* 細田監督の欄の中に置く小さなチケット（題と日時は表にあるので、受付中・締切・質問へのリンクと半券だけ） */
.gp-band--mini { margin-top: 26px; --stub: 200px; }
.gp-band--mini .gp-ticket__main { padding: 18px 20px; }
.gp-band--mini .gp-ticket__st { font-size: 17px; letter-spacing: 0.06em; white-space: nowrap; }
.gp-ticket__st { white-space: nowrap; }
.ghs .gp-ticket__st { font-size: 20px; }

.gpb { position: relative; padding-block: clamp(32px, 5vw, 72px); background: var(--paper); }
.gpb__list { position: relative; list-style: none; margin: 0; padding: 0; --tcol: 170px; }
/* 時間をつなぐ1本の線。上は淡い空色、下へ行くほど紺 */
.gpb__list::before { content: ""; position: absolute; left: var(--tcol); top: 34px; bottom: 34px; width: 2px; margin-left: -1px; border-radius: 1px; background: linear-gradient(180deg, #a6d4f3, #56a0dc 40%, #2466b0 75%, #0f3a78); }
.gpb__row { position: relative; display: grid; grid-template-columns: var(--tcol) minmax(0, 1fr); column-gap: clamp(28px, 4vw, 56px); padding-block: clamp(32px, 4.5vw, 60px); }
.gpb__row + .gpb__row:not(.gpb__row--mark) { border-top: 1px solid var(--line); }
.gpb__row--mark + .gpb__row { border-top: 0; }
.gpb__time { position: relative; padding-right: 34px; text-align: right; }
.gpb__time > span.gp-num { display: block; font-size: clamp(30px, 3.2vw, 44px); line-height: 1; color: var(--navy); }
.gpb__time small { display: block; margin-top: 8px; font-size: 17px; font-weight: 700; color: var(--muted); }
.gpb__node { position: absolute; right: -19px; top: 4px; width: 38px; height: 38px; filter: drop-shadow(0 4px 6px rgba(14, 42, 82, 0.22)); }
.gpb__node svg { display: block; width: 100%; height: 100%; overflow: visible; }
.gpb__row--head .gpb__node { right: -24px; width: 48px; height: 48px; }
.gpb__row--head .gpb__node use { fill: url(#g-navy); }
.gpb__row--mark { padding-block: 0; }
.gpb__row--mark .gpb__time .gp-num { font-size: 20px; font-weight: 700; color: var(--muted); }
.gpb__dot { position: absolute; right: -6px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--white); border: 2px solid var(--blue); }
.gpb__mark { align-self: center; margin: 0; font-size: 14px; letter-spacing: 0.06em; color: var(--muted); }
.gpb__card { display: grid; grid-template-columns: minmax(0, 330px) auto minmax(0, 1fr); align-items: start; gap: clamp(18px, 2.6vw, 36px); }
.gpb__row--head .gpb__card { grid-template-columns: minmax(0, 280px) auto minmax(0, 1fr); }
/* 細田監督の欄は全体が特設ページへのリンク。中のチケット（判子・箔・傾き）はその上 */
.gpb__row--head .gpb__card { position: relative; }
.gpb__all { position: absolute; inset: -12px; z-index: 1; border-radius: 14px; transition: background-color .3s var(--ease); }
.gpb__all:hover { background: rgba(43, 111, 183, 0.04); }
.gpb__all:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.gpb__row--head .gpb__card .gp-band { position: relative; z-index: 2; }
.gpb__more { display: inline-flex; align-items: center; gap: 8px; margin: 22px 0 0; padding-bottom: 2px; font-size: 15px; font-weight: 700; letter-spacing: 0.08em; color: var(--blue); border-bottom: 1px solid currentColor; }
.gpb__more svg { transition: transform .25s var(--ease); }
.gpb__row--head .gpb__card:has(.gpb__all:hover) .gpb__more svg { transform: translateX(4px); }
.gpb__row--head .gpb__card:has(.gpb__all:hover) .gpb__name { color: var(--blue); }
.gpb__row--head .gpb__card:has(.gpb__all:hover) .gp-frame img { transform: translateY(-4px); }
.gpb__row--head .gp-frame img { transition: transform .4s var(--ease); }
.gpb__row--head .gp-credit { margin-top: 18px; }
.gpb__name { margin: 0; font-size: clamp(34px, 3.8vw, 52px); font-weight: 800; line-height: 1.15; letter-spacing: 0.14em; color: var(--navy); }
.gpb__row--head .gpb__name { font-size: clamp(38px, 4.4vw, 60px); }
.gpb__body { padding-top: 4px; }
.gpb__place { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: 0.08em; color: var(--navy); }
.gpb__kicker { margin: 14px 0 0; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; color: var(--blue); }
.gpb__who { margin: 8px 0 0; font-size: 14px; letter-spacing: 0.08em; color: var(--ink); }
.gpb__who b { font-size: 22px; letter-spacing: 0.12em; color: var(--navy); }
.gpb__prof { grid-column: 2; }

/* ============================================================
   C「講演が主役」
   ============================================================ */
.gpc { position: relative; isolation: isolate; overflow: hidden; padding: clamp(26px, 3.6vw, 40px) 0 clamp(48px, 7vw, 96px); background: var(--paper); }
.gpc__inner { position: relative; z-index: 1; }
.gpc__top .crumb { margin-bottom: 14px; }
.gpc__top .gp-title .mincho { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: 0.14em; background-size: 22px 22px, 220% 220%; }
.gpc__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); align-items: center; gap: clamp(20px, 4vw, 64px); margin-top: clamp(12px, 2vw, 28px); }
.gpc__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; font-size: 14px; font-weight: 700; letter-spacing: 0.16em; color: #1f3f6c; }
.gpc__kicker span { padding-left: 14px; border-left: 1px solid rgba(20, 48, 90, 0.3); color: var(--blue); }
.gpc__title { margin: 14px 0 0; font-size: clamp(56px, 8vw, 122px); font-weight: 800; line-height: 1.08; letter-spacing: 0.04em; }
.gpc__title span { display: block; background-size: 42px 42px, 220% 220%; }
.gpc__title span + span { padding-left: 0.9em; }
.gpc__who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 22px 0 0; color: var(--navy); }
.gpc__who small { font-size: 14px; letter-spacing: 0.08em; color: var(--ink); }
.gpc__who b { font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; letter-spacing: 0.16em; }
.gpc__when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 22px 0 0; color: var(--navy); }
.gpc__date { font-size: clamp(44px, 4.8vw, 64px); font-weight: 700; line-height: 1; letter-spacing: 0.02em; }
.gpc__dow { font-size: 14px; letter-spacing: 0.16em; color: var(--muted); }
.gpc__time { font-size: clamp(24px, 2.4vw, 32px); }
.gpc__place { margin: 8px 0 0; font-size: 15px; letter-spacing: 0.06em; color: var(--ink); }
.gpc__facts { display: flex; flex-wrap: wrap; margin: 16px 0 0; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; color: var(--navy); }
.gpc__facts span + span::before { content: "／"; margin: 0 10px; font-weight: 400; color: var(--muted); }
.gpc__entry { max-width: 470px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.gpc__portrait { position: relative; justify-self: center; width: min(100%, 380px); margin: 0; }
.gpc__portrait .gp-credit { margin-top: 18px; }
.gpc__orbit { position: absolute; left: -16%; top: -4%; z-index: 0; width: 132%; height: auto; overflow: visible; pointer-events: none; }
.gpc__portrait .float { position: relative; z-index: 1; display: block; }
.gpc-about { padding-block: clamp(56px, 8vw, 104px); background: var(--white); }
.gpc-about__inner { max-width: 980px; }
.gpc-about__sum { margin: 22px 0 0; font-size: clamp(17px, 1.7vw, 20px); font-weight: 600; line-height: 2; letter-spacing: 0.04em; color: #1f3f6c; }
.gpc-more { padding-block: clamp(56px, 8vw, 104px); background: var(--paper); }
.gpc-more__list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); margin: 30px 0 0; padding: 0; }
.gpc-card { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); align-items: center; gap: clamp(14px, 2vw, 28px); }
.gpc-card__when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0; font-size: 13px; color: var(--ink); }
.gpc-card__when .latin { font-size: 24px; font-weight: 700; letter-spacing: 0.04em; color: var(--navy); }
.gpc-card__name { margin: 8px 0 4px; font-size: clamp(28px, 3vw, 40px); font-weight: 800; letter-spacing: 0.12em; color: var(--navy); }
.gpc-card__role { margin: 0; font-size: 13px; letter-spacing: 0.06em; color: var(--ink); }
.gpc-card .gp-ch__text { margin-top: 14px; }
.gpc-card .gp-ch__text p { font-size: 14px; line-height: 2; }
.gpc-card .gp-credit { text-align: left; }

/* ============================================================
   細田守監督の講演会の特設ページ（guest/hosoda/）と申込・質問のフォーム
   ============================================================ */
.gp-entry__btns { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 6px 0 0; }
.ghs { position: relative; isolation: isolate; overflow: hidden; padding: clamp(26px, 3.6vw, 40px) 0 clamp(48px, 6vw, 80px); background: var(--paper); }
.ghs__orbits { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.ghs__inner { position: relative; z-index: 1; }
.ghs__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; gap: clamp(28px, 5vw, 80px); }
.ghs__btns { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 26px 0 0; }
.ghs .gp-entry__due { margin-top: 14px; }
.ghs__portrait { justify-self: center; width: min(100%, 360px); margin: 0; }
.ghs__portrait .gp-credit { margin-top: 20px; }
.ghs__contact { margin: 32px 0 0; font-size: 14px; line-height: 1.9; color: var(--ink); }
.ghs__contact a { color: var(--blue); border-bottom: 1px solid currentColor; }

.ghs__more { margin: 10px 0 0; }
.ghs__more a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--blue); border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* 和光大学生限定の事前上映会。「学生限定」を一番大きく（10/20 の打ち合わせ）。紺の地で講演会の欄と分ける */
.ghm { position: relative; overflow: hidden; padding-block: clamp(56px, 7vw, 96px); background: linear-gradient(160deg, #14305a 0%, #0e2a52 60%, #0b2350 100%); color: #fff; }
.ghm::before { content: ""; position: absolute; inset: 0; background: var(--puzzle-tile); background-size: 46px 46px; opacity: 0.12; pointer-events: none; }
.ghm .container { position: relative; }
.ghm__head { max-width: 760px; }
.ghm__only { display: inline-block; margin: 0; padding: 6px 0; font-size: clamp(34px, 4.6vw, 60px); font-weight: 800; line-height: 1.15; letter-spacing: 0.12em; color: #fff; border-bottom: 3px solid #8fc1ec; }
.ghm__title { display: flex; flex-direction: column; gap: 6px; margin: 22px 0 0; font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: 0.1em; color: #fff; }
.ghm__title .latin { font-size: 13px; font-weight: 600; color: #8fc1ec; }
.ghm__lead { margin: 16px 0 0; font-size: 15px; line-height: 2; color: rgba(255, 255, 255, 0.86); }
.ghm__list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); margin: clamp(28px, 3.6vw, 44px) 0 0; padding: 0; }
.ghm__item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 22px; padding: 22px 24px; background: rgba(255, 255, 255, 0.07); border-top: 2px solid #8fc1ec; }
.ghm__date { display: flex; flex-direction: column; align-items: flex-start; margin: 0; line-height: 1; }
.ghm__date .latin:first-child { font-size: clamp(40px, 4.4vw, 56px); font-weight: 700; letter-spacing: 0.02em; color: #fff; }
.ghm__dow { margin-top: 6px; font-size: 13px; letter-spacing: 0.18em; color: #8fc1ec; }
.ghm__work { margin: 0; font-size: clamp(17px, 1.7vw, 21px); font-weight: 700; line-height: 1.6; letter-spacing: 0.04em; color: #fff; }
.ghm__when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 8px 0 0; font-size: 14px; color: rgba(255, 255, 255, 0.82); }
.ghm__when .gp-num { font-size: 20px; color: #fff; }
.ghm__notes { margin: 28px 0 0; padding: 0 0 0 1.2em; font-size: 14px; line-height: 1.95; color: rgba(255, 255, 255, 0.86); }
.ghm__notes b { color: #fff; }

.ghf { padding-block: clamp(32px, 5vw, 80px); background: var(--paper); }
.ghf__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 64px); align-items: start; }
.ghf__col { scroll-margin-top: calc(var(--header-h) + 56px); }
.ghf__h { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: clamp(26px, 2.8vw, 34px); font-weight: 800; letter-spacing: 0.1em; color: var(--navy); }
.ghf__h .latin { font-size: 13px; font-weight: 600; color: var(--blue); }
.ghf__notes { margin: 18px 0 0; padding: 0 0 0 1.2em; font-size: 14px; line-height: 1.9; color: var(--ink); }
.ghf__notes li + li { margin-top: 4px; }
.ghf__sheet { margin-top: 26px; padding: clamp(20px, 2.6vw, 30px); background: var(--white); border-top: 2px solid var(--navy); box-shadow: 0 12px 28px rgba(14, 42, 82, 0.06); }

/* フォーム。欄は白地に細い線、選ぶものは四角の枠（丸い札の形は使わない） */
.hf__row { margin: 0 0 20px; padding: 0; border: 0; min-width: 0; }
.hf__label { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 0; font-size: 15px; font-weight: 700; letter-spacing: 0.04em; color: var(--navy); }
.hf__req { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: #b8344a; }
.hf__input { display: block; width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid rgba(20, 48, 90, 0.28); border-radius: 6px; background: #fbfcfd; font: inherit; font-size: 16px; color: var(--navy); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.hf__input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(63, 137, 208, 0.18); }
.hf__input[aria-invalid="true"] { border-color: #b8344a; }
.hf__area { min-height: 150px; line-height: 1.8; resize: vertical; }
.hf__hint { margin: 6px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--muted); }
.hf__choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.hf__choice { position: relative; display: block; cursor: pointer; }
.hf__choice input { position: absolute; opacity: 0; pointer-events: none; }
.hf__choice span { display: flex; align-items: center; min-height: 46px; padding: 10px 12px 10px 38px; border: 1px solid rgba(20, 48, 90, 0.22); border-radius: 6px; background: var(--white); font-size: 14px; line-height: 1.4; color: var(--navy); transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.hf__choice span::before { content: ""; position: absolute; left: 13px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border: 1.5px solid rgba(20, 48, 90, 0.45); border-radius: 50%; background: var(--white); }
.hf__choice input:checked + span { border-color: var(--blue); background: var(--pale); font-weight: 700; }
.hf__choice input:checked + span::before { border-color: var(--blue); background: radial-gradient(circle, var(--blue) 0 4px, var(--white) 5px); }
.hf__choice input:focus-visible + span { box-shadow: 0 0 0 3px rgba(63, 137, 208, 0.3); }
.hf__other { margin-top: 10px; }
.hf__privacy { margin: 0 0 10px; padding: 12px 14px; background: var(--white); border: 1px solid var(--line); font-size: 12.5px; line-height: 1.8; color: var(--ink); }
.hf__check { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--navy); cursor: pointer; }
.hf__check input { width: 20px; height: 20px; accent-color: var(--blue); flex-shrink: 0; }
.hf__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hf__send { margin-top: 26px; }
.hf__btn { min-width: 200px; justify-content: center; }
.hf__btn[disabled] { opacity: 0.55; cursor: progress; }
.hf__msg { margin: 14px 0 0; font-size: 14px; line-height: 1.8; color: #b8344a; }
.hf__msg:empty { display: none; }
/* 送ったあと・締め切ったあと */
.hf-done { padding: 6px 0; }
.hf-done__h { margin: 0; font-family: var(--mincho); font-size: clamp(20px, 2vw, 24px); font-weight: 700; letter-spacing: 0.06em; color: var(--navy); }
.hf-done__no { display: flex; align-items: baseline; gap: 12px; margin: 16px 0 0; padding: 14px 16px; background: var(--white); border: 1px solid var(--line); }
.hf-done__no span { font-size: 13px; color: var(--muted); }
.hf-done__no b { font-family: var(--latin); font-size: 30px; font-weight: 700; letter-spacing: 0.06em; color: var(--navy); }
.hf-done p { margin: 14px 0 0; font-size: 14px; line-height: 1.9; color: var(--ink); }

/* ============================================================
   ゲストのページ（B）の最初の画面：左に題とチケット、右に3組の絵
   ============================================================ */
.gpb-head__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(20px, 3vw, 48px); }
.gpb-head__text .gp-band { --stub: 186px; }
.gpb-head__text .gp-ticket__t { font-size: 18px; }
.gpb-head__text .gp-ticket__st { font-size: 20px; }
.gpb-head__piece--1 { right: auto; left: 46%; top: 12%; width: 54px; rotate: 18deg; }
.gpb-head__piece--3 { right: 2%; top: 4%; width: 44px; rotate: -14deg; }
.gpb-stage { position: relative; justify-self: end; width: min(100%, calc((100svh - var(--header-h) - 120px) * 0.97)); max-width: 580px; aspect-ratio: 600 / 620; --mx: 0; --my: 0; }
.gpb-stage__orbits { position: absolute; left: -6%; top: -4%; z-index: 0; width: 112%; height: 108%; overflow: visible; pointer-events: none; }
.gpb-stage__orbits .gp-orbit { stroke-width: 1.3; stroke-opacity: 0.6; }
.gpb-stage__orbits .gp-orbit--2 { stroke-opacity: 0.38; }
.gpb-stage__g { position: absolute; z-index: 1; display: block; color: var(--navy); transform: translate3d(calc(var(--mx) * var(--d) * 1px), calc(var(--my) * var(--d) * 0.6px), 0); transition: transform .9s var(--ease); }
.gpb-stage__g:hover { color: var(--navy); }
.gpb-stage__fig { display: block; }
.gpb-stage__g--c { left: 31%; top: 0; width: 35%; z-index: 2; }
.gpb-stage__g--l { left: -5%; bottom: 0; width: 48%; }
.gpb-stage__g--r { right: -5%; bottom: 1%; width: 56%; }
.gpb-stage__g .gp-pop, .gpb-stage__g .gp-frame img { transition: transform .5s var(--ease); }
.gpb-stage__g:hover .gp-pop { transform: translateY(-6px); }
.gpb-stage__g:hover .gp-frame img { transform: translateY(-4px); }
/* 名前の札：時刻（明朝の数字）・名前・肩書き。写真には重ねない */
.gpb-stage__l { position: absolute; display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.gpb-stage__l .gp-num { font-size: clamp(16px, 1.5vw, 20px); color: var(--blue); }
.gpb-stage__l b { font-size: clamp(18px, 1.9vw, 25px); font-weight: 800; letter-spacing: 0.12em; }
.gpb-stage__l small { font-size: 11.5px; letter-spacing: 0.04em; color: var(--ink); }
.gpb-stage__g--c .gpb-stage__l { left: calc(100% + 26px); top: 8%; }
.gpb-stage__g--c .gpb-stage__l b { font-size: clamp(22px, 2.4vw, 32px); }
.gpb-stage__g--l .gpb-stage__l { left: 8%; bottom: calc(100% + 4px); }
.gpb-stage__g--r .gpb-stage__l { right: 6%; bottom: calc(100% + 4px); text-align: right; align-items: flex-end; }
.gpb-stage__g--c .gp-frame__piece--a { width: 36%; }
/* 写真のクレジット（細田監督の肖像は「撮影／神藤 剛」が必須）。写真のすぐ下の右に */
.gpb-stage__credit { position: absolute; right: 0; top: 100%; margin-top: 6px; font-size: 10.5px; letter-spacing: 0.04em; color: var(--muted); white-space: nowrap; }

/* ---------- 大きな日付とチケット（委員長 10/25「強化すべきはここ」） ----------
   日付を大きく。
   チケットは本物の入場券のように：紙の地にピースの透かし、締切までの日数の判子、半券に虹色の箔押しのピース。
   マウスで少し傾き、光が紙の上をすべる。半券にのせると、ミシン目から少しはがれる */
.gpb-head__date { position: relative; z-index: 0; margin-top: 18px; }
.gpb-head__date > .latin:first-child { font-size: clamp(72px, 8vw, 118px); line-height: 0.95; background-size: 36px 36px, 220% 220%; }
.gpb-head__date > .latin:nth-child(2) { font-size: 15px; letter-spacing: 0.22em; }
.gp-band--hero { position: relative; z-index: 1; margin-top: clamp(16px, 2vw, 24px); --stub: 214px; }
.gp-band--rich { perspective: 1100px; filter: drop-shadow(0 18px 30px rgba(14, 42, 82, 0.16)); }
.gp-band--rich .gp-ticket { position: relative; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease); }
.gp-band--rich.is-tilt .gp-ticket { transition: transform .12s linear; }
.gp-band--hero .gp-ticket__main { padding: 24px clamp(20px, 2.6vw, 32px) 22px; }
.gp-band--mini.gp-band--rich .gp-ticket__main { min-height: 150px; padding-right: 120px; }
.gp-band--mini .gp-ticket__mark { display: none; }
/* 紙の全体のリンク（特設ページへ）。質問のリンクと半券はその上に */
.gp-ticket__all { position: absolute; inset: 0; z-index: 2; border-radius: 10px; }
.gp-ticket__all:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.gp-band--rich .gp-ticket .gp-ticket__main > .gp-ticket__q { z-index: 3; }
.gp-band--rich .gp-ticket__stub { z-index: 3; }
.gp-band--rich:has(.gp-ticket__all:hover) .gp-ticket__t, .gp-band--rich:has(.gp-ticket__all:hover) .gp-ticket__k { color: var(--blue); } /* 小さいチケットは判子だけ（透かしと重なってにぎやかになるため） */
.gp-band--rich .gp-ticket__main { overflow: hidden;
  background: radial-gradient(rgba(20, 48, 90, 0.05) 1px, transparent 1.2px) 0 0 / 14px 14px, var(--white); }
.gp-ticket__mark { position: absolute; right: -62px; top: -84px; z-index: 0; width: 180px; rotate: -14deg; fill: none; stroke: rgba(43, 111, 183, 0.2); stroke-width: 1.4; pointer-events: none; }
.gp-band--rich .gp-ticket__main > :not(.gp-ticket__mark) { position: relative; z-index: 1; }
.gp-band--hero .gp-ticket__t { font-size: clamp(19px, 1.7vw, 22px); }
.gp-band--hero .gp-ticket__d .gp-num { font-size: clamp(22px, 2vw, 27px); }
/* 締切までの残りの日数：青いインクの丸い判子。少し傾けて押したように */
.gp-ticket__left { position: absolute !important; right: clamp(14px, 1.6vw, 22px); bottom: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 78px; aspect-ratio: 1; border: 2px solid currentColor; border-radius: 50%; box-shadow: inset 0 0 0 3px var(--white), inset 0 0 0 4px currentColor; rotate: -12deg; color: #2b6fb7; font-family: var(--mincho); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; line-height: 1.2; opacity: 0.9; }
.gp-ticket__left[hidden] { display: none; }
.gp-ticket__left b { font-size: 26px; line-height: 1; letter-spacing: 0; }
.gp-ticket__left i { font-style: normal; }
/* 半券：箔押しのピース（虹色。傾きで色が流れる）と、縁の縦書き */
.gp-band--rich .gp-ticket__stub { overflow: hidden; padding: 22px 22px 22px 24px; transition: transform .45s var(--ease), background-color .3s var(--ease); }
.gp-band--rich .gp-ticket__stub:hover { transform: translateX(5px); }
.gp-ticket__foil { position: absolute; right: 18px; top: 16px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25)); width: 44px; aspect-ratio: 1; rotate: 12deg;
  background: linear-gradient(115deg, #ff9fcf 0%, #8fd6ff 18%, #fff09a 34%, #b9a2ff 50%, #7fe6d6 66%, #8fd6ff 82%, #ff9fcf 100%) var(--fx, 30%) 50% / 320% 320%;
  -webkit-mask: var(--foil) center / contain no-repeat; mask: var(--foil) center / contain no-repeat; opacity: 0.95; transition: background-position .3s linear; }
.gp-ticket__foil::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.9) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat; animation: gpt-sheen 5.5s ease-in-out 1.6s infinite; }
/* 紙の上をすべる光（マウスの位置）。のせていないときは見えない */
.gp-ticket__glare { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease);
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 42%); mix-blend-mode: soft-light; }
.gp-band--rich.is-tilt .gp-ticket__glare { opacity: 1; }

/* ---------- 開いたときの動き（1回だけ） ----------
   題が左から現れる → 一言 → 大きな日付 → チケットが少し傾いて置かれ、まっすぐに落ち着く → 箔に光が走る */
.gpb-head .crumb { animation: gpb-up .6s var(--ease) .05s backwards; }
.gpb-head .gp-title .mincho { animation: gpb-wipe 1s cubic-bezier(0.6, 0, 0.2, 1) .12s backwards, puzzle-shimmer 14s ease-in-out 1.2s infinite alternate; }
.gpb-head .gp-title .latin { animation: gpb-up .6s var(--ease) .7s backwards; }
.gpb-head__lead { animation: gpb-up .7s var(--ease) .35s backwards; }
.gpb-head__date { animation: gpb-up .8s var(--ease) .5s backwards; }
.gp-band--hero { animation: gpt-drop 1s cubic-bezier(0.2, 0.9, 0.25, 1.05) .75s backwards; }
@keyframes gpb-up { from { opacity: 0; transform: translateY(14px); } }
@keyframes gpb-wipe { from { clip-path: inset(-10% 100% -10% 0); } to { clip-path: inset(-10% 0 -10% 0); } }
@keyframes gpt-drop { from { opacity: 0; transform: translate(-10px, 34px) rotate(-3.5deg); } 60% { opacity: 1; } }
@keyframes gpt-sheen { 0% { background-position: -150% 0; } 35%, 100% { background-position: 250% 0; } }

/* 時間の線：うすい線の上に、スクロールに合わせて伸びる線（--p。guest-fx.js）。着いた時刻のピースは紺に */
.gpb__list.is-live::before { background: rgba(43, 111, 183, 0.16); }
.gpb__list.is-live::after { content: ""; position: absolute; left: var(--tcol); top: 34px; bottom: 34px; width: 2px; margin-left: -1px; border-radius: 1px; background: linear-gradient(180deg, #a6d4f3, #56a0dc 40%, #2466b0 75%, #0f3a78); transform-origin: top; transform: scaleY(var(--p, 0)); }
.gpb__list.is-live .gpb__node { transform: scale(0.72); filter: grayscale(1) opacity(0.45); transition: transform .5s var(--ease), filter .5s var(--ease); z-index: 1; }
.gpb__list.is-live .gpb__row.is-on .gpb__node { transform: none; filter: drop-shadow(0 4px 6px rgba(14, 42, 82, 0.22)); }
.gpb__list.is-live .gpb__time > span.gp-num { color: rgba(20, 48, 90, 0.35); transition: color .5s var(--ease); }
.gpb__list.is-live .gpb__row.is-on .gpb__time > span.gp-num { color: var(--navy); }
/* 切り抜きは、画面に入るとピースの中からせり上がる */
.gpb__list.is-live .gpb__card .gp-pop__who { transform: translateY(60px); transition: transform 1.1s var(--ease) .2s; }
.gpb__list.is-live .gpb__card.is-in .gp-pop__who { transform: none; }

/* 細田監督の作品の年表（字だけ）。1本の線に、年と縦書きの題 */
.gp-works { margin-top: clamp(28px, 4vw, 44px); }
.gp-works__h { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.16em; color: var(--blue); }
.gp-works__list { position: relative; list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0; padding: 0; }
.gp-works__list::before { content: ""; position: absolute; left: 0; right: 0; top: 34px; height: 1px; background: linear-gradient(90deg, rgba(43, 111, 183, 0.15), var(--blue), rgba(43, 111, 183, 0.15)); }
.gp-works__list li { display: flex; flex-direction: column; align-items: center; }
.gp-works__list .gp-num { font-size: 16px; color: var(--navy); }
.gp-works__list i { position: relative; width: 11px; height: 11px; margin: 8px 0 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--blue); }
.gp-works__list li:last-child i { background: var(--blue); }
.gp-works__list { column-gap: clamp(8px, 1.2vw, 16px); }
.gp-works__img { position: relative; width: 100%; margin: 0; }
.gp-works__img img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 4px; box-shadow: 0 10px 22px rgba(14, 42, 82, 0.16); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.gp-works__list li:hover .gp-works__img img { transform: translateY(-4px); box-shadow: 0 16px 28px rgba(14, 42, 82, 0.22); }
.gp-works__img figcaption { margin-top: 5px; font-size: 10px; letter-spacing: 0.02em; color: var(--muted); text-align: right; }
.gp-works__list b { margin-top: 8px; font-size: 13.5px; font-weight: 700; line-height: 1.55; letter-spacing: 0.04em; text-align: center; color: var(--navy); }

/* 特設ページ：聞き手（40年来） */
.ghl { padding-block: clamp(56px, 7vw, 96px); background: var(--white); }
.ghl__inner { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(28px, 5vw, 72px); }
.ghl__num { display: flex; align-items: baseline; gap: 6px; margin: 0; color: var(--navy); }
.ghl__num .gp-num { font-size: clamp(110px, 14vw, 200px); line-height: 0.9; background-image: var(--puzzle-tile), var(--grad); background-size: 40px 40px, 220% 220%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.ghl__num small { font-family: var(--mincho); font-size: clamp(22px, 2.6vw, 34px); font-weight: 800; letter-spacing: 0.1em; }
.ghl__title { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; letter-spacing: 0.1em; color: var(--navy); }
.ghl__title .latin { font-size: 13px; font-weight: 600; color: var(--blue); }
.ghl__lead { margin: 18px 0 0; font-size: clamp(17px, 1.7vw, 20px); font-weight: 600; line-height: 2; letter-spacing: 0.04em; color: #1f3f6c; }
.ghl__bio { margin: 14px 0 0; font-size: 14px; line-height: 2; color: var(--ink); }

/* ---------- 画面が狭いとき ---------- */
@media (max-width: 900px) {
  .gp-ch__inner, .gpc__grid, .ghs__grid, .ghf__grid, .ghm__list, .gpb-head__grid { grid-template-columns: minmax(0, 1fr); }
  .gpb-stage { justify-self: center; max-width: 520px; margin-top: 28px; }
  /* スマホは題のすぐ下に3組の絵、その下に日付とチケット（開いてすぐ顔が見えるように） */
  .gpb-head__text { display: contents; }
  .gpb-stage { order: 1; }
  .gpb-head__date { order: 2; }
  .gpb-head__text > .gp-band { order: 3; }
  .ghl__inner { grid-template-columns: minmax(0, 1fr); }
  .gp-works__list { grid-template-columns: repeat(7, 128px); overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
  .gp-works__list li { scroll-snap-align: start; }
  .ghs__portrait { width: min(70%, 300px); grid-row: 1; }
  .gp-ch--flip .gp-ch__media { order: 0; }
  .gp-ch__media { max-width: 400px; }
  .gpc__portrait { width: min(84%, 420px); grid-row: 1; }
  .gpc-more__list { grid-template-columns: minmax(0, 1fr); }
  .gpb__card { grid-template-columns: minmax(0, 260px) auto minmax(0, 1fr); }
}
@media (max-width: 760px) {
  /* チケットは縦に積む。半券は下、ミシン目は横、丸い欠けは左右に */
  .gp-band, .ghs .gp-band { --stub: 104px; }
  .gp-ticket { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto var(--stub);
    -webkit-mask: radial-gradient(circle 12px at 0 calc(100% - var(--stub)), #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% calc(100% - var(--stub)), #0000 98%, #000) right / 51% 100% no-repeat;
            mask: radial-gradient(circle 12px at 0 calc(100% - var(--stub)), #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% calc(100% - var(--stub)), #0000 98%, #000) right / 51% 100% no-repeat; }
  .gp-ticket__main::after { left: 16px; right: 16px; top: auto; bottom: 0; border-right: 0; border-bottom: 2px dashed rgba(20, 48, 90, 0.2); }
  .gp-ticket__stub { padding: 16px 52px 16px 22px; }
  .gp-ticket__d--big { flex-wrap: wrap; white-space: normal; }
  /* 細田監督の欄：題は縦書きをやめて上に横書き、表は全幅に。プロフィールは時間の線の右に */
  .gpb__row--head .gpb__name { writing-mode: horizontal-tb; grid-row: 2; grid-column: 1 / -1; font-size: 30px; letter-spacing: 0.08em; }
  .gpb__row--head .gpb__body { grid-row: 3; grid-column: 1 / -1; }
  .gpb__prof { grid-column: 2; }
  .gpb__time small { white-space: nowrap; }
  .gpa__year, .gpa__orbits, .ghs__orbits, .gpb-head__orbits { display: none; }
  .gpa__stage { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .gpa__act--head { grid-column: 1 / -1; order: -1; }
  .gpa__act--head .gpa__fig { width: 72%; }
  .gp-prof { grid-template-columns: minmax(0, 1fr); }
  .gp-sched__list a { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .gpb-stage__g--c .gpb-stage__l { left: calc(100% + 12px); }
  .gpb-stage__l b, .gpb-stage__g--c .gpb-stage__l b { font-size: 17px; letter-spacing: 0.08em; }
  .gpb-stage__l small { display: none; }
  .gpb-head__piece--1 { right: 3%; left: auto; top: 5%; width: 40px; }
  .gpb-head__piece--2 { right: -5%; top: 62%; width: 66px; }
  .gpb-head__piece--3 { display: none; }
  .gpb__list { --tcol: 66px; }
  .gpb__row { column-gap: 22px; }
  .gpb__time { padding-right: 18px; }
  .gpb__time > span.gp-num { font-size: 17px; }
  .gpb__time small { font-size: 11.5px; }
  .gpb__node { right: -13px; width: 26px; height: 26px; }
  .gpb__row--head .gpb__node { right: -15px; width: 30px; height: 30px; }
  .gpb__row--mark .gpb__time .gp-num { font-size: 15px; }
  .gpb__card { grid-template-columns: minmax(0, 1fr) auto; }
  .gpb__media { grid-column: 1 / -1; max-width: 320px; }
  .gpb__row--head .gpb__card { grid-template-columns: minmax(0, 1fr) auto; }
  .gpb__row--head .gpb__media { max-width: 230px; margin-left: 6%; }
  .gpb__name { grid-row: 2; grid-column: 2; font-size: 30px; }
  .gpb__body { grid-row: 2; grid-column: 1; }
  .gpc__title span + span { padding-left: 0.6em; }
  .gpc-card { grid-template-columns: minmax(0, 1fr); }
  .gpc-card__fig { width: min(100%, 320px); justify-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .gpb-head .crumb, .gpb-head .gp-title .mincho, .gpb-head .gp-title .latin, .gpb-head__lead, .gpb-head__date, .gp-band--hero, .gp-ticket__foil::after { animation: none !important; }
  .gp-band--rich .gp-ticket, .gp-band--rich .gp-ticket__stub { transition: none; }
  .gp-prism { animation: none; }
  .gp-orbit { animation: none; stroke-dashoffset: 0; }
}