@charset "utf-8";

/* =============================================================
   スタッフの20年アルバム

   記念サイトの他の頁は、写真をきれいに置いて読ませる作りにしてある。
   ここだけは逆で、机の上に写真を放り出したような置き方にする。
   傾き・重なり・手書きの字が、そのための道具。

   チェキの白ふちは、この頁が本来の居場所。
   実物の instax は下のふちだけが広く、そこに字を書くようにできている。
   だから一言は、絵の下ではなく、下ふちの「上」に置く。
   ============================================================= */

/* 地は真っ白をやめて、生成りにする。
   白い紙（チェキ）を白い地に置くと、ふちが消えて写真が宙に浮く
   （2026年9月9日、本人の指摘）。
   コルクの板も試したが、サイトの調子から外れた。
   紙のうえに紙を置いた、くらいの差にとどめる。 */
.alb {
	background: #F4EFE7;
	padding-bottom: clamp(96px, 15vh, 176px);
}

.alb__kari {
	margin-top: 0;
	text-align: center;
	font-size: 11.5px;
	letter-spacing: .08em;
	color: var(--ji-3);
	margin-bottom: clamp(48px, 8vh, 88px);
}

/* -------------------------------------------------------------
   写真の並び

   段組みで縦に流す。格子に並べると整いすぎるので、丈のそろわない
   段に落として、上端をわざとずらす。
   紙の大きさと傾きは一枚ずつ手で決めてある（下の :nth-child）。
   乱数にしないのは、二度目に開いたときに別の頁になってしまうから。
   ------------------------------------------------------------- */
.alb__list {
	columns: 3;
	column-gap: clamp(20px, 3vw, 44px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.alb__item {
	break-inside: avoid;
	width: calc(100% * var(--w, 1));
	/* 上に置く隙間を一枚ずつ変える。全部が段の頭でそろうと、
	   傾けても三本の列に見えてしまう。 */
	margin-top: var(--mt, 0);
	margin-bottom: clamp(30px, 4.6vw, 62px);
	rotate: var(--r, 0deg);
}
/* 小さい紙は、段の中で左右どちらかへ寄せる。
   全部が左端にそろうと、傾けても列に見える。 */
.alb__item:nth-child(even) { margin-left: auto; }

/* 大きさ・傾き・上の隙間は、12枚ひと巡りで回す。
   枚数が増えてもここに書き足す必要はない。 */
.alb__item:nth-child(12n+1 ) { --w: 0.96; --r: -2.4deg; --mt: 0px; }
.alb__item:nth-child(12n+2 ) { --w: 0.84; --r: 1.8deg; --mt: 52px; }
.alb__item:nth-child(12n+3 ) { --w: 1.00; --r: 2.6deg; --mt: 14px; }
.alb__item:nth-child(12n+4 ) { --w: 0.88; --r: -1.4deg; --mt: 70px; }
.alb__item:nth-child(12n+5 ) { --w: 0.92; --r: 1.2deg; --mt: 30px; }
.alb__item:nth-child(12n+6 ) { --w: 1.00; --r: -2.8deg; --mt: 6px; }
.alb__item:nth-child(12n+7 ) { --w: 0.82; --r: 2.2deg; --mt: 58px; }
.alb__item:nth-child(12n+8 ) { --w: 0.94; --r: -1.0deg; --mt: 20px; }
.alb__item:nth-child(12n+9 ) { --w: 1.00; --r: 1.6deg; --mt: 44px; }
.alb__item:nth-child(12n+10) { --w: 0.86; --r: -2.1deg; --mt: 10px; }
.alb__item:nth-child(12n+11) { --w: 0.90; --r: 2.4deg; --mt: 62px; }
.alb__item:nth-child(12n)    { --w: 0.96; --r: -1.6deg; --mt: 26px; }




/* 印画紙。左右と上は細く、下だけ広い。実物の instax の比率に寄せてある。
   一言は下ふちの中に置くが、絶対配置で貼ると文字数によって
   写真の上へせり上がる。ふちの広さは余白で作って、文が伸びても
   ふちのほうが伸びるようにしておく。 */
.cheki {
	position: relative;
	background: #FFFDFA;
	padding: 5% 5% 7%;
	border-radius: 0;   /* 角は立てる。theme.css の .pic__body と揃える */
	box-shadow:
		0 1px 0 rgba(var(--sumi-rgb), .05),
		0 20px 38px -26px rgba(var(--sumi-rgb), .42);
	transition: rotate .6s cubic-bezier(.22, .61, .36, 1),
	            translate .6s cubic-bezier(.22, .61, .36, 1);
}
.alb__item:hover .cheki { rotate: 0deg; translate: 0 -6px; }

/* 白いふちは .cheki が持つので、写真そのものには付けない。
   これを外すと、theme.css の .pic__body が持つチェキのふち（下だけ広い）が
   そのまま出て、枠が二重になる（2026年9月9日、本人の指摘）。 */
.cheki__pic .pic__body {
	padding: 0;
	border-radius: 0;
	overflow: hidden;
	box-shadow: none;
}

/* 手書きの一言。少し傾けて置く。
   min-height は「一行でも二行でも、ふちの広さが揃って見える」ための下駄。 */
.cheki__memo {
	margin: 8% 2% 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-height: 3.4em;
	font-family: var(--te);
	color: #3A3038;
	rotate: -.8deg;
}
.cheki__txt {
	font-size: clamp(13px, 1.2vw, 16px);
	line-height: 1.6;
	letter-spacing: .01em;
	/* 手で書いた字なので、語の途中では折らない。
	   auto-phrase は文節で折る指定（対応していない環境では素の折り返しに戻る）。 */
	word-break: auto-phrase;
	text-wrap: pretty;
}
.cheki__toshi {
	font-size: clamp(10px, .85vw, 12px);
	letter-spacing: .06em;
	color: #7F7480;
}

.alb__more { margin-top: clamp(56px, 9vh, 104px); text-align: center; }

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

@media (max-width: 1000px) { .alb__list { columns: 2; } }

@media (max-width: 560px) {
	.alb__list { columns: 1; column-gap: 0; }
	/* 一段になると、幅を変えるより傾きだけで崩したほうが落ち着く。 */
	.alb__item { width: 100%; margin-left: 0; margin-top: 0; }
	.alb__item:nth-child(odd)  { rotate: -1.1deg; }
	.alb__item:nth-child(even) { rotate:  0.9deg; }
	.cheki__txt { font-size: 15px; }
	.cheki__toshi { font-size: 12px; }
}