@charset "utf-8";

/* =============================================================
   トップページ

   ■ 動きの受け取り方
   JSは各節の --p（0→1）を毎フレーム入れてくるだけ。
   ここは --p をどう使うかだけを書く。--p の既定値は 0 なので、
   JSが動かない環境では「進み具合ゼロ」の姿で静止する。

   動かしてよい環境では html に .ugoku が付く。
   視差や横流しは .ugoku の中でだけ組み、それ以外では
   普通に積んだ姿に戻す（読めることを優先する）。
   ============================================================= */

:root { --p: 0; }

/* -------------------------------------------------------------
   見せ場

   画面に貼り付いたまま、三つの場面が入れ替わる。
     一（0〜.30）   写真が一枚だけ置かれている
     二（.16〜.48）  数枚に増えて、輪になる
     三（.36〜.72）  数えきれないほどになり、升目の壁になる
     四（.58〜1）    壁の中央がハートにひらいて、ロゴが立つ
   --p が 1 に届くと貼り付きが解け、そのまま上へ流れていく。

   動かせない環境（.ugoku が付かない）では場面を使わない。
   壁とロゴだけの、一枚の静かな見せ場に戻る。
   ------------------------------------------------------------- */

.hero {
	min-height: 100svh;
	/* 地の色は theme.css が持つ（見せ場だけ濃い面＋白文字）。
	   ここに書くと、あとから読むぶんこちらが勝ってしまう。 */
	position: relative;
}
.hero__stick {
	min-height: 100svh;
	display: grid;
	place-items: center;
	padding: calc(var(--topH) + 32px) 6vw 112px;
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* 場面一：はじめの一枚。中央に大きく一枚だけ置く。
   「一枚の写真から、はじまりました。」と言いながら何枚も出ていては
   話が合わないので、ここは必ず一枚にする。 */
.hero__hajime { display: none; }
.ugoku .hero__hajime {
	/* 「一枚の写真から」の一枚。ここが見せ場の主役なので大きく取る
	   （2026年9月9日、小さすぎると本人に言われた）。
	   丈で決めるのは、画面の高さが足りないときに言葉と重なるのを避けるため。
	   ただし丈だけで決めると、縦長の画面では幅いっぱいまで太って
	   左右の余白が消えた（同日、本人の指摘）。幅の側にも上限を置く。 */
	--haba-ichi: min(74vw, clamp(230px, 46vh, 540px));
	display: block;
	position: absolute;
	left: 50%;
	/* 写真の形（縦横）によって高さが変わるので、上端ではなく下端を基準に置く。
	   こうしておけば、横長でも縦長でも、言葉との間が同じだけ空く。
	   基準を 50% より下に置くのは、写真と言葉をひと組と見たときの
	   重心を画面の真ん中へ寄せるため。50% のままだと組全体が上に寄る。 */
	bottom: 42%;
	margin: 0 0 2vh calc(var(--haba-ichi) * -0.5);
	/* 下の白い帯に刷るしるしの、位置と大きさの基準にする。 */
	container-type: inline-size;
	z-index: 2;
	width: var(--haba-ichi);
	pointer-events: none;
	/* 消え方だけをスクロール量で決める。出方は下の「あらわれる」に任せる。
	   ここに出方まで持たせると、スクロールするまで何も出ない時間ができる。 */
	opacity: clamp(0, calc((.30 - var(--p)) / .10), 1);
	transform:
		translate3d(0, calc(var(--p) * -6vh), 0)
		scale(calc(1 - var(--p) * .35))
		rotate(calc(var(--p) * -4deg));
	animation: k20-arawareru 1.3s .2s backwards cubic-bezier(.22, .61, .36, 1);
}

/* 初代の「心」のしるし。チェキの下の白い帯の、真ん中に置く。
   帯の高さは枠幅の 20%（.pic__body の padding-bottom）なので、
   帯の中心は下端から 10cqw。しるしの丈の半分だけ持ち上げれば中央に来る。
   乗算で重ねているのは、写真の白地と枠の白（--kami-2）がわずかに違い、
   ふつうに置くと四角い切り抜きの跡が出るため。 */
.hero__shirushi {
	position: absolute;
	left: 50%;
	bottom: 3.5cqw;
	translate: -50% 0;
	width: 17cqw;
	height: auto;
	z-index: 1;
	mix-blend-mode: multiply;
}

/* 読み込んだ時点で、ひとりでに現れる。
   opacity と translate だけを動かす。transform は視差が使っているので触らない。
   fill-mode は backwards。forwards にすると、終わったあとも
   この値が居座って、スクロールで消えなくなる。 */
@keyframes k20-arawareru {
	from { opacity: 0; translate: 0 26px; }
	to   { opacity: 1; translate: 0 0; }
}

/* 場面二の写真。位置は決め打ちで置く（散らし方は意匠なので、
   乱数ではなく目で決めている）。動かせない環境では出さない。 */
.hero__shashin { display: none; }
.ugoku .hero__shashin {
	display: block;
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}
/* 中央を空けて、楕円の輪に並べる。
   円ではなく楕円にするのは、画面が横長だからで、真円だと上下がはみ出す。
   角度は12等分。15度ずらして、真上と真下に写真が来ないようにしてある
   （真下に来るとSCROLLの印と重なる）。
   半径は一枚おきに変えて、機械的な輪に見えないようにする。 */
.hero__ichimai {
	--haba-ichi: clamp(92px, 11vw, 168px);
	--kaku: calc(var(--i) * 30deg - 75deg);
	--yoko: clamp(170px, 33vw, 500px);
	--tate: clamp(130px, 27vh, 280px);
	--r: 0deg;

	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--haba-ichi);
	margin: calc(var(--haba-ichi) * -0.625) 0 0 calc(var(--haba-ichi) * -0.5);
}
.hero__ichimai:nth-child(even) {
	--haba-ichi: clamp(80px, 9.5vw, 146px);
	--yoko: clamp(200px, 39vw, 590px);
	--tate: clamp(150px, 32vh, 330px);
}
.hero__ichimai:nth-child(3n)   { --r: -5deg; }
.hero__ichimai:nth-child(3n+1) { --r:  4deg; }
.hero__ichimai:nth-child(4n)   { --r: -3deg; }

/* 置かれている状態から、外へ少し開いて消える。
   消えたころに、入れ替わりで升目が組み上がってくる。 */
.ugoku .hero__ichimai {
	/* 一枚が消えかけたころに、外から集まってくる */
	opacity: clamp(0, min(calc((var(--p) - .16) / .07), calc((.48 - var(--p)) / .10)), 1);
	transform:
		translate(
			calc(cos(var(--kaku)) * var(--yoko) * (1.12 - var(--p) * .24)),
			calc(sin(var(--kaku)) * var(--tate) * (1.12 - var(--p) * .24)))
		rotate(var(--r))
		scale(calc(.92 + var(--p) * .12));
}

/* 升目の壁。散らばった状態から格子へ収まる。
   中央の抜きは、壁を削るのではなく、この上にハートを重ねて作る。 */
.hero__masu { z-index: 0; }
.ugoku .hero__masu {
	/* 輪が消えるころに、入れ替わりで壁が立ち上がる */
	opacity: clamp(0, calc((var(--p) - .36) / .14), 1);
}

/* ハート。壁の上に重ねる、輪郭のないほのかな色。
   創業のころのモチーフがハートだったことによる。「心」の名にも重なる。

   形と色とぼかしは front-page.php のSVGが持っている。
   CSSの clip-path はぼかしのあとに効く（＝最後に鋭く切られる）ので使えない。
   ぼかしがはみ出せるよう overflow は visible にしておく。 */
.hero__heart {
	overflow: visible;
	/* 共通指定の svg{max-width:100%} を外す。
	   これが効くと、狭い画面でハートが画面幅に潰されて縦長になる。 */
	max-width: none;
	--ana: 1;
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1;
	/* 寸法は「ロゴとテーマ一行が、ハートのふくらんだ帯に収まる」ことで決めている。
	   大きすぎると壁がただの縁になり、小さいと文字がハートからはみ出す。 */
	/* 輪郭（上のくぼみと下の先）が画面に収まる寸法にする。
	   大きくしすぎると、見えているのは中身だけになって形が伝わらない。 */
	width: min(1060px, 74vw);
	height: min(800px, 88vh);
	transform: translate(-50%, -50%) scale(var(--ana));
	pointer-events: none;
}
.ugoku .hero__heart {
	--ana: clamp(0, calc((var(--p) - .54) / .20), 1);
	opacity: clamp(0, calc((var(--p) - .54) / .10), 1);
	/* ぼかし（feGaussianBlur）の掛かった絵を、毎フレーム拡大している。
	   ふつうに描かせると、拡大のたびにぼかしを掛け直すことになる。
	   一枚の層に焼いておくと、あとは層ごと拡大するだけで済む。
	   層が増えるのはこの一つだけなので、持ち出しは小さい。 */
	will-change: transform, opacity;
}
.ugoku .hero__masu .masu {
	--tobi: 14vmax;
	--q: clamp(0, calc((.70 - var(--p)) / .30), 1);   /* 1（散）→0（整） */
	transform:
		translate3d(
			calc(var(--dx) * var(--tobi) * var(--q)),
			calc(var(--dy) * var(--tobi) * var(--q)),
			0)
		rotate(calc(var(--rot) * var(--q)));
}

/* 場面一・二の言葉 */
.hero__kotoba {
	position: relative;
	z-index: 2;
	display: none;
	text-align: center;
}
.ugoku .hero__kotoba {
	display: grid;
	place-items: center;
}
/* 二つ目の言葉は升目の壁の上に出る。壁は写真なので、
   何もしないと明るい写真の上で 2.5:1 まで落ちて読めない。

   はじめは文字のうしろに楕円の覆いを敷いていた。色を黒から牡丹へ替えても、
   結局は「しみ」に見える（2026年9月9日、本人の指摘）。
   原因は色ではなく形で、写真の壁の上ではぼかした楕円のふちが必ず出る。

   いまは壁ぜんたいを均一に沈めている（.hero__yami）。
   ふちが無いので、しみようがない。壁が一段引いて、言葉が前に出る。 */
.hero__yami { display: none; }
.ugoku .hero__yami {
	display: block;
	position: absolute;
	inset: 0;
	/* 壁と同じ層。DOMで壁より後ろにあるので、壁の上・ハートの下に来る。 */
	z-index: 0;
	pointer-events: none;
	/* 黒ではなく、地の牡丹を深くした色。明るい写真の上でも 5.4:1 残る。 */
	background: rgba(74, 0, 46, .62);
	/* 壁が立ち上がるのと同時に沈み、中央がひらくころに戻る。 */
	opacity: clamp(0, min(calc((var(--p) - .36) / .08), calc((.74 - var(--p)) / .08)), 1);
}

.hero__ba {
	grid-area: 1 / 1;
	margin: 0;
	font-size: clamp(17px, 2.6vw, 27px);
	font-weight: 300;
	color: var(--moji-oo);
	line-height: 2.2;
	letter-spacing: .14em;
	text-indent: .14em;
	opacity: clamp(0, min(calc((var(--p) - var(--in)) / .09),
	                      calc((var(--out) - var(--p)) / .09)), 1);
	transform: translate3d(0,
		calc(var(--zure, 0px) + (var(--p) - (var(--in) + var(--out)) / 2) * -8vh), 0);
}
/* 言葉の上に小さく添える日付。
   本文より小さいので、薄くはしない（薄いと地の濃い紅に負ける）。
   白のまま字を落とすだけにして、読みの明暗差を保つ。 */
.hero__hi {
	display: block;
	margin-bottom: .9em;
	font-size: clamp(11px, 1.15vw, 13.5px);
	font-weight: 400;
	letter-spacing: .22em;
	text-indent: .22em;
	line-height: 1.4;
	color: var(--moji-oo);
}

/* 一つ目の言葉は、はじめの一枚の下に置く。
   一枚が現れたすこし後に、続けて現れる。
   ずらす量は、写真の基準（bottom: 42%）に合わせてある。 */
.hero__ba:first-child {
	--zure: 16vh;
	animation: k20-arawareru 1.3s .75s backwards cubic-bezier(.22, .61, .36, 1);
}

/* 場面三：ロゴ */
.hero__naka {
	position: relative;
	z-index: 3;
	/* ハートは下へいくほど細くなる。ぼかしを強くすると芯も痩せるので、
	   文字はふくらんだ帯のほうへ上げておく。 */
	margin-top: -6vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(22px, 3.6vh, 40px);
	text-align: center;
}
.ugoku .hero__naka {
	grid-area: 1 / 1;
	opacity: clamp(0, calc((var(--p) - .60) / .14), 1);
	transform: translate3d(0, calc((1 - var(--p)) * 3vh), 0);
}
.ugoku .hero__kotoba { grid-area: 1 / 1; }

.logo--hero { width: clamp(200px, 30vh, 310px); }

.hero__theme {
	margin: 0;
	font-size: clamp(22px, 3.8vw, 40px);
	/* ロゴは細い線で組まれている。ここだけ太いゴシックだと、
	   同じ画面に別の声が二つあるように見える。太さと字間を寄せる。
	   黒みは色ではなく線の細さで抜く（原色の上では濃さを落とせない）。 */
	font-weight: 400;
	color: var(--moji-oo);
	line-height: 2;
	letter-spacing: .26em;
	text-indent: .26em;
}
/* ロゴと文字のあいだに、ロゴと同じ細さの短い罫を一本入れて繋ぐ */
.hero__theme::before {
	content: "";
	display: block;
	width: 1px;
	height: clamp(20px, 3.4vh, 34px);
	background: currentColor;
	opacity: .38;
	margin: 0 auto clamp(16px, 2.6vh, 26px);
}

.hero__sub { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.hero__en {
	font-family: var(--wa);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .28em;
	text-indent: 0.12em;
	color: var(--ji);
	/* 透過で弱めない。原色の地の上では、薄い墨は 3.3:1 まで落ちる。
	   弱く見せたいときは、濃さではなく太さと字間で引く。 */
}
/* 年号はロゴの中の年号と同じ組み。両脇に細い罫を添える。 */
.hero__year {
	font-family: var(--wa);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .14em;
	text-indent: 0.12em;
	color: var(--ji);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}
.hero__year::before,
.hero__year::after {
	content: "";
	width: clamp(24px, 4vw, 52px);
	height: 1px;
	background: currentColor;
	opacity: .38;
}

/* SCROLL の印には覆いを敷かない。
   写真に埋もれるのを心配して小さな闇を置いていたが、この印が出ているのは
   --p が .22 までのあいだで、升目の壁はまだ立ち上がっていない。
   つまり後ろは無地の濃い虹だけで、覆いは黒いしみとして見えていた
   （2026年9月9日、本人の指摘）。地の色だけで白は 5.9:1 出る。 */
.hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 0;
	z-index: 4;
	isolation: isolate;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.ugoku .hero__scroll {
	opacity: clamp(0, calc((.22 - var(--p)) / .12), 1);
	animation: k20-arawareru 1.2s 1.25s backwards cubic-bezier(.22, .61, .36, 1);
}
.hero__scroll-txt {
	font-family: var(--wa);
	font-weight: 600;
	font-size: 10px;
	letter-spacing: .3em;
	text-indent: 0.12em;
	/* 覆いを外したので、白は薄めない。86%の白では地に対して 4.47:1 で、
	   10pxの字に要る 4.5:1 をわずかに切っていた（描画した画素で実測）。
	   まっさらな白にすると 5.8:1。 */
	color: var(--han);
}
.hero__scroll-line {
	width: 1px;
	height: 72px;
	background: var(--keisen-han);
	position: relative;
	overflow: hidden;
}
.hero__scroll-line::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--ai-akari);
	transform-origin: top;
	animation: k20-nagare 2.8s cubic-bezier(.7, 0, .3, 1) infinite;
}
@keyframes k20-nagare {
	0%   { transform: scaleY(0); transform-origin: top; }
	45%  { transform: scaleY(1); transform-origin: top; }
	55%  { transform: scaleY(1); transform-origin: bottom; }
	100% { transform: scaleY(0); transform-origin: bottom; }
}

/* 貼り付く組み。動かせる環境でだけ、丈を伸ばして中身を貼り付ける。 */
.ugoku .hero {
	height: 320svh;
	min-height: 0;
}
.ugoku .hero__stick {
	position: sticky;
	top: 0;
	height: 100svh;
	min-height: 0;
}

/* -------------------------------------------------------------
   四つのスタジオ（現在の駅）
   ------------------------------------------------------------- */

.mise__midashi {
	margin: 0 0 clamp(20px, 3.5vh, 36px);
	font-size: clamp(15px, 1.8vw, 19px);
	font-weight: 700;
	letter-spacing: .16em;
}
.mise__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(18px, 2.4vw, 32px);
}
.mise__item a { display: flex; flex-direction: column; gap: 6px; }
.mise__pic { margin-bottom: 14px; }
.mise__pic .pic__body { transition: transform .8s cubic-bezier(.22, .61, .36, 1); }
.mise__item a:hover .pic__body { transform: translateY(-5px); }
.ugoku .mise__item {
	transform: translate3d(0, calc((.5 - var(--p)) * (min(3vh, 26px) + var(--i) * min(1.2vh, 11px))), 0);
}
.mise__area { font-size: 11px; font-weight: 600; letter-spacing: .16em; color: var(--ai); }
.mise__name { font-size: 16px; font-weight: 700; letter-spacing: .06em; line-height: 1.8; }

/* -------------------------------------------------------------
   伝えたいこと
   最後は逆に、散っていた升目が中央へ寄って一つになる。
   ------------------------------------------------------------- */

/* 締め。見せ場と対にして濃い面にする。
   明るい橙のままだと、真下の墨の下辺へ落差が大きく、
   帯だけが薄く挟まって見えた（2026年9月9日、通しで確認）。
   濃い面 → 墨の下辺、とつなぐと、頁が開いて閉じる形になる。 */
.shime {
	background: var(--niji-koi-4);
	text-align: center;
	overflow: hidden;
	isolation: isolate;
}
/* 抜きは、伝えたいことの四行がすっぽり入る大きさにする。
   狭いと、写真が入ったときに文字が写真の上に乗る。 */
.shime__masu {
	align-content: center;
	-webkit-mask-image: radial-gradient(ellipse 76% 76% at 50% 50%, transparent 46%, #000 92%);
	mask-image: radial-gradient(ellipse 76% 76% at 50% 50%, transparent 46%, #000 92%);
}
.ugoku .shime__masu .masu {
	--tobi: 26vmax;
	--q: calc(1 - var(--p));
	transform:
		translate3d(
			calc(var(--dx) * var(--tobi) * var(--q)),
			calc(var(--dy) * var(--tobi) * var(--q)),
			0)
		rotate(calc(var(--rot) * var(--q)));
	opacity: calc(.35 + var(--p) * .65);
}
.shime__txt {
	font-weight: 300;
	color: var(--moji-oo);
	font-size: clamp(16px, 2.1vw, 21px);
	line-height: 2.6;
	letter-spacing: .12em;
	margin-bottom: clamp(40px, 6vh, 64px);
}

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

@media (max-width: 860px) {
	/* 四つのスタジオは二段。四つ横並びのままだと、店名が一文字ずつ折れる。 */
	.mise__midashi { margin-bottom: clamp(14px, 2.5vh, 28px); }
	.mise__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.hero__masu {
		-webkit-mask-image: radial-gradient(ellipse 92% 56% at 50% 50%,
			transparent calc(var(--ana) * 44%), #000 calc(28% + var(--ana) * 52%));
		mask-image: radial-gradient(ellipse 92% 56% at 50% 50%,
			transparent calc(var(--ana) * 44%), #000 calc(28% + var(--ana) * 52%));
	}
	.ugoku .hero { height: 260svh; }
	.hero__theme { line-height: 2.3; letter-spacing: .14em; }

	/* 狭い画面では、ハートを画面の外まで広げる。
	   幅を画面に収めると、縦長のいびつなハートになってしまう。 */
	.hero__heart {
		width: min(700px, 162vw);
		height: min(700px, 78vh);
	}

	/* 狭い画面では視差を浅くする。指で送るとき、動きが強いと読みにくい。 */
	.ugoku .mise__item { transform: none; }
	.ugoku .hero__masu .masu { --tobi: 18vmax; }

	/* 輪を小さくし、枚数を間引く。狭い画面で12枚は重なって潰れる。 */
	.hero__ichimai {
		--haba-ichi: clamp(64px, 21vw, 100px);
		--yoko: clamp(110px, 31vw, 190px);
		--tate: clamp(150px, 26vh, 260px);
	}
	.hero__ichimai:nth-child(even) {
		--haba-ichi: clamp(56px, 18vw, 88px);
		--yoko: clamp(130px, 38vw, 230px);
		--tate: clamp(180px, 32vh, 320px);
	}
	.hero__ichimai:nth-child(3n+2) { display: none; }
}