@charset "utf-8";

/* =============================================================
   京都ココログループ 20周年記念サイト — 共通のスタイル

   ■ 見立て
   企画の芯は「一枚一枚が集まって、一つの作品になる」（企画④フォトモザイクアート）。
   その考えをサイトの骨格そのものに使う。地に写真の升目を敷き、
   企画は「はがき」として置く。ロゴの円と紫が全体の通奏低音。

   ■ 色の考え方
   20年でプランが増え続けた。舞妓、花魁、太夫、狐の嫁入り、百鬼夜行、
   新選組、着物、メイクオーバー、ナチュラル、ロリィタ、サイバーパンク、
   ピンクリボン、セレモニー、リトルスター、ジェンツ……。
   世界観の数だけ色がある、というのがこの配色の理由。賑やかにしたいから
   七色なのではない。色を減らすときは「体験の幅が狭く見えないか」を先に考える。

   ■ 決まりごと
   ・色はすべてここの変数を使う。スタイルの中に #色 や rgba() を直接書かない。
   ・地は「純白」と「べた塗りの原色」の二枚だけ。中間色を置かない。
     姉妹三店（嵐山 #F4EFE4、エレア #F4F1EA、花雫 #FBF6FA）はどれもクリーム地。
     そこへ寄せると必ず親戚に見えるので、こちらは白と原色でいく。
   ・読ませる節は白。短い言葉の節はべた塗り。
   ・べた塗りの上には、白いカードか墨の文字しか置かない。
     中間の濃さの文字は原色の上では読めない（実測で2.9:1まで落ちる）。
   ・節の標題は「大きな欧字」＋「縦書きの和文」。
     中央揃えの見出しを積むだけの組み方はしない。
   ・純黒は使わない。
   ============================================================= */

:root {
	/* 原色。七色とも、墨を乗せて 5:1 以上出る濃さに揃えてある */
	--sango:    #FF3D68;   /* 珊瑚  墨 5.2:1 */
	--botan:    #FF4FA8;   /* 牡丹  5.8:1 */
	--daidai:   #FF7A1A;   /* 橙    6.8:1 */
	--yamabuki: #FFC300;   /* 山吹 11.0:1 */
	--wakakusa: #7ED321;   /* 若草  9.5:1 */
	--midori:   #00BFB2;   /* 碧    7.7:1 */
	--sora:     #2BA6FF;   /* 空    6.7:1 */

	/* 白の上で使える濃いほう（小さい文字とリンク用） */
	--sango-koi:    #D6003C;
	--botan-koi:    #C2007A;
	--daidai-koi:   #C24E00;
	--yamabuki-koi: #8A6A00;
	--wakakusa-koi: #3F7A00;
	--midori-koi:   #00706F;
	--sora-koi:     #0B62B8;

	/* 白を乗せる地（下層ページの頭）。
	   上の「濃いほう」は白地に置く字の色なので、地に敷くと
	   白字が 4.4:1 ほどしか出なかった（2026年9月10日、実測）。
	   色相はそのまま、明度だけ落として白 7:1 に揃えてある。
	   黄と緑をここへ入れないのは、明度を落とすと濁るから。 */
	--sango-fuka:  #B40032;   /* 白 7.0:1 */
	--botan-fuka:  #AD006D;   /* 白 7.0:1 */
	--daidai-fuka: #973D00;   /* 白 7.0:1 */
	--midori-fuka: #006362;   /* 白 7.1:1 */
	--sora-fuka:   #0758A9;   /* 白 7.1:1 */

	/* 年ごとの色。その年に開いた店の色に合わせてある
	   （2026年9月9日、本人の指定）。虹の順ではなく、店の順。
	   どの色も白地とのコントラストを 4.7:1 に揃えてあるので、
	   大きな数字でも、その下の小さい日付（12px）でも同じ強さで立つ。
	   どれを使うかは inc/config.php の各年の 'iro' が決める。 */
	--toshi-kurenai:  #E60041;   /* 紅  4.73:1  はじまりの嵐山 */
	--toshi-murasaki: #B721EE;   /* 紫  4.70:1  祇園 心-花雫- */
	--toshi-daidai:   #CD4400;   /* 橙  4.75:1  移転した嵐山 STUDIO心 */
	--toshi-kogane:   #9D6900;   /* 金  4.71:1  エスペラント（岡崎・京都） */
	--toshi-momo:     #DA0099;   /* 桃  4.73:1  南青山 */
	--toshi-aka:      #E8000F;   /* 赤  4.73:1  STUDIO KOKORO ARASHIYAMA */
	--toshi-midori:   #00817F;   /* 碧  4.72:1  20周年。店ではないので一つだけ寒色 */

	/* 面に敷くグラデーション。べた一色より華やぐ。
	   どの位置でも墨が 5:1 を切らない色だけを繋いでいる。 */
	--niji-1: linear-gradient(118deg, var(--sango) 0%, var(--botan) 46%, var(--daidai) 100%);
	--niji-2: linear-gradient(118deg, var(--yamabuki) 0%, var(--wakakusa) 100%);
	--niji-3: linear-gradient(118deg, var(--midori) 0%, var(--sora) 100%);
	--niji-4: linear-gradient(118deg, var(--daidai) 0%, var(--yamabuki) 100%);

	/* 見せ場だけの濃い面。白い文字を乗せるための明るさに落としてある。
	   明るい七色のままだと白は 2.6〜3.4:1 しか出ず読めない（実測）。
	   濃いほうの七色なら 4.8〜5.9:1 で成立する。 */
	--niji-koi-1: linear-gradient(118deg,
		var(--sango-koi) 0%, var(--botan-koi) 46%, var(--daidai-koi) 100%);
	/* 濃いほうの虹。番号は明るいほうと揃えてある（1が見せ場、4が締め）。
	   白文字を 4.5:1 で載せられる濃さだけを使う。 */
	/* 濃くするときは、明るい色の明度だけを落とさない。
	   山吹と若草をそのまま暗くすると、枯草色と苔色になって
	   華やかさが消えた（2026年9月9日、本人の指摘）。
	   濃くても彩度の残る色（青緑・青・橙・珊瑚）へ寄せる。 */
	--niji-koi-2: linear-gradient(118deg,
		var(--midori-koi) 0%, var(--sora-koi) 100%);
	--niji-koi-4: linear-gradient(118deg,
		var(--daidai-koi) 0%, var(--sango-koi) 100%);

	/* 地 ── 白とべた塗り。中間色は持たない */
	--kami:      #FFFFFF;
	--kami-2:    #FFFFFF;
	--kami-rgb:  255, 255, 255;
	--no:        var(--sango);
	--no-2:      var(--sango);
	--no-3:      #FFFFFF;
	--no-rgb:    255, 61, 104;

	/* 墨。影や網掛けの素になる色 */
	--sumi-rgb:  26, 23, 32;

	/* いちばん濃い墨。原色のべた塗りの上でだけ使う。
	   白の上でこれを使うと 17.7:1 になって、黒が強すぎる（2026年9月3日、本人の指摘）。 */
	--sumi-koi:  #1A1720;

	/* 大きな和文のための墨。
	   原色の上では濃さを落とせない（珊瑚の上だと、少し明るくしただけで
	   4.5:1 を割る）。落とせるのは濃さではなく「黒み」のほう。
	   地の色をひとさじ混ぜた濃い色にすると、同じ濃さのまま
	   黒が抜けて、面になじむ（2026年9月9日、本人の指摘）。
	   面ごとに下で差し替える。既定は無彩の墨。 */
	--moji-oo:   var(--sumi-koi);

	/* 文字 ── 白の上。ここは少し灰を含ませる。
	   紙の上で 11:1 前後が、読みやすさと当たりのやわらかさの折り合い。 */
	--ji:        #3B3641;   /* 白に対して 11.7:1 */
	--ji-2:      #57515F;   /* 7.6:1 */
	--ji-3:      #67606F;   /* 6.0:1。これ以上薄くしない */

	/* 旧い名前。べた塗りの節では下でまとめて墨に差し替える */
	--han:       var(--ji);
	--han-2:     var(--ji-2);
	--han-3:     var(--ji-3);

	/* 差し色。既定は珊瑚。節ごと・企画ごとに七色から差し替える。
	   --nuri は塗り（バッジやボタンの地）に使う明るいほう。 */
	--ai:       var(--sango-koi);
	--ai-fuka:  #A30030;
	--ai-akari: var(--sango-koi);
	--ai-rgb:   214, 0, 60;
	--ai-ima:   var(--sango-koi);
	--nuri:     var(--sango);

	/* 罫線 */
	--keisen:      rgba(var(--sumi-rgb), .18);
	--keisen-usu:  rgba(var(--sumi-rgb), .10);
	--keisen-han:  rgba(var(--sumi-rgb), .28);

	/* 寸法 */
	--topH:   72px;
	--haba:   min(1180px, calc(100vw - 12vw));
	--haba-s: min(720px,  calc(100vw - 12vw));
	--yohaku: clamp(88px, 14vh, 168px);
	--masu:   clamp(76px, 8.6vw, 128px);  /* 升目（モザイクの一枚）。写真が入る枠なので大きめに取る */

	/* 書体 ── 参考は 50th.runners.co.jp（本人の指示、2026年9月9日）。
	   和文は角ゴシック（ヒラギノ／IBM Plex Sans JP）。
	   欧字は Berkshire Swash（鼻セレブ20周年サイト）。大きいところだけに使う。
	   姉妹三店が使う12書体（Shippori Mincho／Cormorant／Marcellus／
	   Playfair／Jost／Newsreader／Noto／Zen Old Mincho／
	   Zen Kaku Gothic New／Hanken Grotesk／Space Mono ほか）とは
	   一つも重ねていない。明朝もセリフも使わない。 */
	--wa:  "Hiragino Kaku Gothic ProN", "Hiragino Sans", "IBM Plex Sans JP",
	       "Yu Gothic Medium", "Meiryo", sans-serif;
	/* 欧字は飾り。大きく出るところだけに使う（年号・節の頭・下層の標題）。
	   小さな欧字は --wa で組む。太さは400しか無いので、必ず400で組む。 */
	--ei:  "Berkshire Swash", "Hiragino Kaku Gothic ProN", cursive;
	--go:  var(--wa);
	/* 手書き。スタッフアルバムのチェキの一言だけに使う。
	   その頁でしか読み込まないので、他の頁では素の丸ゴシックに落ちる。 */
	--te:  "Yomogi", "Klee One", var(--wa);
}


/* -------------------------------------------------------------
   土台
   ------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	/* 上辺の帯は貼り付いているので、見出しへ飛んだときに帯の下へ潜る。
	   飛び先には帯のぶんだけ余裕を持たせる。個別に書くと必ず書き忘れる。 */
	scroll-padding-top: calc(var(--topH) + 24px);
}

body {
	margin: 0;
	background: var(--kami);
	color: var(--ji);
	font-family: var(--wa);
	font-size: 16px;
	font-weight: 400;
	line-height: 2.05;
	letter-spacing: .04em;
	font-feature-settings: "palt" 1;
	overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; vertical-align: middle; }

a { color: inherit; text-decoration: none; }
a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--ai);
	outline-offset: 3px;
}
.field a:focus-visible,
.field button:focus-visible { outline-color: var(--ai-akari); }

p { margin: 0 0 1.6em; }
p:last-child { margin-bottom: 0; }

/* 見出しは行の長さをそろえる。word-break:auto-phrase は日本語を文節で折る
   （対応していないブラウザは今までどおりの折り返しになるだけ）。 */
h1, h2, h3 {
	text-wrap: balance;
	word-break: auto-phrase;
	font-weight: 700;
	letter-spacing: .04em;
}
.hd__lead, .hyodai__lead, .dai__catch, .dai__text, .fuda__catch,
.thanks__text, .era__lead, .st__catch, .st__text {
	word-break: auto-phrase;
}

ul, ol { margin: 0; padding: 0; list-style: none; }

.honbun ul, .honbun ol { margin: 0 0 1.6em; padding-left: 1.4em; }
.honbun ul { list-style: disc; }
.honbun ol { list-style: decimal; }

/* 飛び先の印。丈も幅も持たないので、どこにも影響しない。 */
.mejirushi { position: absolute; top: 0; left: 0; width: 0; height: 0; }

.skip { position: absolute; left: -9999px; }
.skip:focus {
	left: 16px; top: 16px; z-index: 100;
	padding: 10px 16px;
	background: var(--kami-2);
	border: 1px solid var(--ji);
}

/* 見せ場の和文に立てる数字（k20_kotoba の 《》）。
   大きな和文をそのまま置くと「文字が置いてあるだけ」に見える。
   数字は元から字面が強いので、そこだけ飾りの書体で大きく立て、
   和文をその周りに組む。サイトが既に持っている
   「大きな数字＝飾り書体」の語彙を、和文の見せ場にも広げたもの。

   em で持たせるので、置かれた文の大きさに比例して伸び縮みする。
   縦の位置は、和文のふところの中心へ落として、行の背を乱さない。 */
.suji {
	font-family: var(--ei);
	font-weight: 400;
	font-size: 2.15em;
	line-height: 0;
	letter-spacing: .01em;
	vertical-align: -.1em;
	margin-inline: .04em .06em;
	color: inherit;
}

/* 埋め忘れの印。原稿が入ったら消える。 */
mark.todo {
	background: rgba(var(--ai-rgb), .12);
	color: var(--ai-fuka);
	border-bottom: 1px dashed var(--ai);
	padding: 0 .2em;
	font-size: .92em;
}

/* -------------------------------------------------------------
   二つの面
   .paper = 白。読ませる節。
   .field = べた塗り。短い言葉の節。地はページ側で虹に差し替える。
   ------------------------------------------------------------- */

.field, .paper {
	width: 100%;
	padding-inline: 6vw;
	padding-block: var(--yohaku);
	position: relative;
}
.paper {
	background: var(--kami);
	color: var(--ji);
}

/* べた塗りの面では、中間の濃さの文字を使わない。
   原色の上で 4.5:1 を出せるのは墨だけ（薄い墨は 2.9:1 まで落ちる）。 */
.field,
.hero,
.hd {
	background: var(--niji-1);
	/* 原色の上で 4.5:1 を出せるのはいちばん濃い墨だけ。
	   白の上でやわらげた --ji のままだと、珊瑚の上で 3.5:1 まで落ちる。 */
	--ji: var(--sumi-koi);
	color: var(--ji);
	--ji-2: var(--ji);
	--ji-3: var(--ji);
	--han:   var(--ji);
	--han-2: var(--ji);
	--han-3: var(--ji);
	--ai:    var(--ji);
	--ai-akari: var(--ji);
	--ai-rgb: 26, 23, 32;
	--keisen:     rgba(var(--sumi-rgb), .28);
	--keisen-usu: rgba(var(--sumi-rgb), .16);
	--keisen-han: rgba(var(--sumi-rgb), .28);
}

/* （頭の --moji-oo はここにあったが、頭を深い地に組み直したときに外した。
   墨の指定が残っていると、あとから頭に何か足したときに黒い字が出る。） */
/* 濃い面に白文字を置くときの決まり。見せ場と締めが使う。
   釦は枠が白抜きになるので、なぞったときの塗りも白にして、
   そのとき文字だけ濃い墨へ返す（白地に白文字にならないように）。 */
.koi-men {
	color: #FFFFFF;
	--ji: #FFFFFF;
	--ji-2: rgba(255, 255, 255, .86);
	--ji-3: rgba(255, 255, 255, .74);
	--han:   #FFFFFF;
	--han-2: rgba(255, 255, 255, .86);
	--han-3: rgba(255, 255, 255, .74);
	--ai: #FFFFFF;
	--ai-akari: #FFFFFF;
	--moji-oo: #FFFFFF;
	--nuri: #FFFFFF;
	--keisen:     rgba(255, 255, 255, .38);
	--keisen-usu: rgba(255, 255, 255, .22);
	--keisen-han: rgba(255, 255, 255, .38);
}
.koi-men .btn:hover { color: var(--sumi-koi); }

/* 濃い面の升目の壁は、乗算で重ねる。
   ふつうに重ねると写真の明るいところが地を持ち上げてしまい、
   白文字が 2.5:1 まで落ちた（2026年9月9日、描画した画素で計測）。
   乗算なら、どこも地の色より明るくならないので、
   いちばん薄いところでも 4.8:1 が残る。 */
.koi-men .kabe { mix-blend-mode: multiply; }
/* ただし見せ場の壁だけは外す。
   乗算は「うしろにあるものと混ぜる」指定だが、見せ場の壁を包む
   .hero__stick には isolation:isolate が掛かっていて、壁は
   その中のいちばん奥（z-index:-1）にいる。混ぜる相手がいない。
   実際、外して描き比べても差の出た画素は0だった（2026年9月12日、
   見せ場の 0.00／0.22／0.40／0.50／0.62／0.80／0.95 の七点で実測。
   画像を全部読み終えてから撮れば、最大差は 0/255。
   読み終える前に撮ると輪の写真が一枚間に合わず、そこを差と
   数えてしまう。乗算のせいだと二度読み違えかけた）。
   見た目は変わらないのに、升目240枚を毎フレーム動かすあいだ
   ずっと合成のやり直しを要求していたので、外す。 */
.hero .kabe { mix-blend-mode: normal; }


/* 見せ場だけは地を濃くして、文字を白で抜く（2026年9月9日、本人の指示）。
   一枚の絵として見せる場所なので、他の面と扱いが違ってよい。
   ここだけ白なのは不統一ではなく、見せ場と読み物を分ける合図。
   明るい七色のままでは白が 2.6〜3.4:1 しか出ないので、地を濃いほうへ落としてある。
   白抜きの色づかいそのものは .koi-men が持つ（締めと共通）。 */
.hero { background: var(--niji-koi-1); }


.field > .naka, .paper > .naka {
	width: min(1180px, 100%);
	margin-inline: auto;
	position: relative;
}
.naka--semai { width: min(720px, 100%); }

/* -------------------------------------------------------------
   節の標題
   縁取りだけの大きな欧字を敷き、その手前に縦書きの和文を立てる。
   ------------------------------------------------------------- */

.hyodai {
	position: relative;
	display: flex;
	align-items: flex-end;
	gap: clamp(20px, 3vw, 44px);
	margin-bottom: clamp(48px, 8vh, 96px);
}

/* 縁取りの欧字 */
.hyodai__en {
	font-family: var(--ei);
	font-size: clamp(56px, 12vw, 148px);
	line-height: .82;
	letter-spacing: .01em;
	color: rgba(255, 255, 255, .58);
	font-weight: 400;
	letter-spacing: .01em;
	margin: 0;
	white-space: nowrap;
}
/* 白い節では、虹で塗る。飾り（aria-hidden）なので濃くしてよい。 */
.paper .hyodai__en {
	background: var(--niji-1);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	opacity: .38;
}

/* 縦書きの和文 */
.tate {
	writing-mode: vertical-rl;
	font-size: clamp(15px, 1.8vw, 19px);
	letter-spacing: .28em;
	line-height: 1;
	margin: 0;
	white-space: nowrap;
}
.hyodai__ja {
	writing-mode: vertical-rl;
	font-size: clamp(17px, 2vw, 22px);
	font-weight: 500;
	letter-spacing: .3em;
	line-height: 1;
	margin: 0 0 6px;
	white-space: nowrap;
}
/* 縦書きの頭に置く小さな印 */
.hyodai__ja::before {
	content: "";
	display: block;
	width: 7px; height: 7px;
	background: var(--ai);
	transform: rotate(45deg);
	margin: 0 auto 18px;
}
.field .hyodai__ja::before { background: var(--ai-akari); }

.hyodai__lead {
	max-width: 34em;
	margin: 0 0 4px;
	font-size: 15px;
	line-height: 2.2;
	color: var(--ji-2);
	text-wrap: pretty;
}
.field .hyodai__lead { color: var(--han-2); }

/* -------------------------------------------------------------
   升目（モザイクの一枚）
   写真が入るまでは紙の升目のまま。届いたら同じ枠に写真が入る。
   ------------------------------------------------------------- */

.masu {
	aspect-ratio: 1;
	background: var(--kami-2);
	border-radius: 6px;
	overflow: hidden;
	position: relative;
}
.masu img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 升目の壁。地に敷く。枚数は器の大きさより多めに出して、端を切り落とす。
   七色を割り切れない周期で混ぜ、同じ並びが繰り返して見えないようにしている。 */
.kabe {
	position: absolute;
	inset: -1px;
	z-index: -1;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--masu), 1fr));
	grid-auto-rows: var(--masu);
	align-content: center;
	pointer-events: none;
	overflow: hidden;
}
.kabe .masu                 { background: rgba(255, 255, 255, .28); border: 0; }
.kabe .masu:nth-child(7n+1) { background: var(--yamabuki); }
.kabe .masu:nth-child(7n+2) { background: var(--midori); }
.kabe .masu:nth-child(7n+3) { background: #FFFFFF; }
.kabe .masu:nth-child(7n+4) { background: var(--daidai); }
.kabe .masu:nth-child(7n+5) { background: var(--sora); }
.kabe .masu:nth-child(7n+6) { background: var(--botan); }
.kabe .masu:nth-child(5n)   { background: var(--wakakusa); }
.kabe .masu:nth-child(11n)  { background: var(--sango); }
.kabe .masu:nth-child(13n)  { background: rgba(255, 255, 255, .60); }

/* -------------------------------------------------------------
   写真の枠（印画紙の見立て。白いふちを残して置く）
   ------------------------------------------------------------- */

.pic { margin: 0; }
/* チェキの見立て。角は丸めない。
   実物の instax はほんのわずかに丸いだけで、画面で 5px も丸めると
   「写真」ではなく「部品」の顔になった（2026年9月9日、本人の指摘）。
   角を立てておくほうが、紙の一枚に見える。 */
.pic__body {
	display: block;
	border-radius: 0;
	background: var(--kami-2);
	/* 実物の instax は、左右と上が同じ細さで、下だけが4倍ほど広い
	   （mini なら 横4mm・上4mm・下20mm ＝ 幅の 7% と 37%）。
	   ここを px で持つと、小さい枠ほど縁が太って見える。
	   枠の幅に対する割合で持たせて、大小どの枠でも同じ顔にする。 */
	padding: 5%;
	padding-bottom: 20%;
	box-shadow: 0 1px 0 rgba(var(--sumi-rgb), .06), 0 18px 40px -28px rgba(var(--sumi-rgb), .28);
}
.pic__img { width: 100%; object-fit: cover; display: block; }
.pic__wait {
	width: 100%;
	display: grid;
	place-items: center;
	background:
		repeating-linear-gradient(-45deg,
			transparent 0 10px,
			rgba(var(--sumi-rgb), .05) 10px 11px),
		rgba(var(--sumi-rgb), .045);
}
.pic__wait span {
	font-family: var(--wa);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .14em;
	color: var(--ji-2);
}
/* 出来事の一行に添える案内。
   釦にはしない。年表の粒のひとつなので、文のうしろに小さく続ける。
   下線は最初から引いておく（なぞって初めて出る作りだと、
   リンクだと気づかれないまま通り過ぎる）。 */
.ev__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-left: .7em;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .06em;
	color: var(--nen, var(--ai));
	border-bottom: 1px solid currentColor;
	line-height: 1.6;
	white-space: nowrap;
	transition: opacity .3s ease;
}
.ev__link:hover { opacity: .66; }
.ev__ya {
	width: 15px;
	height: 1px;
	background: currentColor;
	position: relative;
	flex: none;
}
.ev__ya::after {
	content: "";
	position: absolute;
	right: 0; top: -2px;
	width: 4px; height: 4px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: rotate(45deg);
}

.pic__cap {
	margin-top: 12px;
	font-size: 12px;
	line-height: 1.9;
	color: var(--ji-3);
}
.field .pic__cap { color: var(--han-3); }

/* -------------------------------------------------------------
   はがき
   企画はこの器に載せる。左肩に番号の切手、右肩に時制の消印。
   ------------------------------------------------------------- */

/* はがきは白。べた塗りの面に置くと、それだけで強い。
   中の文字は白地の値に戻す。 */
.fuda {
	background: #FFFFFF;
	border: 0;
	border-radius: 22px;
	box-shadow: 0 18px 40px -28px rgba(var(--sumi-rgb), .45);
	position: relative;
	color: var(--ji);
	--ji-2: #4B4552;
	--ji-3: #5E5768;
	--keisen:     rgba(var(--sumi-rgb), .16);
	--keisen-usu: rgba(var(--sumi-rgb), .10);
}

/* 切手 */
.kitte {
	width: clamp(46px, 5vw, 62px);
	aspect-ratio: 3 / 4;
	display: grid;
	place-items: center;
	background: var(--nuri);
	color: var(--ji);
	font-family: var(--ei);
	font-size: clamp(17px, 2vw, 22px);
	font-weight: 400;
	letter-spacing: .01em;
	border: 0;
	border-radius: 12px;
}

/* 消印 */
.keshiin {
	position: relative;
	width: clamp(72px, 8vw, 96px);
	aspect-ratio: 1;
	border-radius: 50%;
	border: 0;
	background: var(--nuri);
	color: var(--ji);
	font-weight: 700;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 2px;
	transform: rotate(-7deg);
}
.keshiin__ja {
	font-size: clamp(12px, 1.3vw, 15px);
	letter-spacing: .1em;
	line-height: 1.2;
}
.keshiin__en {
	font-family: var(--wa);
	font-weight: 600;
	font-size: 8px;
	letter-spacing: .14em;
}

/* 小さいはがき（トップの四枚）は、切手と消印を角に置く。
   大きいはがき（/special/）は .dai__marks の一行に流し込むので、
   ここは .fuda の直下にあるものだけを対象にする。 */
.fuda > .kitte {
	position: absolute;
	top: clamp(18px, 2vw, 26px);
	left: clamp(18px, 2vw, 26px);
}
.fuda > .keshiin {
	position: absolute;
	top: clamp(14px, 1.6vw, 22px);
	right: clamp(18px, 2vw, 28px);
}

/* -------------------------------------------------------------
   罫と飾り
   ------------------------------------------------------------- */

.kazari {
	display: flex;
	align-items: center;
	gap: 16px;
	color: var(--keisen);
}
.field .kazari { color: var(--keisen-han); }
.kazari::before,
.kazari::after { content: ""; flex: 1; height: 1px; background: currentColor; }
.kazari__hishi {
	width: 8px; height: 8px;
	background: var(--ai);
	transform: rotate(45deg);
	flex: none;
}
.field .kazari__hishi { background: var(--ai-akari); }

/* -------------------------------------------------------------
   ボタン
   ------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 16px 30px;
	border: 2px solid currentColor;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .14em;
	position: relative;
	transition: color .45s ease, border-color .45s ease;
}
/* なぞったときの塗り。
   以前は overflow:hidden で丸く切り、塗りを z-index:-1 で背面に置いていたが、
   丸みと切り抜きと重ね合わせが重なると、下辺の枠線が
   18%ほどしか描かれないことがある（実測。上辺は 2px 真っ黒、下辺は薄い灰）。
   切り抜きをやめて、塗り自身に同じ丸みを持たせる。
   重ね順は、塗りを 0、中の文字を 1 にして素直に解く。 */
.btn > * { position: relative; z-index: 1; }
.btn::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--nuri);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .45s cubic-bezier(.22, .61, .36, 1);
	z-index: 0;
}
.btn:hover { color: var(--ji); border-color: transparent; }
.btn:hover::before { transform: scaleX(1); }

/* 行き先が二つあるとき。狭い画面では素直に縦へ折る。
   どちらかを弱く見せる作りにはしない。並んでいる二つは同じ重さで、
   読み手がどちらを選んでもよい、という意味にしている。 */
.futatsu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(12px, 1.6vw, 20px);
	text-align: center;
}

.btn__ya { width: 22px; height: 1px; background: currentColor; flex: none; position: relative; }
.btn__ya::after {
	content: "";
	position: absolute;
	right: 0; top: -2px;
	width: 5px; height: 5px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: rotate(45deg);
}

/* 下線だけの弱いリンク */
/* 釦の脇に添える、控えめな行き先。
   2026年9月12日に店舗紹介ページの行を外して、いまは使い手がいない。
   組みの部品として残してあるので、また脇に一本足したくなったら使える。 */
.hoso {
	font-size: 13px;
	letter-spacing: .08em;
	border-bottom: 1px solid var(--keisen);
	padding-bottom: 4px;
	transition: color .3s, border-color .3s;
}
.hoso:hover { color: var(--ai); border-color: var(--ai); }
.field .hoso { border-color: var(--keisen-han); }
.field .hoso:hover { color: var(--ai-akari); border-color: var(--ai-akari); }

/* -------------------------------------------------------------
   上辺の帯
   .top には上下パディングを入れない（--topH を超えるとロゴがずれる）
   ------------------------------------------------------------- */

/* 上辺の帯。

   ■ 出方の考え方（2026年9月3日に組み直し）
   見せ場は「一枚 → 数枚 → 数えきれない → ロゴ」という筋書きで、
   最後にロゴが立つ。その頭にもう一度ロゴを出しておくと、
   オチを先に言っていることになる。しかも同じ画面に20thロゴが二つ並ぶ。
   だからトップでは、見せ場のあいだ帯は名乗らない。
   欧字四つだけを静かに置いて、見せ場を抜けたところでロゴと和文が入る。

   白い覆いも常設をやめた。あれは升目の壁（写真）の上で
   小さい文字が読めなくなるための処置なので、壁が立っているあいだだけ出す。
   それ以外のときは、原色のべた塗りの上にいちばん濃い墨を置けば足りる。

   下層ページには見せ場が無いので、はじめから名乗る（.is-dete がJSで即付く）。 */
.top {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 50;
	height: var(--topH);
	background: rgba(255, 255, 255, 0);
	border-bottom: 1px solid transparent;
	/* 透けているあいだは原色や写真の上に乗るので、やわらげた墨では届かない。 */
	color: var(--sumi-koi);
	--han:   var(--sumi-koi);
	--han-2: var(--sumi-koi);
	--han-3: var(--sumi-koi);
	--ai-akari: var(--sumi-koi);
	transition: background .5s ease, border-color .5s ease, color .5s ease;
}
/* 白く固まったら、地は白なのでやわらげた墨に戻す。 */
.top.is-solid {
	background: rgba(255, 255, 255, .94);
	border-bottom-color: rgba(var(--sumi-rgb), .12);
	backdrop-filter: blur(8px);
	color: var(--ji);
	--han:   var(--ji);
	--han-2: var(--ji-2);
	--han-3: var(--ji-3);
	--ai-akari: var(--ji);
}

/* 覆い。既定では出さない。 */
.top::before {
	content: "";
	position: absolute;
	inset: 0 0 -24px 0;
	z-index: -1;
	background: linear-gradient(to bottom,
		rgba(255, 255, 255, .86) 0%,
		rgba(255, 255, 255, .60) 55%,
		rgba(255, 255, 255, 0) 100%);
	opacity: 0;
	transition: opacity .5s ease;
	pointer-events: none;
}
/* 升目の壁が立ちはじめたら出す。--hero-p は見せ場の進み具合（JSが入れる）。
   毎フレーム変わる値なので、ここでは遷移を切る。 */
.k20-home .top::before {
	opacity: clamp(0, calc((var(--hero-p, 0) - .30) / .10), 1);
	transition: none;
}
.top.is-solid::before { opacity: 0; }

/* 下層ページの帯も、はじめは頭（深い地）の上にいる。
   ここを墨のままにすると、帯の字が地に沈んで 1.6:1 しか出ない
   （2026年9月10日、頭を深くしたときに実測）。白で抜く。
   40px 送れば .is-solid が付いて白地に戻るので、白で抜くのは
   頭の中にいるあいだだけ。JSが無いときは動かないので、そのときは
   墨のまま（下へ送っても白地の上にい続けるため）。 */
.js body:not(.k20-home) .top:not(.is-solid) {
	color: #FFFFFF;
	--han:   #FFFFFF;
	--han-2: rgba(255, 255, 255, .92);
	--han-3: rgba(255, 255, 255, .82);
	--ai-akari: #FFFFFF;
}

/* ロゴは二枚出してある。既定は黒、白で抜くときだけ白。 */
.top .logo--shiro { display: none; }
.js body:not(.k20-home) .top:not(.is-solid) .logo--kuro  { display: none; }
.js body:not(.k20-home) .top:not(.is-solid) .logo--shiro { display: block; }

/* 引き出しが開いているあいだの帯。
   引き出しは画面の上端から深い地で敷いてあり、帯はその上に浮いている。
   白く固まったままだと、深い地の上に白い板が一枚乗って見えるので、
   どの頁でも透かして、字を白に揃える。ロゴも白の版へ入れ替える。
   トップでは見せ場のあいだロゴを伏せてあるが、引き出しを開けた時点で
   見せ場は引き出しの下に隠れている。伏せる理由（同じ画面に20thの印が
   二つ並ぶ）が無くなるので、ここでは名乗らせる。 */
.drawer-aki .top,
.drawer-aki .top.is-solid {
	background: transparent;
	border-bottom-color: transparent;
	backdrop-filter: none;
	color: #FFFFFF;
	--han:   #FFFFFF;
	--han-2: rgba(255, 255, 255, .92);
	--han-3: rgba(255, 255, 255, .82);
	--ai-akari: #FFFFFF;
}
.drawer-aki .top::before { opacity: 0; }
.drawer-aki .top .logo--kuro  { display: none; }
.drawer-aki .top .logo--shiro { display: block; }
.drawer-aki .k20-home .top__logo {
	opacity: 1;
	visibility: visible;
	translate: none;
}

/* 見せ場のあいだ、帯は濃い地の上にいる。文字は白で抜く。 */
.k20-home .top:not(.is-dete) {
	color: #FFFFFF;
	--han:   #FFFFFF;
	--han-2: rgba(255, 255, 255, .86);
	--han-3: rgba(255, 255, 255, .74);
	--ai-akari: #FFFFFF;
}
/* 升目の壁の上に敷く覆いも、白から闇へ入れ替える。 */
.k20-home .top:not(.is-dete)::before {
	background: linear-gradient(to bottom,
		rgba(26, 6, 14, .70) 0%,
		rgba(26, 6, 14, .42) 55%,
		rgba(26, 6, 14, 0) 100%);
}

/* 見せ場のあいだは名乗らない。抜けたところで入る。 */
.k20-home .top__logo {
	opacity: 0;
	visibility: hidden;
	translate: 0 -8px;
	transition: opacity .7s ease, translate .7s cubic-bezier(.22, .61, .36, 1), visibility .7s;
}
.k20-home .top.is-dete .top__logo {
	opacity: 1;
	visibility: visible;
	translate: none;
}
/* 和文も伏せて、欧字だけにしておく。場所は空けたまま（動かさないため）。 */
.k20-home .nav__ja { opacity: 0; transition: opacity .6s ease; }
.k20-home .top.is-dete .nav__ja { opacity: 1; }
/* 今いる場所の下線も、このあいだは引かない。
   和文を伏せてあるので、下線だけが宙に浮いて見える。
   そもそも見せ場を見ている人に「いまトップです」と言う必要がない。 */
.k20-home .top:not(.is-dete) .nav__item.is-here a::after { transform: scaleX(0); }
.top__inner {
	height: 100%;
	width: min(1180px, calc(100vw - 12vw));
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.top__logo { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* 幅だけ決めて、丈は絵に任せる。 */
.logo { height: auto; }
.logo--mini { width: 38px; flex: none; }

.top__name { display: flex; flex-direction: column; line-height: 1.35; }
.top__name-ja { font-size: 13px; letter-spacing: .12em; }
.top__name-en {
	font-family: var(--wa);
	font-weight: 600;
	font-size: 10px;
	letter-spacing: .14em;
	color: var(--han-2);
}

/* ロゴ代替SVGの字組み */
.logo--svg { color: currentColor; }
.logo__num  { font-family: var(--wa);
	font-weight: 600; font-size: 200px; fill: currentColor; }
.logo__th   { font-size: 74px; }
.logo__word { font-family: var(--wa);
	font-weight: 600; font-size: 52px; letter-spacing: .14em; fill: currentColor; }
.logo__name { font-family: var(--go); font-size: 27px; letter-spacing: 4px; fill: currentColor; }
.logo__year { font-family: var(--go); font-size: 25px; letter-spacing: 6px; fill: currentColor; }

/* ナビ */
.nav__list { display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); }
.nav__item a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 6px 2px;
	position: relative;
}
.nav__en { font-family: var(--wa);
	font-weight: 600; font-size: 12px; letter-spacing: .14em; }
/* 10pxだと、原色の上で線が細すぎて読みにくい（数値上は5.1:1でも、
   細い和文は当たりが弱い）。覆いを常設しない代わりに、少し太らせる。 */
.nav__ja { font-size: 11px; font-weight: 500; letter-spacing: .08em; color: var(--han-2); }
.nav__item a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1px;
	background: var(--ai-akari);
	transform: scaleX(0);
	transition: transform .4s ease;
}
.nav__item a:hover::after,
.nav__item.is-here a::after { transform: scaleX(1); }

.menu { display: none; }
.drawer { display: none; }

/* -------------------------------------------------------------
   下層ページの頭

   ■ 主役は和文
   もとは飾りの欧字が118px、頁の題（和文）が15pxで、
   いちばん大きい字がいちばん読ませない字だった（2026年9月10日、見直し）。
   和文を題の大きさまで上げ、欧字は小さな符丁として上に添える。
   大きな欧字は残したいので、うしろの透かしへ回した。

   ■ 濃い面に白抜き
   このサイトはすでに「濃い面には白」という決まりを持っている
   （見せ場・企画の場・締め・足元）。頭もそこへ乗せる。
   明るい珊瑚に墨を置くより、深い地に白のほうが読みやすくもある。

   ■ 頁ごとに色を変える
   五つの頭が同じ帯だと、どこへ来ても同じ景色になる。
   濃いほうの七色から、頁ごとに別の区間を切り出して敷く。
   ------------------------------------------------------------- */

.hd {
	/* 地は --atama-ji（頁ごとに下で差し替える）。
	   同じ地をスマートフォンの引き出しも使うので、変数に出してある。
	   ここに直接書くと、引き出しの色だけ古くなる。 */
	background: var(--atama-ji);
	color: #FFFFFF;
	--han:   #FFFFFF;
	--han-2: rgba(255, 255, 255, .92);   /* 透かしの上でも 5.0:1 */
	--han-3: rgba(255, 255, 255, .82);
	--ai-akari: #FFFFFF;
	padding: calc(var(--topH) + clamp(56px, 10vh, 112px)) 6vw clamp(52px, 8.5vh, 96px);
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* 頁ごとの地。濃いほうの七色から切り出す。
   body に付ける（.hd だけでなく引き出しにも渡すため）。 */
:root         { --atama-ji: linear-gradient(118deg, var(--sango-fuka) 0%, var(--botan-fuka) 100%); }
.k20-special  { --atama-ji: linear-gradient(118deg, var(--midori-fuka) 0%, var(--sora-fuka) 100%); }
.k20-stores   { --atama-ji: linear-gradient(118deg, var(--daidai-fuka) 0%, var(--sango-fuka) 100%); }
.k20-album    { --atama-ji: linear-gradient(118deg, var(--sora-fuka) 0%, var(--botan-fuka) 100%); }
.k20-gallery  { --atama-ji: linear-gradient(118deg, var(--botan-fuka) 0%, var(--daidai-fuka) 100%); }
/* 決まりごとの頁は、記念サイトの中身ではない。七色を一区間ぶんもらうと
   五つの本編と横並びに見えてしまうので、足元（.foot）と同じ墨の地にする。
   下辺の虹だけは共通で入るので、サイトから外れては見えない。 */
.k20-privacy  { --atama-ji: linear-gradient(118deg, #2E0F22 0%, #1D1226 100%); }

/* 下辺に細い虹。サイトの署名として、五つの頭に共通で入れる。 */
.hd::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 3px;
	z-index: 2;
	background: linear-gradient(90deg,
		var(--sango) 0%, var(--daidai) 17%, var(--yamabuki) 34%,
		var(--wakakusa) 50%, var(--midori) 66%, var(--sora) 83%, var(--botan) 100%);
}

.hd__inner {
	width: min(1180px, 100%);
	margin-inline: auto;
	position: relative;
	z-index: 1;
}

/* 欧字は符丁。小さく、字間を広く、和文の上に置く。 */
.hd__en {
	display: block;
	font-family: var(--wa);
	font-weight: 600;
	font-size: clamp(11px, 1.2vw, 13px);
	letter-spacing: .3em;
	text-indent: .3em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--han-2);
}
/* 和文だけの頁（欧字が見出しそのもの）では、飾り書体のまま大きく出す。 */
.hd__en:first-child:last-child,
h1.hd__en {
	font-family: var(--ei);
	font-weight: 400;
	font-size: clamp(40px, 7vw, 84px);
	letter-spacing: .01em;
	text-indent: 0;
	line-height: .95;
	text-transform: none;
	color: #FFFFFF;
}

/* 頁の題。ここがいちばん大きい。 */
.hd__ja {
	display: block;
	margin: 14px 0 0;
	font-size: clamp(26px, 4vw, 44px);
	font-weight: 500;
	letter-spacing: .16em;
	line-height: 1.5;
	color: #FFFFFF;
}

/* うしろの透かし。飾りの欧字はここへ回す。
   読ませるものではないので、読み上げにも渡さない（aria-hidden）。

   中身の枠の中に置いてある。頭の全幅に対して置くと、字の尻が
   画面の端で14pxだけ切れて、はみ出しそこねに見えた
   （2026年9月10日、実測）。右端を本文とそろえると収まる。 */
.hd__sukashi {
	position: absolute;
	right: 0;
	bottom: -.18em;
	z-index: -1;
	font-family: var(--ei);
	font-weight: 400;
	font-size: clamp(80px, 15vw, 196px);
	line-height: .8;
	letter-spacing: .01em;
	/* 題がこの上に重なるので、透かしを明るくするとその分だけ
	   地が持ち上がって字が読みにくくなる。.16 だと重なった所で
	   リードが 4.4:1 まで落ちた（2026年9月10日、実測）。.11 で
	   最悪 5.0:1。飾りは、字の読みやすさより先に立たない。 */
	color: rgba(255, 255, 255, .11);
	pointer-events: none;
	user-select: none;
	white-space: nowrap;
}

.hd__lead {
	margin: clamp(20px, 3vh, 30px) 0 0;
	max-width: 36em;
	font-size: clamp(14px, 1.6vw, 16px);
	line-height: 2.2;
	letter-spacing: .06em;
	color: var(--han-2);
	text-wrap: pretty;
}

/* 狭い画面では、透かしを浅くして題に譲る。
   幅が無い分リードが三行に伸びて、透かしと正面から重なる。
   下へ沈めて、字の頭だけが覗く高さにしてある。 */
@media (max-width: 780px) {
	.hd__sukashi {
		font-size: clamp(64px, 20vw, 116px);
		bottom: -.34em;
		color: rgba(255, 255, 255, .10);
	}
	.hd__ja { letter-spacing: .1em; }
}


/* -------------------------------------------------------------
   出入り
   JSが動かない環境と「動きを減らす」設定では、
   最初から完全に読める状態で静止する。
   ------------------------------------------------------------- */

/* 出入りは transform ではなく translate を使う。
   同じ要素で transform を視差に使うため、こちらに寄せてある。 */
.js .reveal {
	opacity: 0;
	translate: 0 22px;
	transition: opacity 1.1s cubic-bezier(.22, .61, .36, 1),
	            translate 1.1s cubic-bezier(.22, .61, .36, 1);
}
.js .reveal.is-in { opacity: 1; translate: none; }
.js .reveal[data-delay="1"] { transition-delay: .12s; }
.js .reveal[data-delay="2"] { transition-delay: .24s; }
.js .reveal[data-delay="3"] { transition-delay: .36s; }
.js .reveal[data-delay="4"] { transition-delay: .48s; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.js .reveal { opacity: 1; translate: none; transition: none; }
	* { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* -------------------------------------------------------------
   下辺
   ------------------------------------------------------------- */

/* 下辺は墨で沈めて、賑やかな面を受け止める */
/* 足元。墨（#1A1720）そのままだと、この頁でただ一つの
   色を持たない面になる（2026年9月9日、本人の指摘）。
   ほかの濃い面はどれも彩度を残しているので、足元だけが
   よその頁から借りてきたように見えていた。
   墨に牡丹をひとさじ混ぜた深い葡萄にして、虹のいちばん深い音にする。
   面ではなく土台なので、締めの橙〜珊瑚よりさらに沈めてある。 */
.foot {
	background: #2E0F22;
	color: #FFFFFF;
	padding: clamp(72px, 11vh, 128px) 6vw clamp(32px, 5vh, 56px);
	text-align: center;
	position: relative;
	border-top: 0;
	--han:        #FFFFFF;
	--han-2:      rgba(255, 255, 255, .80);
	--han-3:      rgba(255, 255, 255, .62);
	--ji-2:       rgba(255, 255, 255, .80);
	--ji-3:       rgba(255, 255, 255, .62);
	--keisen-han: rgba(255, 255, 255, .22);
	--ai-akari:   var(--yamabuki);
}
.foot__mark { margin-bottom: 32px; }
.logo--foot { width: clamp(140px, 20vw, 186px); }
.foot__lead { font-size: 15px; line-height: 2.4; letter-spacing: .1em; margin-bottom: 48px; }
.foot__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 32px;
	font-size: 13px;
	letter-spacing: .1em;
}
.foot__list a { transition: color .3s; }
.foot__list a:hover { color: var(--ai-akari); }
.foot__list--sub { margin-top: 12px; font-size: 12px; color: var(--han-2); }

/* 下段の見出し。上段と見分けるための札なので、目次より小さく、字間を広く。
   左右に細い罫を伸ばして「ここから別の段」と見せる。 */
.foot__nav--soto { margin-top: 34px; }
.foot__dai {
	display: flex;
	align-items: center;
	gap: 14px;
	justify-content: center;
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .18em;
	text-indent: .18em;
	color: var(--han-3);
}
.foot__dai::before,
.foot__dai::after {
	content: "";
	height: 1px;
	width: clamp(24px, 8vw, 64px);
	background: var(--keisen-han);
}
.foot__co {
	margin-top: 56px;
	padding-top: 40px;
	border-top: 1px solid var(--keisen-han);
}
/* 会社のロゴ。20thの印より小さく、社名の上に置く。
   縦長（520:551）なので、幅だけ決めて丈は絵に任せる。 */
.foot__group {
	margin: 0 0 clamp(18px, 3vh, 30px);
	line-height: 0;
}
.foot__group img {
	width: clamp(96px, 13vw, 124px);
	height: auto;
	opacity: .92;
	transition: opacity .4s ease;
}
.foot__group a:hover img { opacity: 1; }

.foot__words { font-size: 13px; letter-spacing: .12em; }
.foot__addr { font-size: 12px; line-height: 2.1; color: var(--han-2); }
/* サイトの決まりごと。目次（--sub まで）から余白ひとつぶん離して、
   著作権表示のすぐ上に置く。下線を引いておくのは、この一本だけ
   「読み物ではなく決まりごと」だと形で伝わるようにするため。 */
.foot__list--shita {
	margin-top: 34px;
	font-size: 12px;
	color: var(--han-2);
}
.foot__list--shita a {
	text-decoration: underline;
	text-underline-offset: .3em;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--keisen-han);
}
.foot__list--shita a:hover { text-decoration-color: currentColor; }

.foot__copy {
	margin-top: 18px;
	font-family: var(--go);
	font-size: 11px;
	letter-spacing: .08em;
	color: var(--ji-2);   /* 藤の一段の上では ji-3 だと 4.3:1 で足りない */
}
.pagetop {
	position: absolute;
	right: 6vw;
	top: clamp(72px, 11vh, 128px);
	writing-mode: vertical-rl;
	font-family: var(--wa);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .14em;
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--han-2);
	transition: color .3s;
}
.pagetop:hover { color: var(--han); }
.pagetop__line { width: 1px; height: 56px; background: currentColor; }

/* 行き先の一覧（404・受け皿ページ） */
.michi {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px 36px;
	margin-top: 44px;
	font-size: 14px;
	letter-spacing: .1em;
}
.michi a { border-bottom: 1px solid var(--keisen); padding-bottom: 4px; }
.michi a:hover { color: var(--ai); border-color: var(--ai); }

.honbun h2 { font-size: 20px; letter-spacing: .08em; margin: 2.4em 0 .8em; }
.honbun h3 { font-size: 17px; letter-spacing: .08em; margin: 2em 0 .6em; }
.honbun a { border-bottom: 1px solid var(--keisen); }

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

@media (max-width: 860px) {
	:root {
		--topH: 60px;
		--haba: calc(100vw - 10vw);
		--haba-s: calc(100vw - 10vw);
		--masu: clamp(60px, 20vw, 92px);
	}

	body { font-size: 15px; line-height: 2; }

	.field, .paper { padding-inline: 5vw; }

	.hyodai {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}
	.hyodai__en { font-size: clamp(44px, 16vw, 72px); }
	.hyodai__ja {
		writing-mode: horizontal-tb;
		letter-spacing: .2em;
		margin: 0;
	}
	.hyodai__ja::before { margin: 0 0 12px; }

	.nav { display: none; }

	.menu {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6px;
		background: none;
		border: 0;
		padding: 8px 4px;
		cursor: pointer;
		color: inherit;
		/* PC側の項目（.nav__en）と同じ角ゴシックにする。
		   飾り書体の9pxは、原色の上で字の形が読み取れなかった。 */
		font-family: var(--wa);
	}
	/* 三本線。箱の丈は三本ぶん（7px＋1px＋7px）取る。
	   以前は箱を 1px にして上下の線を外へ出していたため、
	   縦積みの隙間（gap）が真ん中の線から数えられ、
	   下の線と MENU の文字が重なっていた（2026年9月9日、本人の指摘）。
	   真ん中の線は背景で描き、上下の線を箱の内側へ収める。 */
	.menu__bar {
		width: 26px;
		height: 15px;
		position: relative;
		background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat;
	}
	.menu__bar::before,
	.menu__bar::after {
		content: "";
		position: absolute;
		left: 0;
		width: 26px; height: 1px;
		background: currentColor;
		transition: transform .35s ease;
	}
	.menu__bar::before { top: 0; }
	.menu__bar::after  { bottom: 0; }
	.menu__label { font-size: 10px; font-weight: 600; letter-spacing: .14em; line-height: 1; }
	.menu[aria-expanded="true"] .menu__bar { background-image: none; }
	.menu[aria-expanded="true"] .menu__bar::before { transform: translateY(7px) rotate(20deg); }
	.menu[aria-expanded="true"] .menu__bar::after  { transform: translateY(-7px) rotate(-20deg); }

	/* 引き出し。
	   ------------------------------------------------------------
	   もとは帯の下（inset: topH）から始まる明るい珊瑚のべた塗りで、
	   墨の字を置いていた。頭を深い地に組み直したあと、
	   ・帯は深い地の上にいて白抜き
	   ・引き出しは明るい珊瑚で墨
	   と、画面の上下で地も字の色も別々になった（本人の指摘、2026年9月11日）。

	   直し方は二つあった。引き出しを帯に寄せるか、帯を引き出しに寄せるか。
	   帯のほうは、頭・見せ場・締めと三か所で深い地に白と決めてある。
	   動かすなら引き出し。

	   ・地は頁の頭と同じ --atama-ji。開くと、その頁の頭が
	     画面いっぱいに伸びたように見える。どの頁にいるかが色でわかる。
	   ・帯の下からではなく画面の上端から敷く（inset: 0）。
	     帯は透かしたまま上に浮かせるので、境目そのものが無くなる。
	     中身は帯のぶんだけ下げる（padding-top）。
	   ------------------------------------------------------------ */
	.drawer {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 40;
		background: var(--atama-ji);
		/* 深い地に白。頭（.hd）と同じ決まり。 */
		color: #FFFFFF;
		--han:   #FFFFFF;
		--han-2: rgba(255, 255, 255, .92);
		--han-3: rgba(255, 255, 255, .82);
		--keisen-han: rgba(255, 255, 255, .22);
		--ai-akari:   #FFFFFF;
		padding: calc(var(--topH) + clamp(32px, 8vh, 72px)) 10vw clamp(32px, 8vh, 72px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	.drawer[hidden] { display: none; }
	.drawer__nav li { border-bottom: 1px solid var(--keisen-han); }
	.drawer__nav a { display: flex; align-items: baseline; gap: 16px; padding: 22px 0; }
	.drawer__en { font-family: var(--wa);
	font-weight: 600; font-size: 21px; letter-spacing: .14em; }
	.drawer__ja { font-size: 12px; color: var(--han-2); letter-spacing: .1em; }
	.drawer__group {
		display: inline-flex;
		margin-top: 40px;
		font-size: 13px;
		border-bottom: 1px solid var(--ai-akari);
		padding-bottom: 6px;
	}

	.pagetop {
		position: static;
		writing-mode: horizontal-tb;
		margin: 40px auto 0;
		justify-content: center;
	}
	.pagetop__line { width: 40px; height: 1px; }
}


/* =============================================================
   窓（ライトボックス）

   もとは page-special.css に置いていた。ところがこの窓は
   「ありがとうの記憶」と「お客様の写真展」の二頁で使う造りで、
   頁別のCSSは当の頁でしか読まれない。写真展のほうは装飾が一つも
   当たらず、ブラウザ既定の <dialog> のまま出ていた
   （2026年9月12日、実測。地が白、角が0、余白0、閉じる釦が画面の外）。
   二頁で使う部品は、二頁とも読む theme.css に置く。
   ============================================================= */

/* -------------------------------------------------------------
   窓（ライトボックス）
   ------------------------------------------------------------- */

/* 話が長いときは窓の中で巻けるようにする。
   丈は svh（いちばん低いときの画面の高さ）で測る。vh だと、
   スマートフォンでアドレスバーが出ているときに窓の下が画面からはみ出す。 */
.mado {
	width: min(1080px, 92vw);
	max-width: none;
	max-height: 86svh;
	padding: 0;
	border: 0;
	border-radius: 20px;
	background: var(--kami-2);
	color: var(--ji);
	overflow: visible;
	box-shadow: 0 40px 90px -50px rgba(var(--sumi-rgb), .7);
}
.mado::backdrop { background: rgba(var(--sumi-rgb), .62); }
.mado__naka {
	max-height: 86svh;
	overflow-y: auto;
	/* 窓の中で巻き終わっても、後ろのページまで巻かれないようにする。 */
	overscroll-behavior: contain;
	border-radius: 20px;
	padding: clamp(28px, 4vw, 64px);
}
/* まだ下に続いていることを示す。巻けるときだけJSが印を付ける。 */
.mado__naka::-webkit-scrollbar { width: 10px; }
.mado__naka::-webkit-scrollbar-thumb {
	background: rgba(var(--sumi-rgb), .22);
	border-radius: 999px;
	border: 3px solid var(--kami-2);
}
.mado--nagai::after {
	content: "";
	position: absolute;
	left: 1px;
	right: 1px;
	bottom: 1px;
	height: clamp(40px, 7vh, 72px);
	border-radius: 0 0 19px 19px;
	background: linear-gradient(to top, var(--kami-2) 18%, rgba(255, 255, 255, 0) 100%);
	pointer-events: none;
	opacity: 1;
	transition: opacity .3s ease;
}
.mado--nagai.is-soko::after { opacity: 0; }
.mado__tojiru {
	position: absolute;
	top: -14px;
	right: -14px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border: 0;
	border-radius: 999px;
	background: var(--ji);
	color: var(--kami);
	font-family: var(--wa);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	cursor: pointer;
}
.mado__batsu { width: 12px; height: 12px; position: relative; }
.mado__batsu::before,
.mado__batsu::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto;
	height: 1.5px;
	background: currentColor;
}
.mado__batsu::before { transform: rotate(45deg); }
.mado__batsu::after  { transform: rotate(-45deg); }

/* 窓の中の記事。ページの中に直に置いたときも同じ体裁で読める。 */
.kiji {
	display: grid;
	grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: start;
}
/* 話が長いと、写真だけ先に流れて左が空いてしまう。窓の中では留めておく。 */
.mado .kiji__pic { position: sticky; top: 0; }
.kiji__pic .pic__body { padding: 0; border-radius: 4px; overflow: hidden; }
/* 中身へ焦点を移すのは巻くためなので、枠は出さない（見た目の焦点は窓そのもの）。 */
.mado__naka:focus { outline: none; }
.mado__naka:focus-visible { outline: 2px solid var(--ai); outline-offset: -4px; }
.kiji__title {
	margin: 0 0 18px;
	font-size: clamp(19px, 2.4vw, 28px);
	line-height: 1.8;
	font-weight: 700;
}
.kiji__hito {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	margin: 0 0 clamp(20px, 3vh, 32px);
	padding-bottom: clamp(18px, 3vh, 28px);
	border-bottom: 1px solid var(--keisen-usu);
}
.kiji__na   { font-size: 16px; font-weight: 700; }
.kiji__honbun p {
	font-size: 15px;
	line-height: 2.25;
	margin-bottom: 1.7em;
	text-wrap: pretty;
}

@media (max-width: 860px) {
	.kiji { grid-template-columns: 1fr; gap: 20px; }
	/* 一段になると、留めた写真が画面をふさぐ。狭い画面では留めない。 */
	.mado .kiji__pic { position: static; }
	.mado { width: 94vw; border-radius: 16px; }
	.mado__naka { border-radius: 16px; padding: 22px 20px 28px; }
	.mado__tojiru { top: -12px; right: -6px; }
}

/* -------------------------------------------------------------
   写真の長押しを止める（スマートフォン）

   iPhone の Safari は、写真を長く押すと「イメージを保存」の札が出る。
   これは右クリックではないのでJSでは拾えず、CSSでしか止められない。
   JS側（main.js）の右クリック・引きずり止めと対になっている。

   止めるのは写真だけ。文章に掛けると、長押しでの文字選択（引用や
   翻訳に使う）まで塞いでしまう。
   ------------------------------------------------------------- */
/* 掛けるのは写真そのものだけ。.pic のような入れ物に掛けると、
   中の説明文（.pic__cap）まで選べなくなる。 */
img,
picture,
svg,
.pic__body {
	-webkit-touch-callout: none;
	-webkit-user-drag: none;
	user-select: none;
}

/* -------------------------------------------------------------
   写真をお寄せいただく欄

   もとは page-gallery.css にあったが、英語の一枚（/en/）でも
   同じ形を使うようになったので、共通の面へ移した（2026年9月14日）。
   置きっぱなしにしていると、英語の頁で入力欄が素のまま出るうえ、
   機械よけの隠し欄まで画面に見えてしまう。

   節そのものの地色や幅もここに含めてある。二つの頁で同じ体裁にしたい。
   ------------------------------------------------------------- */
.oubo {
	background: #F4EFE7;
	padding-block: clamp(64px, 11vh, 128px);
}
/* 書いていただく場所なので、読み物と同じ幅（720px）まで絞る。
   共通の .naka--semai を当ててあるのに効かないのは、theme.css の
   .paper > .naka（詰まり具合が同じで、あとに書いてあるほうが勝つ）が
   1180px で上書きしているため。サイト内5か所すべてで効いていない。

   直すなら theme.css の一行だが、そうすると他の4か所の行長も
   いっぺんに変わる。その4か所は文に手で改行を入れてあって、
   広くても見え方が変わらない（2026年9月12日、描画して見比べた）。
   実際に困るのはこの入力欄だけなので、ここだけ止める。
   /privacy/ も同じやり方で止めてある（page-privacy.css）。 */
.oubo > .naka {
	width: min(720px, 100%);
}
.oubo__midashi {
	margin: 0 0 clamp(16px, 2.4vh, 26px);
	text-align: center;
	font-size: clamp(19px, 2.6vw, 27px);
	font-weight: 500;
	letter-spacing: .14em;
}
.oubo__lead {
	margin: 0 0 clamp(34px, 5vh, 52px);
	text-align: center;
	font-size: clamp(14px, 1.6vw, 16px);
	line-height: 2.4;
	letter-spacing: .08em;
	color: var(--ji-2);
}

/* 送ったあとの一言。読み上げにも届くよう role="status" を付けてある。 */
.oubo__shirase {
	margin: 0 0 clamp(28px, 4vh, 40px);
	padding: 18px 22px;
	font-size: 14px;
	line-height: 2;
	letter-spacing: .06em;
	border-left: 3px solid currentColor;
	background: rgba(255, 255, 255, .7);
}
.oubo__shirase--ok { color: #1F6B3A; }
.oubo__shirase--ng { color: #A3242E; }

.oubo__kami {
	background: #FFFFFF;
	padding: clamp(28px, 4.4vw, 52px);
	box-shadow: 0 1px 0 rgba(var(--sumi-rgb), .05),
	            0 24px 48px -34px rgba(var(--sumi-rgb), .4);
}

/* 機械よけの欄。目にも読み上げにも出さないが、
   display:none だと埋めない機械が増えるので、画面の外へ逃がす。 */
.oubo__wana {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.oubo__gyo { margin: 0 0 clamp(20px, 3vh, 30px); }
.oubo__na {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 9px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1em;
}
.oubo__hissu {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .1em;
	padding: 3px 7px;
	color: #FFFFFF;
	background: var(--toshi-kurenai);
}

.oubo__in,
.oubo__file {
	width: 100%;
	font: inherit;
	font-size: 15px;
	line-height: 1.8;
	color: var(--ji);
	background: #FFFFFF;
	border: 1px solid var(--keisen);
	border-radius: 0;
	padding: 12px 14px;
	transition: border-color .3s ease;
}
.oubo__in::placeholder { color: var(--ji-3); }

/* 選ぶ欄。ブラウザ既定の見た目を外して、他の欄と同じ枠に揃える。
   三角は自前で描く（appearance:none で消えるため）。
   右の余白は三角のぶん。 */
.oubo__erabu {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 40px;
	cursor: pointer;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--ji-2) 50%),
		linear-gradient(135deg, var(--ji-2) 50%, transparent 50%);
	background-position:
		calc(100% - 20px) calc(50% + 2px),
		calc(100% - 14px) calc(50% + 2px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}
/* 何も選んでいないあいだは、案内文なので薄く。 */
.oubo__erabu:has(option[value=""]:checked) { color: var(--ji-3); }
.oubo__erabu option { color: var(--ji); }
.oubo__in:focus,
.oubo__file:focus {
	outline: none;
	border-color: var(--ai);
}
.oubo__in:focus-visible,
.oubo__file:focus-visible { outline: 2px solid var(--ai); outline-offset: 2px; }
.oubo__nagai { resize: vertical; min-height: 6em; }
.oubo__file { padding: 10px 12px; cursor: pointer; }

.oubo__doui { margin: clamp(22px, 3.4vh, 32px) 0 0; }
.oubo__doui label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 14px;
	line-height: 1.9;
	letter-spacing: .04em;
	cursor: pointer;
}
.oubo__doui input {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: .25em;
	accent-color: var(--toshi-kurenai);
}

.oubo__chui {
	margin: clamp(20px, 3vh, 28px) 0 0;
	padding-left: 1.2em;
	font-size: 12.5px;
	line-height: 2.1;
	letter-spacing: .04em;
	color: var(--ji-3);
}
.oubo__chui li { margin-bottom: 4px; }

.oubo__okuru { margin: clamp(28px, 4.4vh, 44px) 0 0; text-align: center; }