/* [saplabo_tool] 体験ツールの埋め込み枠 */
.saplabo-tool {
	margin: 2em 0;
}

.saplabo-tool__frame {
	display: block;
	width: 100%;
	height: min(85vh, var(--saplabo-tool-height, 760px));
	min-height: 420px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
}

.saplabo-tool__open {
	margin: .5em 0 0;
	font-size: .85em;
	text-align: right;
}

/*
 * ツール記事(本文に [saplabo_tool] がある投稿)
 * ヘッダー・パンくず・フッターはそのまま、その間をツールが全幅で占める(別タブ表示と同じ見え方)。
 * 高さは画面からヘッダー・お知らせバー・パンくずの分を引いた分。
 */

/* タイトルは見た目だけ消す(h1 は SEO・読み上げ用に残す)。カテゴリ・日付は出さない */
.is-saplabo-tool-page .p-articleMetas {
	display: none !important;
}

.is-saplabo-tool-page .p-articleHead {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.is-saplabo-tool-page .l-content {
	margin-bottom: 0;
	padding-top: 0;
}

/* SWELL のフレーム表示で記事エリアに付く上下の余白を消す(ツールをお知らせバーの直下から始める) */
.is-saplabo-tool-page .l-mainContent {
	padding-top: 0;
	padding-bottom: 0;
}

.is-saplabo-tool-page .l-mainContent__inner > .post_content {
	margin: 0;
}

/* 記事下のカテゴリ・タグ、下部固定のバナーは出さない(ツールの下端に重なるため) */
.is-saplabo-tool-page .p-articleFoot,
.is-saplabo-tool-page #footer-banner {
	display: none !important;
}

/* ツール以外の本文は「使い方」モーダルへ移す(saplabo-tool.js)。移すまで見せない */
.is-saplabo-tool-page .l-mainContent__inner > .post_content > :not(.saplabo-tool) {
	display: none;
}

.is-saplabo-tool-page .saplabo-tool {
	/* SWELL の .alignfull と同じ計算(スクロールバー幅を除く) */
	position: relative;
	left: calc(50% - 50vw + var(--swl-scrollbar_width, 0px) / 2);
	width: calc(100vw - var(--swl-scrollbar_width, 0px));
	max-width: none;
	margin: 0;
}

.is-saplabo-tool-page .saplabo-tool__frame {
	/* --saplabo-tool-fit は saplabo-tool.js が「画面の高さ − 枠の上端」で入れる */
	height: var(--saplabo-tool-fit, calc(100vh - 250px));
	min-height: 560px;
	border-width: 1px 0;
	border-radius: 0;
}

@media (max-width: 959px) {
	.is-saplabo-tool-page .saplabo-tool__frame {
		min-height: 480px;
	}
}

/* 「使い方」ボタン(左下固定) */
.saplabo-tool-help__open {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 100;
	display: inline-flex;
	align-items: center;
	gap: .4em;
	padding: .55em 1.1em .55em .7em;
	border: 0;
	border-radius: 999px;
	background: var(--color_main, #2a1fbf);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
	cursor: pointer;
}

.saplabo-tool-help__open:hover {
	opacity: .85;
}

.saplabo-tool-help__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.4em;
	height: 1.4em;
	border-radius: 50%;
	background: #fff;
	color: var(--color_main, #2a1fbf);
	font-size: 13px;
}

/* 「使い方」モーダル(SWELL のリセットで dialog の中央寄せが消えるので戻す) */
.saplabo-tool-help {
	position: fixed;
	inset: 0;
	margin: auto;
	width: min(760px, calc(100vw - 32px));
	height: fit-content;
	max-height: calc(100dvh - 48px);
	padding: 0;
	border: 0;
	border-radius: 8px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
}

.saplabo-tool-help::backdrop {
	background: rgba(20, 24, 40, .55);
}

.saplabo-tool-help__body {
	padding: 1.5em 1.75em 1.75em;
}

.saplabo-tool-help__body > h2:first-child {
	margin-top: 0;
}

.saplabo-tool-help__close {
	position: sticky;
	top: 0;
	float: right;
	z-index: 1;
	width: 40px;
	height: 40px;
	margin: 4px 4px 0 0;
	border: 0;
	background: transparent;
	color: #555;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

@media (max-width: 599px) {
	.saplabo-tool-help__body {
		padding: 1em 1.1em 1.25em;
	}
}

.saplabo-tool__error {
	padding: .5em 1em;
	border: 1px solid #e0a0a0;
	background: #fff4f4;
	color: #a33;
}