@charset "utf-8";

/* =============================================================
   お客様の写真展

   スタッフアルバムは「机に放り出した写真」だったが、こちらは
   お客様からお預かりした一枚なので、まっすぐ、丁寧に並べる。
   傾けない。白いふちも回さない。写真そのものを見ていただく。
   ============================================================= */

.gal { padding-bottom: clamp(72px, 11vh, 128px); }

.gal__lead {
	width: min(720px, 100%);
	margin: 0 auto clamp(48px, 8vh, 88px);
	text-align: center;
	font-size: clamp(15px, 1.8vw, 18px);
	line-height: 2.4;
	letter-spacing: .1em;
}

/* まだ一枚も無いときの断り。 */
.gal__machi {
	text-align: center;
	font-size: clamp(14px, 1.6vw, 16px);
	line-height: 2.4;
	letter-spacing: .08em;
	color: var(--ji-2);
	padding-block: clamp(40px, 7vh, 72px);
}

/* 格子。写真の丈はまちまちなので、段組みで流す。
   列の数と写真どうしの間は、この二つで持つ（JSからも読む）。 */
.gal__list {
	--retsu: 4;
	--aki: clamp(18px, 2.4vw, 32px);
	column-count: var(--retsu);
	column-gap: var(--aki);
	margin: 0;
	padding: 0;
	list-style: none;
}
.gal__item {
	break-inside: avoid;
	margin-bottom: var(--aki);
}

/* 石垣。JSが効くときだけ、段組みをやめて升目で積む。

   段組み（columns）は縦に流れるので、「もっと見る」で札が増えると
   四つの列の丈をそろえ直そうとして、すでに出ていた写真まで動く
   （2026年9月20日、本人の指摘）。読んでいた場所が消えるので直した。
   升目は横に流れるから、後ろに足しても前は動かない。
   一段8pxの細かい行を敷いて、一枚が何行ぶんかをJSが測って入れる。
   JSが動かないときは上の段組みのまま。丈は測れないが、並びは出る。 */
.gal__list--ishi {
	column-count: auto;
	display: grid;
	grid-template-columns: repeat(var(--retsu), minmax(0, 1fr));
	grid-auto-rows: var(--dan, 8px);
	column-gap: var(--aki);
	row-gap: 0;             /* 縦の間は行数に含めてある */
	align-items: start;
}
.gal__list--ishi .gal__item { margin-bottom: 0; }
.gal__card {
	display: block;
	position: relative;
}
/* 添付から出した写真は、比を指定しない（切らずに、撮られたままの形で置く）。
   石垣（masonry）は一枚ごとに丈が違うから成り立つので、
   ここで形をそろえてしまうと、ただの格子になる。 */
.gal__pic .pic__img { display: block; width: 100%; height: auto; }

/* 受付への近道。写真の上に一つだけ。 */
.gal__chikamichi {
	margin: 0 0 clamp(32px, 5vh, 56px);
	text-align: center;
}
.gal__pic .pic__body {
	padding: 0;
	border-radius: 3px;
	overflow: hidden;
	box-shadow: 0 18px 40px -30px rgba(var(--sumi-rgb), .45);
}
.gal__pic .pic__img { transition: scale .8s cubic-bezier(.22, .61, .36, 1); }
.gal__card:hover .pic__img { scale: 1.04; }

/* 名と年は写真の下に、小さく。 */
.gal__shita {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-top: 10px;
}
.gal__toshi {
	font-size: 11px;
	letter-spacing: .1em;
	color: var(--ji-3);
	font-variant-numeric: tabular-nums;
}

/* 窓が使えるときは、下に置いた実体を隠す（記憶のページと同じ）。 */
.mado-ari .gal__honbun { display: none; }

/* -------------------------------------------------------------
   受付
   紙に書いて出す、くらいの佇まいにする。飾らない。
   ------------------------------------------------------------- */


/* -------------------------------------------------------------
   狭い画面
   ------------------------------------------------------------- */

@media (max-width: 1100px) { .gal__list { --retsu: 3; } }
@media (max-width: 780px)  { .gal__list { --retsu: 2; } }
@media (max-width: 460px) {
	/* 一列にはしない（2026年9月20日、本人の指定）。
	   一枚ずつだと縦に伸びすぎて、何枚あるのか見当がつかなくなる。
	   二列なら小さいが、並んでいることが分かる。 */
	.oubo__in, .oubo__file { font-size: 16px; }  /* iOSで拡大されない大きさ */
}

/* -------------------------------------------------------------
   窓（写真展のとき）

   共通の窓は「写真＋長い話」の記憶カードのために組んである。
   紙色の地に大きな余白、というのは、読ませる中身があるからこそ効く。
   写真一枚だけを出すのに同じ造りを当てると、白い台紙が主役になって
   写真が小さく見える。ここでは中身が写真しかないので、器を消す。

   地は白（2026年9月12日、本人の指定）。写真展の見せ方に寄せて、
   道具は写真の外へ出し、白い場の四隅に置く。
   写真そのものに重ねないので、一枚を端まで見られる。
   ------------------------------------------------------------- */

.k20-gallery .mado {
	/* 画面いっぱいを白い場にして、その中に写真を一枚だけ置く。 */
	width: 100vw;
	max-width: 100vw;
	height: 100svh;
	max-height: 100svh;
	margin: 0;
	inset: 0;
	padding: 0;
	background: var(--kami);
	box-shadow: none;
	border-radius: 0;
	overflow: hidden;
}
/* display は「開いているとき」だけに書く。
   .mado に直に display:grid と書いたら、閉じているあいだも
   画面いっぱいの白い板が居座った（2026年9月12日、本人の指摘）。
   <dialog> が閉じているときに消えるのは、ブラウザ既定の
   dialog:not([open]) { display: none } のおかげで、
   こちらが display を書くと、それを打ち消してしまう。 */
.k20-gallery .mado[open] {
	display: grid;
	place-items: center;
}
.k20-gallery .mado::backdrop { background: rgba(255, 255, 255, .96); }

/* 中身は div なので display を書いても害はない（閉じているときは
   親の dialog ごと消える）。 */
.k20-gallery .mado__naka {
	max-height: none;
	padding: 0;
	border-radius: 0;
	overflow: visible;
	display: grid;
	place-items: center;
}
/* 写真だけなので、下に続きがある合図は要らない。 */
.k20-gallery .mado--nagai::after { content: none; }

.k20-gallery .mado .kiji { display: block; padding: 0; border: 0; }
.k20-gallery .mado .kiji__pic { position: static; margin: 0; }
/* チェキの白枠を外す。共通の .pic__body は紙の色で塗ってあり、
   写真より横に広がると白い板が残る（2026年9月12日、実測）。 */
.k20-gallery .mado .kiji__pic .pic,
.k20-gallery .mado .kiji__pic .pic__body {
	display: block;
	padding: 0;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
}
.k20-gallery .mado .pic__img {
	display: block;
	width: auto;
	height: auto;
	/* 上下は道具のぶん、左右は送り釦のぶんを空ける。 */
	max-width: min(1180px, calc(100vw - 176px));
	max-height: calc(100svh - 172px);
	margin-inline: auto;
	object-fit: contain;
	box-shadow: 0 24px 60px -40px rgba(var(--sumi-rgb), .45);
}
/* 年号。白い地なので墨で、写真の下に小さく。 */
.k20-gallery .mado .kiji__na {
	margin: 18px 0 0;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .16em;
	text-align: center;
	color: var(--ji-3);
}

/* 道具は白い場の四隅に留める。写真の大きさに関わらず動かない。 */
.k20-gallery .mado__tojiru {
	position: fixed;
	top: clamp(14px, 2.4vh, 26px);
	right: clamp(14px, 2.4vw, 30px);
	background: transparent;
	color: var(--ji-2);
	border: 1px solid var(--keisen);
	transition: color .3s ease, border-color .3s ease;
}
.k20-gallery .mado__tojiru:hover { color: var(--ji); border-color: var(--ji); }

/* 送り。左右の端に、輪郭だけの丸。 */
.k20-gallery .mado__okuri {
	position: fixed;
	top: 50%;
	translate: 0 -50%;
	width: clamp(40px, 4vw, 52px);
	height: clamp(40px, 4vw, 52px);
	padding: 0;
	border: 1px solid var(--keisen);
	border-radius: 999px;
	background: transparent;
	cursor: pointer;
	transition: border-color .3s ease, background .3s ease;
}
.k20-gallery .mado__okuri:hover { border-color: var(--ji); background: rgba(var(--sumi-rgb), .04); }
.k20-gallery .mado__okuri--mae  { left: clamp(10px, 2vw, 26px); }
.k20-gallery .mado__okuri--tsugi { right: clamp(10px, 2vw, 26px); }
/* 矢の穂。傾けた二本の線で描く。 */
.k20-gallery .mado__okuri::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	border-top: 1px solid var(--ji-2);
	border-right: 1px solid var(--ji-2);
}
.k20-gallery .mado__okuri--tsugi::before { translate: -65% -50%; rotate: 45deg; }
.k20-gallery .mado__okuri--mae::before   { translate: -35% -50%; rotate: -135deg; }
.k20-gallery .mado__okuri:hover::before { border-color: var(--ji); }

/* 何枚目か。下の中央に。 */
.k20-gallery .mado__kazu {
	position: fixed;
	left: 50%;
	bottom: clamp(14px, 2.6vh, 28px);
	translate: -50% 0;
	margin: 0;
	font-family: var(--wa);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .18em;
	color: var(--ji-3);
}
/* 一枚しか無いときは、送りも枚数も出さない。 */
.k20-gallery .mado--hitotsu .mado__okuri,
.k20-gallery .mado--hitotsu .mado__kazu { display: none; }

.k20-gallery .mado__naka:focus-visible { outline: none; }

@media (max-width: 860px) {
	/* 狭い画面では写真が幅いっぱいになるので、左右に置いた送り釦が
	   写真の上に乗ってしまう（2026年9月12日、390px で実測。
	   写真 x16〜374 に対して釦が x8〜46）。写真を隠さないよう、
	   釦は下へ下ろして枚数の左右に並べる。
	   ここでは指で払って繰るのが主なので、釦は控えでよい。 */
	.k20-gallery .mado .pic__img {
		max-width: calc(100vw - 32px);
		max-height: calc(100svh - 190px);
	}
	.k20-gallery .mado__okuri {
		top: auto;
		bottom: clamp(10px, 2vh, 18px);
		translate: 0;
		width: 38px;
		height: 38px;
	}
	.k20-gallery .mado__okuri--mae   { left: calc(50% - 84px); right: auto; }
	.k20-gallery .mado__okuri--tsugi { left: calc(50% + 46px); right: auto; }
	.k20-gallery .mado__kazu { bottom: calc(clamp(10px, 2vh, 18px) + 11px); }
	.k20-gallery .mado__tojiru { top: 12px; right: 12px; }
}

/* -------------------------------------------------------------
   続きを出す釦

   一覧の途中で止めてあるとき、その下に置く。
   集まるほど頁が伸びて重くなるので、押されたぶんだけ出す
   （2026年9月14日、本人の指定。英語の頁は6枚から）。
   ------------------------------------------------------------- */
.gal__motto-ba {
	margin: clamp(28px, 4vh, 44px) 0 0;
	text-align: center;
}
/* 残り枚数。釦の名札の右に、数字だけ小さく添える。 */
.gal__nokori {
	margin-left: .7em;
	font-size: 11.5px;
	letter-spacing: .06em;
	color: var(--ji-3);
}