@charset "utf-8";

/**
 * SNSシェアボタン（B-12 / G-3）
 *
 * ■ デザイン実測（2026/09/24）
 *
 *   「SNSでシェア」＋丸いアイコンの横並び。1行に収まる。
 *
 *     円          50px（実測 191-241 / 190-239）
 *     円の間隔    20px（中心間 70px）
 *     ラベル      20px #392822（インク 117×15px。20px で 114×15）
 *     ラベル→円   20px
 *     背景        ページの地色のまま（カードの外に置く）
 *
 * ■ action.css には混ぜない
 *
 *   アクション（F群）とシェア（G群）は別機能で、差し替えの時期も別。
 *   1本にまとめると、片方の入稿でもう片方に触ることになる。
 */

.shareBlock {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* ★右寄せ（2026/09/24 デザイン実測で訂正）。
	   カードの右端 1183 に対して、最後の円の右端が 1171。
	   左寄せではなく、右端から 12px 内側に揃える。
	   ※ 「マリアージュ」バッジ（.introTagIcon）は 30px 内側なので、
	     あちらとは揃っていない。別の揃え方。 */
	justify-content: flex-end;
	padding-right: 12px;
	/* ラベル→アイコンの間隔。アイコン同士と同じ 20px */
	gap: 20px;
	/* デザイン実測。カード下端 139 → 円の上 158.5（約20）、
	   円の下 208.5 → 次のカード上端 235（約26） */
	margin: 20px 0 26px;
}

/**
 * ★直後のコメントの上余白を消す（2026/09/24）。
 *
 *   .commentBlock は margin-top:50px を持っていて、こちらの 26px と
 *   相殺（隣り合うマージンは大きい方が勝つ）して 50px になる。
 *   デザインの実測は【円の下 208.5 → 次のカード 235で 26.5px】なので、
 *   ここだけ 0 にしてこちらの値を効かせる。
 *   ※ 隣接セレクタなので、シェアが無いページでは 50px のまま。
 */
.shareBlock + .commentBlock {
	margin-top: 0;
}

.shareTitle {
	flex: 0 0 auto;
	margin: 0;
	color: #392822;
	font-size: 20px;
	/* ★700（2026/09/25 実測で訂正。500 としていたのは誤り）。
	   デザインの「SNSでシェア」は 線の太さ 3.047 / インク 115×16。
	   手元で 20px を描くと 400・500 は 2.055 / 114×15、700 は 3.441 / 115×16。
	   インクの外形が 700 と完全に一致する。
	   なお実測 3.047 が 3.441 より小さいのは、スクリーンショットの
	   にじみで縁が甲らかくなるため。逆に 400 だとすると
	   【にじむと線が太くなる】ことになり、あり得ない。 */
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

/**
 * ★円のまとまりは割らない（nowrap）2026/09/25。
 *
 *   入り切らないときに【最後の1つだけが下に落ちる】のが一番見苦しい。
 *   ここを nowrap にしておくと、狭いときは【見出しごと別行へ】逃げる。
 *   （.shareBlock 側は wrap のままなので、列単位で折り返る）
 */
.shareList {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* コピー後の合図（.shareCopied）を円の真上に置くための基準 */
.shareList li {
	position: relative;
}

/**
 * 円そのもの。色は各SNSの指定（下）。
 * ★枠線も影も付けない。デザインは塗りだけ。
 */
.shareBtn {
	position: relative;          /* コピー後の合図を上に浮かせる基準 */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: #fff;                 /* 中の印は currentColor で白になる */
	box-sizing: border-box;
	overflow: hidden;            /* Facebook の f は下辺まで伸びるので切る */
	cursor: pointer;
	touch-action: manipulation;
	-webkit-user-select: none;
	user-select: none;
}

/**
 * ★共通CSSからの干渉を断つ（2026/09/24）。
 *
 *   開発環境で【X / LINE / Facebook の円の中に小さな四角が出て、
 *   印が左へ押しやられ、色も白でなくなる】という崩れが出た。
 *   URLコピーだけ無事だったのが手がかりで、あれは <button>、
 *   他の3つは target="_blank" の <a>。
 *   ⇒ サイト共通のCSSが【別窓リンクに ::after で印を足し、
 *      リンク色を上書きしている】ため。
 *
 *   共通CSSは月桂冠サイト全体のもので、こちらからは触れない。
 *   Docker の共通パーツはスタブなので【ローカルでは再現しない】。
 *   そのため、この部品の側で打ち消しておく。
 *
 * ★!important を使っている。相手のセレクタの強さが分からず、
 *   確認もできないため。使う範囲はこの3つの指定だけに留める。
 */
.shareBtn::before,
.shareBtn::after {
	content: none !important;
	display: none !important;
}

.shareList .shareBtn,
.shareList .shareBtn:link,
.shareList .shareBtn:visited,
.shareList .shareBtn:hover,
.shareList .shareBtn:active {
	/* 中の印は currentColor なので、ここが白でないと印が白くならない */
	color: #fff !important;
	text-decoration: none;
}

/* ★縮ませない。::after が入ると flex で svg が潰された（実測） */
.shareBtn svg {
	flex: 0 0 auto;
}

.shareBtn:hover {
	opacity: 0.8;
}

.shareBtn:active {
	transform: translateY(1px);
}

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

/* 円の色。デザイン画像から採色した実測値 */
.shareBtn--x        { background: #000000; }
.shareBtn--line     { background: #4CC764; }
.shareBtn--facebook { background: #0866FF; }
.shareBtn--copy     { background: #E18551; }
/* ★ダウンロードはデザインに無いボタン（2026/09/24 追加依頼）。
   2026/10/01 の参考画像で URLコピーと同じ色になっていたので揃えた
   （以前は仮でサイトの文字色 #392822）。 */
.shareBtn--download { background: #E18551; }

/**
 * 中の印の大きさ。デザインの実測値をそのまま入れる。
 * viewBox が印の寸法になっているので、ここの値＝画面上の実寸。
 */
.shareBtn svg { display: block; }

.shareBtn--x        svg { width: 26px; height: 26px; }
.shareBtn--line     svg { width: 33px; height: 31px; }
/* ★f だけ下辺まで伸びる形。実測で中心が 3.5px 下だったので下げる */
.shareBtn--facebook svg { width: 22px; height: 38px; margin-top: 7px; }
.shareBtn--copy     svg { width: 25px; height: 30px; }
.shareBtn--download svg { width: 24px; height: 24px; }

/**
 * コピー後の合図。円の真上に一瞬だけ出す。
 *
 * ★中身は share.js が入れる。空のときは出ない（:empty）。
 * ★見た目はこのページのボタンに揃えてある。
 *   白地・枠線1px・角丸ピル・右下に2pxの影。色は #392822。
 *   （アクションボタン = action.css と同じ考え方）
 * ★親は li。ボタンの中に置くと overflow:hidden で切られる。
 */
.shareCopied {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	z-index: 5;
	padding: 6px 14px;
	border: 1px solid #392822;
	border-radius: 999px;
	background: #fff;
	box-shadow: 2px 2px 0 #392822;
	color: #392822;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
	transform: translateX(-50%);
	animation: sakepair-copied-in 0.18s cubic-bezier(0.17, 0.89, 0.32, 1.35);
}

.shareCopied:empty {
	display: none;
}

/* 下から少し上がって出る。translateX(-50%) を落とさないこと */
@keyframes sakepair-copied-in {
	0%   { opacity: 0; transform: translate(-50%, 6px); }
	100% { opacity: 1; transform: translate(-50%, 0); }
}

/* 動きを減らす設定の利用者には動かさない（出ることは出る） */
@media (prefers-reduced-motion: reduce) {
	.shareCopied {
		animation: none;
	}
}

/**
 * ===== SP（〜767px）=====
 *
 * ⚠ **SPのデザインは未入稿。** PC実測値のままだと
 *   ラベル117 ＋ 円50×4 ＋ 隙間20×4 = 397px で 375px に収まらないため、
 *   収まる値へ縮めてある（円40・隙間14・ラベル14px ⇒ 約298px）。
 *   入稿されたら実測に置き換える。
 */
@media (max-width: 767px) {
	/**
	 * ★見出しを上、円を下の【2段・中央揃え】にする（2026/10/01 依頼元指示）。
	 *
	 *   以前は見出しごと1行・右寄せにするため、見出し 12px・円 36px まで
	 *   詰めていた。依頼元の参考画像（375px 幅）の実測に置き換える。
	 *
	 *     見出し      20px（インク 117px。PC と同じ大きさ）・中央
	 *     見出し→円   約10px
	 *     円          40px（161-201 / 213-253 …）
	 *     円の間隔    12px（中心間 52px）
	 *     円の列      40×5 + 12×4 = 248px。中心が画面の中心と一致
	 *
	 *   248px なので 320px 端末でも1行に収まる。
	 *   中の印は PC の 0.8 倍（円 50→40 と同じ比）。
	 */
	.shareBlock {
		flex-direction: column;
		justify-content: flex-start;
		padding-right: 0;
		gap: 10px;
		margin: 14px 0 30px;
	}

	.shareList {
		gap: 12px;
	}

	.shareBtn {
		width: 40px;
		height: 40px;
	}

	.shareBtn--x        svg { width: 21px; height: 21px; }
	.shareBtn--line     svg { width: 26px; height: 25px; }
	.shareBtn--facebook svg { width: 18px; height: 30px; margin-top: 6px; }
	.shareBtn--copy     svg { width: 20px; height: 24px; }
	.shareBtn--download svg { width: 19px; height: 19px; }

	/* 中央寄せになって右端までの余裕はできたが（コピーの中心から右に 98px）、
	   円が小さいので合図も一回り小さくしておく。 */
	.shareCopied {
		bottom: calc(100% + 6px);
		padding: 4px 10px;
		font-size: 11px;
	}
}