@charset "utf-8";

/* =============================================================
   20周年の企画
   一件＝一枚のはがき。地は節ごとに紙と野を入れ替える。
   ============================================================= */

/* 節ごとに色が変わる。はがきの中の色もそれに合わせる。 */
.kikaku { padding-block: clamp(56px, 9vh, 104px); }
.kikaku:nth-of-type(1) { background: var(--niji-1); }
.kikaku:nth-of-type(2) { background: var(--niji-4); }
.kikaku:nth-of-type(3) { background: var(--niji-3); }
.kikaku:nth-of-type(4) { background: var(--niji-2); }
.kikaku:nth-of-type(1) .dai { --nuri: var(--sango);    --ai: var(--sango-koi);    --ai-rgb: 214, 0, 60; }
.kikaku:nth-of-type(2) .dai { --nuri: var(--daidai);   --ai: var(--daidai-koi);   --ai-rgb: 194, 78, 0; }
.kikaku:nth-of-type(3) .dai { --nuri: var(--sora);     --ai: var(--sora-koi);     --ai-rgb: 11, 98, 184; }
.kikaku:nth-of-type(4) .dai { --nuri: var(--wakakusa); --ai: var(--wakakusa-koi); --ai-rgb: 63, 122, 0; }

.dai {
	display: grid;
	grid-template-columns: 1.02fr .98fr;
	grid-template-areas:
		"marks marks"
		"pic   body"
		"kioku kioku";
	gap: clamp(20px, 3vw, 40px) clamp(28px, 4vw, 64px);
	align-items: center;
	padding: clamp(28px, 3vw, 44px) clamp(28px, 4vw, 64px) clamp(40px, 5vw, 72px);
}

/* 偶数番は写真を右に回して、机の上で向きを変えた感じにする。
   本文はどちらの番でも広いほうの段に入れる（段の比も入れ替える）。 */
.dai--rev {
	grid-template-columns: .98fr 1.02fr;
	grid-template-areas:
		"marks marks"
		"body  pic"
		"kioku kioku";
}

.dai__marks {
	grid-area: marks;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
}
.dai__pic  { grid-area: pic; position: relative; }
.dai__body { grid-area: body; }

.dai__status {
	display: inline-block;
	margin: 0 0 16px;
	padding: 5px 16px;
	border: 0;
	border-radius: 999px;
	background: var(--nuri);
	color: var(--ji);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
}
.dai__status--done { opacity: .7; }

.dai__title {
	margin: 0 0 14px;
	font-size: clamp(22px, 3vw, 32px);
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: .08em;
}
.dai__catch {
	margin: 0 0 26px;
	font-size: clamp(15px, 1.7vw, 18px);
	line-height: 2.1;
	letter-spacing: .08em;
	color: var(--ai);
	text-wrap: pretty;
}
.dai__text {
	font-size: 15px;
	line-height: 2.2;
	color: var(--ji-2);
	text-wrap: pretty;
}
.dai__text p { margin-bottom: 1.2em; }

/* この企画に込めた想い */
/* -------------------------------------------------------------
   ご利用について

   本文（何をする企画か）と、手順（自分は何をすればよいか）を切り分ける。
   想いの箱と並ぶので、見た目は変える。あちらは色の面を敷いた箱、
   こちらは罫を一本引いただけの、本文の続き。
   読まないと動けない話なので、本文から遠ざけない。
   ------------------------------------------------------------- */
.riyou {
	margin: 26px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--keisen-usu);
}
.riyou__midashi {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	color: var(--ji-3);
}
.riyou__text {
	margin: 0 0 .9em;
	font-size: 13.5px;
	line-height: 2.05;
	color: var(--ji-2);
}
.riyou__text:last-child { margin-bottom: 0; }

.omoi {
	margin: 28px 0;
	padding: 24px 26px;
	border-radius: 16px;
	background: rgba(var(--ai-rgb), .07);
}
.omoi__title {
	margin: 0 0 8px;
	font-size: 12px;
	letter-spacing: .16em;
	color: var(--ai-fuka);
}
.omoi__text {
	margin: 0;
	font-size: 13px;
	line-height: 2.1;
	color: var(--ji-2);
}

/* 対象・期間・応募方法 */
.dai__meta {
	display: grid;
	grid-template-columns: 5.5em 1fr;
	gap: 10px 18px;
	margin: 0 0 20px;
	padding-top: 22px;
	border-top: 1px solid var(--keisen-usu);
	font-size: 14px;
	line-height: 2;
}
.dai__meta dt {
	font-size: 11px;
	letter-spacing: .16em;
	color: var(--ji-3);
	padding-top: .5em;
}
.dai__meta dd { margin: 0; }

.dai__note {
	margin: 0 0 22px;
	font-size: 12px;
	line-height: 2;
	color: var(--ji-3);
}
.dai__btn { margin: 0; }

/* -------------------------------------------------------------
   流れ。はがきがわずかに傾きながら通り過ぎる。
   角度は 1度前後にとどめる。大きくすると安っぽくなる。
   ------------------------------------------------------------- */

.ugoku .dai       { transform: rotate(calc((.5 - var(--p)) * 1.1deg)); }
.ugoku .dai--rev  { transform: rotate(calc((var(--p) - .5) * 1.1deg)); }
.ugoku .dai__pic .pic__body { transform: translate3d(0, calc((.5 - var(--p)) * 3vh), 0); }
.ugoku .dai__marks { transform: translate3d(0, calc((var(--p) - .5) * 1.5vh), 0); }

/* -------------------------------------------------------------
   嵐山店の独自プラン
   ------------------------------------------------------------- */

.betsu { text-align: center; }
.betsu__title {
	margin: clamp(36px, 5vh, 56px) 0 18px;
	font-size: clamp(18px, 2.2vw, 23px);
	font-weight: 500;
	letter-spacing: .1em;
	line-height: 1.9;
}
.betsu__text { font-size: 15px; line-height: 2.3; color: var(--ji-2); }
.betsu__note { margin-top: 14px; font-size: 13px; }

/* -------------------------------------------------------------
   締め
   ------------------------------------------------------------- */

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

@media (max-width: 860px) {
	/* 狭い画面では札を傾けない（2026年9月16日、本人の指定）。

	   角度は 1.1度で一定だが、傾きは丈に比例して横へ効く。
	   記憶が増えると札は縦に伸びていき、20件では丈が3200pxを超える。
	   そのとき上端と下端は左右に30px以上ずれ、
	   「わずかに傾いたはがき」ではなく、ただ歪んだ箱に見える。
	   幅の狭い画面ほど札は縦長になるので、ここで止める。 */
	.ugoku .dai,
	.ugoku .dai--rev { transform: none; }

	.dai,
	.dai--rev {
		grid-template-columns: 1fr;
		grid-template-areas:
			"marks"
			"pic"
			"body"
			"kioku";
		gap: 24px;
		padding: 24px 22px 36px;
	}
	.dai__meta { grid-template-columns: 1fr; gap: 2px 0; }
	.dai__meta dt { padding-top: 12px; }
}

/* -------------------------------------------------------------
   ありがとうの記憶（企画③の中身）

   四つの企画のうち、これだけは告知ではなく中身そのものを置く。
   集めた言葉を見せるのが企画なので、見せてしまうのがいちばん早い。
   下層ページは増やさない方針なので、押すと窓が開いて読み切れる。

   道の右半分では収まらないので、ここだけ道の外へ出して全幅で使う。
   ------------------------------------------------------------- */

/* 記憶の一覧は、はがきの下に続く白い面として置く。
   べた塗りの上には白いカードか墨の文字しか置かない、という決まりに従う。
   面の中の色を白地の値に戻さないと、役職の差し色まで墨になる。 */
/* 記憶の一覧は、企画③の札の中に入っている（page-special.php）。
   もとは札の外に置いた別の白い箱だった。白い箱が二つ縦に並ぶと、
   同じ企画の話なのに別ものに見える（2026年9月12日、本人の指摘）。
   自前の地と影と角を外し、罫を一本引いて札の続きにする。 */
.kioku {
	grid-area: kioku;
	margin-top: clamp(24px, 3.5vh, 40px);
	padding-top: clamp(24px, 3.5vh, 40px);
	border-top: 1px solid var(--keisen-usu);
	--ji: #3B3641;
	--ji-2: #57515F;
	--ji-3: #67606F;
	--ai: var(--sora-koi);
	color: var(--ji);
}
.kioku__midashi {
	margin: 0 0 10px;
	font-size: clamp(19px, 2.6vw, 30px);
	font-weight: 700;
	letter-spacing: .1em;
}
.kioku__lead {
	margin: 0 0 8px;
	font-size: 14.5px;
	line-height: 2.05;
	color: var(--ji-2);
	/* 一文なので、途中で折らずに一行で読ませる（2026年9月12日、本人の指定）。
	   34em では「その日の話／が読めます。」と文の途中で折れていた。
	   読み幅の箍は残す。ここが長い文になった日に効かせるため。 */
	max-width: 48em;
}
.kioku__kari {
	margin: 0 0 clamp(24px, 4vh, 40px);
	font-size: 11.5px;
	letter-spacing: .08em;
	color: var(--ji-3);
}

.kioku__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(18px, 2.4vw, 32px);
	/* 丈の違う札が混ざる（言葉だけの札は言葉の長さぶんしかない）。
	   そろえに伸ばさず、上辺でそろえる。伸ばすと言葉だけの札が間延びする。 */
	align-items: start;

	/* 一度これを段組み（columns）にしたが、間違いだった
	   （2026年9月15日、本人の指摘）。段組みは上から下へ一列ずつ埋めるので、
	   01 02 03 … と番号を振ってある一覧では、画面の並びが
	   01 03 05 ／ 02 04 と読めてしまう。五枚のときは列も一つ余った。
	   丈の違いで下に空きが出ることはあるが、順番が狂うほうがずっと困る。 */
}
.kioku__card {
	display: grid;
	gap: 10px;
	align-content: start;
	height: 100%;
}
.kioku__pic { display: block; }

/* -------------------------------------------------------------
   写真の無い記憶

   言葉だけを預かることがある（2026年9月15日、本人の指定）。

   はじめは写真と同じ 4:5 の面に言葉を組んでいたが、
   淡い色の四角が写真の位置に並ぶと、写真の入っていない枠にしか見えなかった
   （同日、本人の指摘）。大きさを合わせたことが、かえって欠けを目立たせていた。

   面をやめて、引用そのものの形にした。左に一本の罫を立てるのは、
   本や雑誌で引用を示すときの形。写真の代わりではなく、
   はじめから言葉として置かれている、と読める。
   丈は言葉の長さのぶんだけ。写真の札とそろえない。
   ------------------------------------------------------------- */
.kioku__moji {
	display: block;
	padding: 4px 0 6px 16px;
	border-left: 2px solid rgba(var(--ai-rgb), .45);
}
.kioku__moji-txt {
	display: block;
	font-size: clamp(14px, 1.35vw, 16.5px);
	font-weight: 500;
	line-height: 1.95;
	letter-spacing: .02em;
	color: var(--ji);
	text-wrap: pretty;
}
/* 押せることを手前で見せる。写真の札が少し寄るのと同じ役。 */
.kioku__card:hover .kioku__moji { border-left-color: var(--ai); }

/* 窓の中で写真が無いときは、一段で組む。 */
.kiji--moji { grid-template-columns: minmax(0, 1fr); }
.kioku__pic .pic__body {
	padding: 0;
	border-radius: 3px;
	overflow: hidden;
	box-shadow: 0 18px 40px -30px rgba(var(--sumi-rgb), .45);
}
.kioku__pic .pic__img { transition: scale .8s cubic-bezier(.22, .61, .36, 1); }
.kioku__card:hover .pic__img { scale: 1.04; }
.kioku__title {
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.85;
	letter-spacing: .02em;
	text-wrap: pretty;
}
.kioku__hito { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.kioku__na   { font-size: 12.5px; color: var(--ji-2); }
/* 節の終わりの釦は中央。道の釦（.michinori__more）や
   四つのスタジオ（.mise__more）と揃える。 */
.kioku__more { margin-top: clamp(28px, 4vh, 48px); text-align: center; }

/* 記事の実体。JSが動くときは隠して、窓に写す。
   .mado-ari は窓が使えるときにJSが付ける印。 */
.mado-ari .kioku__honbun { display: none; }
.kioku__honbun .kiji { padding-block: clamp(40px, 6vh, 72px); border-top: 1px solid var(--keisen-usu); }

/* -------------------------------------------------------------
   狭い画面（ありがとうの記憶と窓）
   ------------------------------------------------------------- */

@media (max-width: 860px) {
	/* 札の続きなので、箱にはしない（角も影も付けない）。 */
	.kioku { margin-top: clamp(20px, 3vh, 30px); padding-top: clamp(20px, 3vh, 30px); }
	.kioku__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 狭い画面でも二列のまま（2026年9月20日、本人の指定）。
   一列にすると縦に伸びすぎる。札は小さくなるが、
   並んでいることが見えるほうが、ここでは大事。 */