@charset "utf-8";

/**
 * アクションボタン（B-11 / F-5）
 *
 * ■ Figma（リアクションボタン_pc）の実測値に合わせてある（2026/09/18）
 *
 *   白地・角丸ピル・アイコン／ラベル／区切り／回数 の横並び。
 *   高さ41px・枠線1px #392822・文字14px・アイコン30px・ボタン間11px。
 *   影は右下 2px 2px。この寸法で「おいしそう｜1234567」の幅が
 *   194px になり、デザイン実測の 194×41px と一致する。
 *   幅は【内容なり】で、等幅にはしない（Figma は「ビミョー」だけ短い）。
 *   ただし区切り（｜）の位置は揃える（2026/10/01 依頼元指示。.actionBtnLabel の min-width）。
 *   アイコンは Lottie の顔アニメ＋その1コマ目の静止画SVG（2026/09/24）。
 *
 * ■ 既存CSS（pc.css / sp.css / tb.css）に手を入れない
 *
 *   あちらは現行サイトの実物で、さけペアラボ以外のページ用の
 *   指定も含む。アクション用の指定を混ぜると差し替え時に切り分けが効かない。
 *   専用ファイルを1本足して、不要になったら link ごと外せるようにする。
 */

.actionBlock {
	margin: 32px 0;
}

/**
 * 【常に2列】で並べる（2026/09/24 訂正）。
 *
 * ★折り返し任せをやめた。以前は flex-wrap で「入るだけ並べる」
 *   にしていた。デザインの件数が7桁（1234567）だったため
 *   たまたま2列になっていただけで、実データの件数（1〜2桁）だと
 *   ボタンが短くなり【３＋１】に崩れた。デザインは桁数によらず 2×2。
 *
 * ★列幅は max-content。等幅にはしない。
 *   デザイン実測も 194 / 191 / 194 / 180px とバラバラだが、
 *   左列の右端 205 に対して右列の左端が上下とも 216。
 *   つまり【左列の広いほうに右列が揃う】ので max-content が合う。
 *   （min-width:50% でも2列にはなるが、右列が親の中央まで
 *    逃げてしまい、デザインより10pxほど右にずれる）
 *
 * ⚠ SPも 2×2（2026/09/24 確認済み）。寸法だけが別なので、
 *   ファイル末尾の @media (max-width:767px) で上書きしている。
 *   1列に落とすのは 359px 以下だけ。grid は flex と違って
 *   入り切らなくても折り返さずにはみ出すための逃げ道で、
 *   SP寸法の7桁ボタン（155px）2本＋隙間8px＝318px が
 *   左右余白込みで入らなくなる幅。実データ（1〜2桁）なら
 *   ボタンは110px前後なので、通常はここには落ちない。
 */
.actionList {
	display: grid;
	grid-template-columns: repeat(2, max-content);
	justify-content: start;
	justify-items: start;
	/* デザイン実測 11px。縦（上段の下辺 446.5 → 下段の上辺 457.5）も
	   横（左列の右端 205 → 右列の左端 216）も同じ。 */
	gap: 11px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 359px) {
	.actionList {
		grid-template-columns: max-content;
	}
}

.actionBtn {
	/* 粒子（.burst-particle）を絶対配置する基準。枠外へ飛ばすので overflow は切らない */
	position: relative;
	display: inline-flex;
	align-items: center;
	/* デザイン実測。アイコン→ラベル 5.2 ・ ラベル→区切り 6.3 ・
	   区切り→件数 5.5 で、いずれも 6px 前後。一律 6px で取る */
	gap: 6px;
	/* ★幅は内容なり。ただしラベルに最低幅があるので、
	   件数が同じ桁ならボタンの幅も揃う（→ .actionBtnLabel） */
	/* デザイン実測。上下 4.5px（高さ 41px = 1+4.5+30+4.5+1）、
	   左 6.5px（アイコン中心が外端から 22.5px）、右 12px。 */
	padding: 4.5px 12px 4.5px 6.5px;
	/* ★1px。デザイン画像の実測（2026/09/24）。
	   ボタンの左辺を高さ5か所で走査すると、インクの総量は
	   どこも 1.0〜1.2px 分しかない（上辺も 149,149＝各0.5で計1.0px）。
	   2px では太すぎた。枠線とボタン高の比が デザイン 1:41 に対し
	   2px 版は 2:44 で、およそ2.2倍太かった。 */
	border: 1px solid #392822;
	border-radius: 999px;
	background: #fff;
	color: #392822;
	font-size: 14px;
	line-height: 1;
	/* ★上位のCSSに依存しない。button は既定フォントを持つため、
	   明示しないと本文（Noto Sans JP）を継承せず Arial になる（実測）。
	   本番の共通CSSが何であっても同じ見た目にするための指定。 */
	box-sizing: border-box;
	font-family: inherit;
	/* ★太字（2026/09/24）。500 だとデザインより細かった */
	font-weight: 700;
	/* ★右下向きの影（2026/09/24 実測で訂正）。
	   四辺のインク量を測ると 上 1.0 ・ 左 1.0 に対して
	   下 2.77 ・ 右 2.77。下だけでなく【右にも】伸びているので
	   斜め右下のずらし。差分 1.77 ≈ 2px。色は枠線と同じ #392822
	   （x409 が [57,40,34] で出ている）。 */
	box-shadow: 2px 2px 0 #392822;
	text-align: left;
	cursor: pointer;
	/* 連打されるボタンなので、二重タップ拡大とテキスト選択を止める */
	touch-action: manipulation;
	-webkit-user-select: none;
	user-select: none;
}

.actionBtn:hover {
	background: #fffdf3;
}

/* 押している間は影を縮めて、その分だけ下げる（押し込まれて見せる）。
   ★見た目だけ。押下の記録や演出（.is-bursting）とは無関係。 */
.actionBtn:active {
	transform: translate(1px, 1px);
	box-shadow: 1px 1px 0 #392822;
}

.actionBtn:focus-visible {
	outline: 3px solid #f0b429;
	outline-offset: 3px;
}

/**
 * アイコンの枠。中身は状況で入れ替わる。
 *   読み込み直後  <img src="…/lib/img/action/img_actionN.svg">（静止画）
 *   lottie 適用後 <svg>（action.js が差し替える。押すと動く）
 * どちらも下の img/svg の指定で同じ大きさに収まる。
 */
.actionBtnIcon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	line-height: 1;
	/* ★絵柄ごとの大きさのばらつきをここで吸収する（2026/09/24）。下のコメント参照 */
	--iconScale: 1;
	transform: scale(var(--iconScale));
}

/**
 * ★絵柄の大きさを揃える（2026/09/24）。
 *
 *   4つの素材は、150×150 の中で顔の占める割合が違う。
 *   30px 枠に入れたときの実測（顔の外形）:
 *
 *     img_action1（おいしそう） 24.75px
 *     img_action2（ほんとに!?） 29px
 *     img_action3（やってみた） 29px
 *     img_action4（ビミョー）   29px
 *
 *   デザインは4つとも同じ大きさ（顔の黄色がどれも 22px）。
 *   1だけがそれに一致しており、2・3・4 が 1割強大きかった。
 *   → 24.75 / 29 = 0.85 で縮めて 1 に揃える。
 *
 *   枠（30px）は変えない。デザインでは「おいしそう」と
 *   「やってみた」のボタン幅がどちらも 194px で、
 *   アイコンの場所取りは4つとも同じだから。
 *   transform はレイアウトに影響しないのでこれで合う。
 *
 * ⚠ 値の 2/3/4 は `ActionModel::TYPE_REALLY / TYPE_TRIED / TYPE_SUBTLE`。
 *   種別の番号を変えるとここが黙って外れる。
 */
.actionBtnIcon[data-action-icon="2"],
.actionBtnIcon[data-action-icon="3"],
.actionBtnIcon[data-action-icon="4"] {
	--iconScale: 0.85;
}

/**
 * ラベル。
 *
 * ★伸ばさない（2026/09/24）。以前は flex: 1 1 auto で、ボタン幅が内容より
 *   広いときに余白を吸って【件数を右端へ押しやっていた】。Figma は
 *   区切りのすぐ隣に件数が来る形なので、伸縮させない。
 *   いまはボタンが内容幅なので見た目は変わらないが、上位のCSSに
 *   幅を広げられたときに崩れなくなる。
 */
.actionBtnLabel {
	flex: 0 0 auto;
	/* ★区切り（｜）の位置を揃える（2026/10/01 依頼元指示）。
	   「ほんとに!?」「ビミョー」はラベルが短く、区切りと件数が
	   左にずれて見えた。一番長い「おいしそう」「やってみた」
	   （全角5文字＝5em。実測 PC 70px／SP 55px）に合わせる。
	   em なので PC・SP の文字の大きさの違いはそのまま追従する。
	   ⚠ 6文字以上のラベルが来たら値を直す。 */
	min-width: 5em;
	white-space: nowrap;
}

/**
 * ★「ビミョー」だけ、ラベルの枠（5em）の中で中央に置く（2026/10/01 依頼元指示）。
 *   4文字で1文字分短く、左詰めだと区切りの手前が大きく空いて見えるため。
 *   「ほんとに!?」は差が 2px ほどなので左詰めのまま。
 *
 * ⚠ 値の 4 は `ActionModel::TYPE_SUBTLE`。種別の番号を変えるとここが黙って外れる。
 */
.actionBtn[data-action-type="4"] .actionBtnLabel {
	text-align: center;
}

/**
 * ラベルと回数のあいだの縦棒。
 *
 * ★色は枠線と同じ #392822（2026/09/24 実測で訂正）。
 *   「やってみた」の区切りが整数座標に乗っており、
 *   1ピクセルがそのまま [57,40,34] で出ていた。
 *   #d8cfc9（明度 209）では薄すぎた。 */
.actionBtnSep {
	flex: 0 0 auto;
	width: 1px;
	height: 14px;
	background: #392822;
}

/**
 * 押された回数。
 *
 * ★min-width は付けない（2026/09/18）。Figma はボタン幅が内容なりで、
 *   件数の場所を揃えていない。付けると短いラベルのボタンが不自然に伸びる。
 * ★tabular-nums は残す。押した瞬間に +1 して字幅が変わると、
 *   ボタン全体がガタつくため。
 */
.actionBtnCount {
	flex: 0 0 auto;
	color: #766669;
	font-size: 14px;
	/* ★ラベルと同じ太さ（2026/09/24 実測で訂正）。
	   デザイン画像の「1234567」と「おいしそう」を
	   同じ方法で測ると、線の太さは 2.05 対 2.01 でほぼ同じ。
	   同じウエイトで描いたときの「数字÷かな」は 0.85〜1.02 なので
	   （実測 1.018）、ラベルと同じ 700。500 だと 0.5 前後になる。
	   薄く見えるのは太さではなく色（#766669）のせい。 */
	font-weight: 700;
	/* ★字間（2026/09/24 実測）。デザインの「1234567」は
	   桁の送りが平均 8.17px。既定の Zen Kaku Gothic New 14px は
	   6.36px なので、差分の約1.8px が字間。桁そのものの
	   インク幅（6px）と高さは 14px のままだったので、
	   文字を大きくするのではなく字間で合わせる。
	   ⇒ 幅 44.5px → 55px（デザイン実測 54px） */
	letter-spacing: 1.5px;
	font-variant-numeric: tabular-nums;
}

/**
 * 押した瞬間の反応 ―「飛び出す」（サンプル③ / 2026-09-16 差し替え）。
 *
 * ★状態ではなく【反応】。押すたびに action.js がクラスを付け直して
 *   再生させる。「押した／押していない」の2状態ではない
 *   （何度でも押してよく、4種は排他でもないため）。
 *
 * 4つが同時に走る:
 *   1. ボタンがパンチ（.is-bursting → action-punch）
 *   2. アイコンがパンチ（.actionBtnIcon → icon-punch）
 *   3. 回数がポップ（.actionBtnCount.count-pop → count-pop）
 *   4. 種別ごとの記号が飛び出す（.burst-particle → big-fly。action.js が生成）
 */
.actionBtn.is-bursting {
	animation: sakepair-action-punch 0.46s cubic-bezier(0.17, 0.89, 0.32, 1.35);
}

.actionBtn.is-bursting .actionBtnIcon {
	animation: sakepair-icon-punch 0.46s cubic-bezier(0.17, 0.89, 0.32, 1.35);
}

@keyframes sakepair-action-punch {
	0%   { transform: scale(1); }
	18%  { transform: scale(0.91) rotate(-1deg); }
	42%  { transform: scale(1.06) rotate(1deg); }
	68%  { transform: scale(0.98); }
	100% { transform: scale(1); }
}

/* ★ --iconScale を掛け算する（2026/09/24）。
   素直に scale(1.42) と書くと、演出中だけ縮小が外れて
   アイコンが一瞬大きくなる。 */
@keyframes sakepair-icon-punch {
	0%   { transform: scale(var(--iconScale)) rotate(0); }
	25%  { transform: scale(calc(var(--iconScale) * 1.42)) rotate(-10deg); }
	55%  { transform: scale(calc(var(--iconScale) * 0.88)) rotate(8deg); }
	100% { transform: scale(var(--iconScale)) rotate(0); }
}

/* 回数の跳ね（押した瞬間に +1 と同時に再生。中心基準で拡大する） */
.actionBtnCount {
	transform-origin: center;
}

.actionBtnCount.count-pop {
	animation: sakepair-count-pop 0.38s cubic-bezier(0.17, 0.89, 0.32, 1.35);
}

@keyframes sakepair-count-pop {
	0%   { transform: scale(1); }
	35%  { transform: scale(1.9) rotate(-4deg); color: var(--burst, #ff496f); }
	62%  { transform: scale(0.82) rotate(3deg); }
	100% { transform: scale(1); }
}

/**
 * 飛び出す粒子（サンプル③ の記号。種別ごとに ♥ / ! / ★ / 💧 と ✦・•）。
 * action.js が押下ごとに生成し、アニメーション終了で自分を除去する。
 *
 * ★起点はアイコンの中心。枠線 1px ＋ padding-left 6.5px ＋ アイコン 30px の半分 = 22.5px。
 *   ⚠️ ボタンの padding やアイコンの大きさを変えたら【この値も直す】。
 *      2026/09/18 の寸法変更（padding 20px→5px / アイコン 34px→30px）で
 *      37px のままになっており、記号がラベルの上あたりから飛んでいた。
 *   --dx / --dy / --rot と色 --burst は action.js が種別・方向ごとに設定する。
 */
.burst-particle {
	--dx: 0px;
	--dy: -55px;
	--rot: 0deg;
	position: absolute;
	left: 22.5px;
	top: 50%;
	font-size: 24px;
	font-weight: 900;
	line-height: 1;
	color: var(--burst, #ff496f);
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
	pointer-events: none;
	z-index: 5;
	transform: translate(-50%, -50%) scale(0.1);
	opacity: 0;
	animation: sakepair-big-fly 0.72s cubic-bezier(0.12, 0.9, 0.18, 1) forwards;
}

/* "•" は文字ではなく小さな丸（サンプル③ の dot） */
.burst-particle.dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--burst, #ff496f);
	font-size: 0;
	text-shadow: none;
}

@keyframes sakepair-big-fly {
	0%   { transform: translate(-50%, -50%) scale(0.1); opacity: 0; }
	12%  { opacity: 1; }
	100% {
		transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.35) rotate(var(--rot));
		opacity: 0;
	}
}

/* 動きを減らす設定の利用者には演出を出さない（JS 側も粒子を生成しない） */
@media (prefers-reduced-motion: reduce) {
	.actionBtn.is-bursting,
	.actionBtn.is-bursting .actionBtnIcon,
	.actionBtnCount.count-pop {
		animation: none;
	}
}

/* 静止画のアイコン（読み込み直後）と、差し替え後の Lottie の SVG を
   同じ大きさで収める。どちらも 150x150 の viewBox を持つ。 */
.actionBtnIcon img,
.actionBtnIcon svg {
	display: block;
	width: 100%;
	height: 100%;
}
/**
 * ===== SP（〜767px） =====
 *
 * デザイン（リアクションボタン_sp）の実測で上書きする（2026/09/24）。
 * 【並びは PC と同じ 2×2。寸法だけが約 0.78 倍】。
 *
 *   　　　　　　　　　　　PC　　SP
 *   ボタン高さ　　　　　41　　32   （上辺 108.5 → 下辺 140.5）
 *   ボタン幅（7桁）　　194　 155.5
 *   ラベルのインク幅　　65　　 51   ⇒ 14px × 51/65 = 11px
 *   アイコンの顔　　　22　　 18   ⇒ 枠 18/0.775 = 23px
 *   段の隙間　　　　　11　　　8
 *   列の隙間　　　　　11　　　7 → 8 に寄せた（下記）
 *
 * ★枠線だけは 1px のまま。上辺のインク量が PC と同じ 1.0
 *   （155,156 で各0.5）だった。寸法に連動させて細くしない。
 * ★影は 1px。右辺のインク量 2.06・下辺 2.32 で、
 *   枠線1px を引くと 1.1〜1.3。PC（1.77）より浅い。
 */
@media (max-width: 767px) {
	.actionList {
		/* ★縦横とも 8px。デザインの実測は 縦 8 ・ 横 7 だったが、
		   1px の差は意図ではないと判断して 8 に寄せた（2026/09/24 依頼元確認）。
		   PC も縦横とも 11px で揃っている。 */
		gap: 8px;
	}

	.actionBtn {
		gap: 5px;
		/* 高さ 32px = 1 + 3.5 + 23 + 3.5 + 1。
		   左 5.5px（アイコン中心が外端から 18px）、右 9.5px。 */
		padding: 3.5px 9.5px 3.5px 5.5px;
		font-size: 11px;
		box-shadow: 1px 1px 0 #392822;
	}

	.actionBtn:active {
		transform: translate(1px, 1px);
		/* 元が1pxなので、押したら影は消す */
		box-shadow: 0 0 0 #392822;
	}

	.actionBtnIcon {
		width: 23px;
		height: 23px;
	}

	.actionBtnSep {
		height: 11px;
	}

	.actionBtnCount {
		font-size: 11px;
		/* PC の 1.5px を寸法に合わせて縮めた（14/11 分） */
		letter-spacing: 1.2px;
	}

	/* アイコン中心 = 枠線1 ＋ padding-left 5.5 ＋ アイコン 23 の半分 */
	.burst-particle {
		left: 18px;
	}
}