/* =========================================================
   SNS共有ボタン（X / LINE / リンクコピー）
   - PC（lg:992px以上）: h1タイトルの右端にインライン表示
   - スマホ（lg未満）: 右下フローティングボタン → Web Share API（OS共有シート）
   - 外部ライブラリ不使用。共有インテントURL + navigator.share のみ。
   - ※カスケード注意: PC用の上書きは必ずファイル末尾のメディアクエリに集約する
     （基本定義より後に置かないと display 指定が後勝ちで効かない）
   ========================================================= */

/* --- h1とボタンを横並びにする（base_template の .page-title へ付与するモディファイア） --- */
.page-title--with-share {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 12px;
}
.page-title--with-share .main-title {
	flex: 1 1 auto;
	min-width: 0;
	margin-bottom: 0;
}

/* --- デスクトップ: h1右端のトグル → クリックで左へ展開（スピードダイヤル） --- */
/* デフォルト(モバイル)は非表示。PCのみ末尾のメディアクエリで表示 */
.sns-share-inline {
	display: none;
	position: relative; /* 展開アイテム(絶対配置)の基準 */
	align-items: center;
	margin-left: auto;  /* h1の右端へ寄せる */
	flex: 0 0 auto;
}

/* --- 共通ボタン見た目（インライン・フォールバックメニュー共用） --- */
.sns-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	color: #fff;
	font-size: 13px;
	line-height: 1;
	text-decoration: none;
	border: none;
	cursor: pointer;
	padding: 0;
	transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.sns-share-btn:hover,
.sns-share-btn:focus {
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
	color: #fff;
	opacity: .92;
}
.sns-share-btn--x    { background: #000000; }
.sns-share-btn--line { background: #06c755; }
.sns-share-btn--copy { background: #5b6b7b; }

/* --- スマホ用フローティング共有（左下・タップで右へ展開＝スピードダイヤル） --- */
.sns-share-fab-wrap {
	position: fixed;
	left: 13px;
	bottom: 20px; /* 右下のLIVEバッジ(bottom:20px)と同じ高さに揃える */
	display: flex;
	align-items: center;
	gap: 8px;
	z-index: 1040;
}

/* トグルボタン（縦幅44px。色はサイト唯一の一貫アクセント色） */
.sns-share-fab {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 2px solid #a0522d; /* 色はそのまま(シエナ)、枠線で表現 */
	color: #a0522d; /* アイコンもシエナ */
	font-size: 13px;
	background-color: transparent; /* 背景は透明 */
	cursor: pointer;
	transition: transform .2s ease;
}
.sns-share-fab:active { transform: scale(.92); }

/* 展開アイテム（X / LINE / コピー）。閉じ状態は隠す。展開方向は文脈別に指定 */
.sns-share-fab-items {
	display: flex;
	align-items: center;
	gap: 8px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.sns-share-fab-items .sns-share-btn {
	width: 44px;          /* トグル(共有ボタン)と同じ大きさに揃える */
	height: 44px;
	font-size: 13px;
	transform: scale(.4);
	transition: transform .22s ease;
}

/* 開いた状態（共通）：表示＋各ボタンを実寸へ */
.is-open .sns-share-fab-items {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.is-open .sns-share-fab-items .sns-share-btn { transform: scale(1); }

/* スマホ：トグル左 → 右へ展開 */
.sns-share-fab-wrap .sns-share-fab-items { transform: translateX(-12px); }
.sns-share-fab-wrap.is-open .sns-share-fab-items { transform: translateX(0); }
.sns-share-fab-wrap.is-open .sns-share-fab-items .sns-share-btn:nth-child(1) { transition-delay: .02s; }
.sns-share-fab-wrap.is-open .sns-share-fab-items .sns-share-btn:nth-child(2) { transition-delay: .07s; }
.sns-share-fab-wrap.is-open .sns-share-fab-items .sns-share-btn:nth-child(3) { transition-delay: .12s; }

/* デスクトップ：トグル右 → 左へ展開（アイテムは絶対配置でタイトルを押し縮めない） */
.sns-share-inline .sns-share-fab-items {
	position: absolute;
	right: 38px; /* トグル30px + 余白8px の左に配置 */
	top: 50%;
	transform: translateY(-50%) translateX(10px);
}
.sns-share-inline.is-open .sns-share-fab-items {
	transform: translateY(-50%) translateX(0);
}
/* トグルに近い右側(copy=3番目)から順に現れて左へ伸びる */
.sns-share-inline.is-open .sns-share-fab-items .sns-share-btn:nth-child(3) { transition-delay: .02s; }
.sns-share-inline.is-open .sns-share-fab-items .sns-share-btn:nth-child(2) { transition-delay: .07s; }
.sns-share-inline.is-open .sns-share-fab-items .sns-share-btn:nth-child(1) { transition-delay: .12s; }

/* --- コピー完了トースト --- */
.sns-share-toast {
	position: fixed;
	left: 50%;
	bottom: 90px;
	transform: translateX(-50%) translateY(10px);
	background: rgba(0, 0, 0, .85);
	color: #fff;
	padding: 8px 16px;
	border-radius: 20px;
	font-size: 13px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
	z-index: 2000;
}
.sns-share-toast.is-show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* =========================================================
   PC（lg:992px以上）用の上書き ※必ず全base定義の後（ファイル末尾）に置く
   ========================================================= */
@media (min-width: 992px) {
	.sns-share-inline   { display: inline-flex; } /* PCはインライン表示 */
	.sns-share-fab-wrap { display: none; }        /* PCはフローティング非表示 */
	/* インライン枠が無いページ（hanro等の独立JSP）はPCでもフローティングを出す */
	.sns-share-fab-wrap.sns-share-fab-wrap--no-inline { display: flex; }
}