/* Adobe Fonts kit agx8qeq。使用するのは欧文 akzidenz-grotesk-next-pro（400 / 700）と
   和文 hiragino-kaku-gothic-pron（300 / 600）のみ。
   condensed はキットに含まれるが使わない（2026年09月15日 Makoto指示）。
   500相当の欧文は無いので使わず、合成もさせない（font-synthesis: none）。 */

/* 基本文字は14.5px。メインコピーのみ18.5px。 */
:root {
  --blue: #171C8F; --paper: #ddd; --line: #d5d6eb;
  --font: akzidenz-grotesk-next-pro, hiragino-kaku-gothic-pron, "Helvetica Neue", Helvetica, "Hiragino Kaku Gothic ProN", sans-serif;
  --gutter: 15px;
  /* 外周余白 */
  --edge: var(--gutter);
}
.p-page { margin: 0; background: var(--paper); color: var(--blue); font-family: var(--font); font-size: 14.5px; font-weight: 400; line-height: 1.4; font-synthesis: none; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }
h1, h2 { font-size: 1em; margin: 0; } /* 見出しも本文と同寸。太さだけで立てる */
.c-link { color: inherit; font: inherit; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
.c-link:hover { text-decoration: underline; text-underline-offset: .22em; }
.c-link:focus-visible, .c-brand:focus-visible, .p-work_link:focus-visible, .p-selected_image:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.c-skip { position: fixed; top: -100px; left: var(--gutter); background: var(--paper); color: var(--blue); padding: 12px; z-index: 100; }
.c-skip:focus { top: 15px; }
.u-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.c-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.l-header { position: sticky; top: 0; z-index: 20; padding: 1em var(--edge); background: transparent; color: var(--blue); display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
/* ロゴは公式SVGを P l / o / f に分割し、oブロックを複製して増殖させる。1em = viewBox高 92.76 単位。
   大きさの調整はこの font-size 一箇所で完結する。 */
.c-brand { display: flex; align-items: flex-start; font-size: 32px; line-height: 0; color: inherit; text-decoration: none; }
.c-brand_part { display: block; height: 1em; width: auto; flex: none; fill: currentColor; }
.c-brand_pl { width: 1.22983em; }
.c-brand_o { width: .84692em; }
.c-brand_f { width: .45731em; margin-left: 0; }
.c-brand_extra .c-brand_o { transform-origin: left center; }
.c-brand_extra { display: block; flex: none; width: 0; overflow: hidden; opacity: 0; }
.l-nav { display: flex; flex: none; gap: 1.6em; }
.l-main { padding: 0 var(--edge); }
.p-intro { position: relative; padding: 2.2em 0 8em; }
.p-intro_title { font-size: 18.5px; }
.p-intro_description { margin: .7em 0 0; }
.p-intro_down { position: absolute; right: 0; bottom: 1.5em; }
.p-selected { margin-inline: calc(-1 * var(--edge)); }
.p-selected_image { display: block; }
.p-selected_photo { display: block; width: 100%; height: auto; }
.p-caption { display: flex; justify-content: space-between; padding: .8em 0; }
.p-archive { padding: 3em 0 5em; scroll-margin-top: 105px; }
.p-section_heading { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .8em; }
.p-archive_body { display: block; }
.p-archive_note { margin: 0 0 1.5em; }
.p-archive_body { margin-right: calc(-1 * var(--edge)); }
.p-work_list { list-style: none; padding: 0; margin: 0; }
/* 左右の padding と同量の負マージンで、地色だけが文字の外へ .35em ぶんはみ出す
   （ホバー時に地色を付けてもグリフの位置が動かないよう、常に同じ箱で持つ）。 */
.p-work_link { display: block; width: calc(100% + .7em); margin-inline: -.35em; box-sizing: border-box; overflow: hidden; white-space: nowrap; text-overflow: clip; padding: .08em .35em; color: inherit; text-decoration: none; position: relative; }
/* ホバー／フォーカス中の行だけがサムネイルの前に出る。地色ブルー＋白文字で読ませる */
.p-work_link:hover, .p-work_link:focus-visible { z-index: 2; background: var(--blue); color: var(--paper); }

.p-work_arrow { margin-left: auto; }
.p-work_item + .p-work_item { margin-top: 6px; }
.p-work_track { display: flex; width: max-content; }
.p-work_title { display: block; flex: none; padding-right: 3em; }
.p-work_link:hover .p-work_track, .p-work_link:focus-visible .p-work_track { animation: archive-loop var(--loop-duration, 30s) linear infinite; }
@keyframes archive-loop { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .p-work_link:hover .p-work_track, .p-work_link:focus-visible .p-work_track { animation: none; } }
/* プレビューは奥から出る（縮み＋ボケが解けながら手前へ）。
   サムネイルはホバー行以外の文字より前（z-index 1）、ホバー行（2）より後ろ。
   位置は main.js が --follow-* に目標値を入れるだけで、遅れは transform の
   トランジション（.24s）が作る＝カーソルを少し遅れて追いかける。 */
.p-preview { position: fixed; z-index: 1; left: 0; top: 0; width: min(30vw, 420px); pointer-events: none; opacity: 0; transform: translate3d(var(--follow-x, 0px), calc(var(--follow-y, 0px) + 12px), 0) scale(.955); filter: blur(7px); transition: opacity .3s, transform .24s cubic-bezier(.22,1,.36,1), filter .34s; }
.p-preview.is-visible { opacity: 1; transform: translate3d(var(--follow-x, 0px), var(--follow-y, 0px), 0) scale(1); filter: blur(0); }
/* 動画の行に重ねる再生ボタン。押すとInstagramの投稿へ飛ぶ（リンクの動作そのまま） */
/* どんな写真の上でも見えるよう、青の細いリングを回す */
.p-preview_play { position: absolute; top: 50%; left: 50%; z-index: 2; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 2px var(--blue); opacity: 0; transition: opacity .3s; }
.p-preview_play::after { content: ""; position: absolute; top: 50%; left: 50%; margin: -6px 0 0 -4px; border: 6px solid transparent; border-left: 10px solid var(--blue); border-right: 0; }
.p-preview.is-play .p-preview_play { opacity: 1; }
/* 箱の大きさは main.js が高さ基準で決めるので、画像はそれに従うだけ */
.p-preview_image { display: block; width: 100%; height: auto; object-fit: contain; }
.p-about { padding: 1em 0 2em; display: block; scroll-margin-top: 105px; }
.p-about_pair { display: grid; grid-template-columns: 1fr; gap: .8em; max-width: 650px; margin-top: 1.8em; }
.p-about_english { margin: 0; line-height: 1.65; }
.p-about_links { display: flex; gap: 2em; margin-top: 3em; }
.p-about_japanese { margin: 0; font-weight: 300; line-height: 1.75; } /* 和文だけは行間を広めに取る */
.p-about_sign { margin: 1em 0 0; font-weight: 700; }
.l-footer { margin: 0 var(--edge); padding: 1.2em 0 1.5em; display: flex; justify-content: space-between; }
/* Fullscreen viewer: panel wipe, oversized centered image, following close control. */
.p-page.is-viewing { overflow: hidden; }
.p-dialog { position: fixed; inset: 0; margin: 0; border: 0; padding: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; overflow: hidden; color: #fff; background: var(--paper); opacity: 0; transition: opacity .35s, background-color .85s cubic-bezier(.22,1,.36,1); }
.p-dialog.is-open { opacity: 1; background-color: #1b1d22; }
/* The background is the poster itself, quarter size and scaled back up so the blur
   stays cheap; brightness() keeps every image dark enough for the white title. */
.p-dialog_veil { position: fixed; top: 0; left: 0; z-index: 0; width: 25%; height: 25%; object-fit: cover; transform-origin: 0 0; transform: scale(4.4); filter: blur(16px) brightness(.5) saturate(1.15); opacity: 0; transition: opacity .85s; pointer-events: none; }
.p-dialog.is-open .p-dialog_veil { opacity: 1; }
.p-dialog::backdrop { background: var(--paper); opacity: 0; transition: opacity .65s; }
.p-dialog.is-open::backdrop { opacity: 1; }
/* text-shadow so the title survives a poster whose blurred paper reads light. */
.p-dialog_bar { position: fixed; top: 18px; left: 18px; z-index: 2; pointer-events: none; text-shadow: 0 1px 14px #000000a6; display: flex; gap: 1.2em; }
/* 投稿そのものを見に行くリンク。APIが動画URLを返さないリールはここから見てもらう */
.p-dialog_source { color: inherit; text-decoration: none; pointer-events: auto; }
.p-dialog_source:hover { text-decoration: underline; text-underline-offset: .22em; }
/* 既定（タッチ端末）は画面に収める。PCだけ下のブロックで150dvhに拡大してパンさせる。 */
.p-dialog_stage { position: relative; z-index: 1; height: 100%; overflow: auto; overscroll-behavior: contain; display: flex; align-items: center; justify-content: center; }
.p-dialog_image { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 1; box-shadow: 0 16px 48px #00000000; transition: box-shadow .85s; }
.p-dialog.is-open .p-dialog_image { opacity: 1; box-shadow: 0 16px 48px #00000030; }
/* 動画は拡大せず画面にぴったり収める。背景色を敷かないので余りはぼかし背景が見える
   （黒い帯が枠線のように見えるのを避ける）。 */
.p-dialog_video { display: block; width: 100%; height: 100%; object-fit: contain; background: transparent; }
/* **これが無いと hidden が効かない**。CSSの display:block がHTMLのhidden属性に勝つため、
   隠したはずの画像の箱が細い線（枠線のようなもの）として残る。 */
.p-dialog_image[hidden], .p-dialog_video[hidden] { display: none; }
.p-dialog.is-video .p-dialog_stage { display: flex; align-items: center; justify-content: center; overflow: hidden; }
/* 「slide →」も入るよう横は可変。1語のときは丸に近い形を保つ */
.p-dialog_close { position: fixed; z-index: 3; right: 18px; top: 18px; min-width: 64px; height: 64px; padding: 0 1.1em; border: 0; border-radius: 999px; background: #777; color: #fff; font: inherit; white-space: nowrap; cursor: pointer; }
/* 同じボタンが位置で「← slide / slide → / play ▶」に変わる。Close のときだけグレー、他は青 */
.p-dialog_close[data-zone="prev"], .p-dialog_close[data-zone="next"], .p-dialog_close[data-zone="play"] { background: var(--blue); }
.p-dialog_close:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .p-dialog.is-tracking { cursor: none; }
  /* PCは原寸より大きく出してカーソルで見回す（パン）。ここだけ画面からはみ出す。 */
  .p-dialog_stage { overflow: hidden; display: block; }
  .p-dialog_image { position: absolute; top: 0; left: 50%; width: auto; height: 150dvh; max-width: none; margin: 0; transform: translate(calc(-50% + var(--pan-x, 0px)), var(--pan-y, -25dvh)); will-change: transform; transform-origin: left top; }
  .p-dialog.is-tracking .p-dialog_close { top: 0; left: 0; right: auto; transform: translate(var(--cursor-x, 20px), var(--cursor-y, 20px)); pointer-events: none; }
}
/* タッチ端末: 画像を指で振って閉じる／送る（Xの画像表示と同じ感覚）。
   ブラウザ側のスクロールやページ送りに取られないよう touch-action を切る。 */
@media (hover: none), (pointer: coarse) {
  .p-dialog_stage { touch-action: none; }
  /* タッチ端末は縦フリックで閉じるのでボタンは出さない。ただし消してしまうと
     スクリーンリーダーで閉じられなくなるため、見えない状態で残す。 */
  .p-dialog_close { position: fixed; width: 1px; height: 1px; min-width: 0; padding: 0; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* 箱を画像の実寸に縮める。100%のままだと contain の余白まで img が占めてしまい、
     「背景タップで閉じる」が画像タップとして拾われる。 */
  .p-dialog_image, .p-dialog_video { width: auto; height: auto; max-width: 100%; max-height: 100%; transform: translate3d(var(--drag-x, 0px), var(--drag-y, 0px), 0); transition: transform .28s cubic-bezier(.22,1,.36,1); }
  .p-dialog.is-open { opacity: var(--drag-fade, 1); }
  /* 追従中はアニメーションを挟まない（指に張り付かせる） */
  .p-dialog.is-dragging .p-dialog_image, .p-dialog.is-dragging .p-dialog_video { transition: none; }
  .p-dialog.is-dragging { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .p-dialog, .p-dialog::backdrop, .p-dialog_image { transition: none; }
}
@media (max-width: 700px) {
  .l-header { display: block; padding: 1em var(--gutter); }
  .l-nav { justify-content: space-between; gap: 1em; margin-top: 1.2em; }
  .l-main { padding: 0 var(--gutter); }
  .p-intro { padding: 2.2em 0 8em; }
  .p-intro_down { bottom: 2em; }
  
  .p-archive { padding: 3em 0 5em; scroll-margin-top: 115px; }
  .p-archive_body, .p-about { grid-template-columns: 1fr; }
  .p-archive_index { display: none; }
  .p-about_pair { grid-template-columns: 1fr; gap: .8em; }
  .p-about { padding-bottom: 2em; scroll-margin-top: 115px; }
  .l-footer { margin: 0 var(--gutter); flex-wrap: wrap; gap: 1em; }
  .p-preview { display: none; }
  .u-desktop { display: none; }
}
@media (prefers-reduced-motion: reduce) { .p-preview { transition: none; } }

/* Archiveは横読み（Z字）のグリッド。CSS columnsだと列ごとに上→下へ流れる縦読みになり、
   件数が増える（最大320件）ほど読み順が追いにくいため、行方向に並べる。 */
.p-page_archive-first .p-archive_body { margin-right: 0; }
.p-page_archive-first .p-work_list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 28px; row-gap: 6px; }
.p-page_archive-first .p-work_item { margin: 0; }
.p-page_archive-first .p-work_link { position: relative; }
.p-work_summary { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.p-page_archive-first .p-work_track { position: absolute; top: .08em; left: 0; visibility: hidden; }
.p-page_archive-first .p-work_link:hover .p-work_summary,
.p-page_archive-first .p-work_link:focus-visible .p-work_summary { visibility: hidden; }
.p-page_archive-first .p-work_link:hover .p-work_track,
.p-page_archive-first .p-work_link:focus-visible .p-work_track { visibility: visible; }
@media (max-width: 900px) { .p-page_archive-first .p-work_list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; } }
@media (max-width: 480px) { .p-page_archive-first .p-work_list { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .p-page_archive-first .p-work_link:hover .p-work_summary,
  .p-page_archive-first .p-work_link:focus-visible .p-work_summary { visibility: visible; }
  .p-page_archive-first .p-work_link:hover .p-work_track,
  .p-page_archive-first .p-work_link:focus-visible .p-work_track { visibility: hidden; }
}

.p-about_visual { margin-top: 2em; }

@media (prefers-reduced-motion: reduce) {
  /* 追従の遅れもアニメーションなので、動きを減らす設定では即座に置く */
  .p-preview { transition: none; }
}