/* 1440以上のデザイン */
#autolingual-container .al-widget-wrapper {
	position: absolute !important;
	inset: unset !important;
	top: unset !important;
	top: -30% !important;
	left: unset !important;
	right: unset !important;
	bottom: unset !important;
}

#autolingual-container {
	.al-widget-wrapper {
		position: fixed;
		/* 元: 1.111vw */
		inset: auto 16px 16px auto;
		z-index: calc(infinity);
		/* 元: 0vw */
		border-radius: 0px;
		width: fit-content;
		height: fit-content;
		background-color: transparent;
		/* 元: 0vw */
		padding: 0px;
		/* 元: 0vw */
		margin: 0px;
	}

	.al-widget-wrapper .al-widget-button {
		/* 元: 0.556vw 0.833vw */
		padding: 8px 12px;
		/* 元: 2.5vw */
		height: 36px;
		display: flex;
		/* 元: 0.556vw */
		gap: 8px;
		justify-content: space-between;
		align-items: center;
		/* 元: 0.069vw */
		border: 1px #e2e8f0 solid;
		/* 元: 0.417vw */
		border-radius: 6px;
		text-align: center;
		color: black;
		background-color: #ffffff;
		/* 元: 1.389vw */
		line-height: 20px;
		cursor: pointer;
	}

	.al-widget-wrapper .al-widget-button p {
		color: black;
		/* 元: 0vw */
		margin: 0px;
		/* 元: 0.972vw */
		font-size: 14px;
		white-space: nowrap;
	}

	.al-widget-wrapper .al-widget-button span {
		color: black;
		/* 元: 1.111vw */
		width: 16px;
		/* 元: 1.111vw */
		height: 16px;
	}

	#default-svg {
		/* 元: 1.11vw */
		width: 16px !important;
		/* 元: 1.11vw */
		height: 16px !important;
	}

}

/* クリックされると表示されるボタン */
body {
	.al-translation-buttons-wrapper .al-translation-buttons-list {
/* 元: 2vw */
top: 28.8px !important;

/* 元: 8vw */

		left: unset !important;
	}
	.al-translation-buttons-wrapper {
		position: fixed;
		display: none;
		z-index: calc(infinity);
		width: 100%;
		height: 100dvh;
		background-color: transparent;
		inset: 0;
		/* 元: 0vw */
		padding: 0px;
		/* 元: 0vw */
		margin: 0px;
	}

	.al-translation-buttons-wrapper .al-translation-buttons-list {
		position: absolute;
		/* 元: 0vw */
		padding: 0px;
		/* 元: 0vw */
		margin: 0px;
		list-style: none;
		/* 元: 0.069vw */
		border: 1px #e2e8f0 solid;
		/* 元: 0.417vw */
		border-radius: 6px;
		/* 元: 0.972vw */
		font-size: 14px;
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		color: black;
	}

	.al-translation-buttons-wrapper .al-translation-buttons-list li {
		position: relative;
		/* 元: 0.556vw 1.806vw */
		padding: 8px 26px;
		white-space: nowrap;
		text-align: left;
		/* 元: 1.389vw */
		line-height: 20px;
		cursor: pointer;
		/* 元: 0.069vw */
		border-bottom: 1px #e2e8f0 solid;
		color: black;
	}

	.al-translation-buttons-wrapper .al-translation-buttons-list li:last-child {
		border-bottom: none;
	}

	.al-translation-buttons-wrapper .al-translation-buttons-list li.active::before {
		content: "";
		/* 元: 0.417vw */
		height: 6px;
		/* 元: 0.417vw */
		width: 6px;
		position: absolute;
		/* 元: 0.833vw */
		inset: 50% auto 50% 12px;
		transform: translateY(-50%);
		background-color: black;
		border-radius: 100%;
		display: block;
	}

	.al-translation-buttons-wrapper .al-translation-buttons-list li:hover {
		transition: opacity 0.3s;
		opacity: 0.5;
	}
}

/* 1440 - 744の間のデザイン */
@media screen and (max-width: 1440px) {
	#autolingual-container .al-widget-wrapper {
		position: absolute !important;
		inset: unset !important;
		top: unset !important;
		top: -30% !important;

		left: unset !important;
		right: unset !important;
		bottom: unset !important;
	}

	#autolingual-container {
		.al-widget-wrapper {
			position: fixed;
			/* 元: 16px */
			inset: auto 1.111vw 1.111vw auto;
			z-index: calc(infinity);
			/* 元: 0px */
			border-radius: 0vw;
			width: fit-content;
			height: fit-content;
			background-color: transparent;
			/* 元: 0px */
			padding: 0vw;
			/* 元: 0px */
			margin: 0vw;
		}

		.al-widget-wrapper .al-widget-button {
			/* 元: 8px 12px */
			padding: 0.556vw 0.833vw;
			/* 元: 36px */
			height: 2.5vw;
			display: flex;
			/* 元: 8px */
			gap: 0.556vw;
			justify-content: space-between;
			align-items: center;
			/* 元: 1px */
			border: 0.069vw #e2e8f0 solid;
			/* 元: 6px */
			border-radius: 0.417vw;
			text-align: center;
			color: black;
			background-color: #ffffff;
			/* 元: 20px */
			line-height: 1.389vw;
			cursor: pointer;
		}

		.al-widget-wrapper .al-widget-button p {
			color: black;
			/* 元: 0px */
			margin: 0vw;
			/* 元: 14px */
			font-size: 0.972vw;

			white-space: nowrap;
		}

		.al-widget-wrapper .al-widget-button span {
			color: black;
			/* 元: 16px */
			width: 1.111vw;
			/* 元: 16px */
			height: 1.111vw;
		}

		#default-svg {
			width: 1.11vw !important;
			height: 1.11vw !important;
		}
	}

	/* クリックされると表示されるボタン */
	body {
		.al-translation-buttons-wrapper .al-translation-buttons-list {
			/* 元: 2vw */
			top: 2vw !important;

			/* 元: 8vw */
			right: 8vw !important;
			left: unset !important;
		}

		.al-translation-buttons-wrapper {
			position: fixed;
			display: none;
			z-index: calc(infinity);
			width: 100%;
			height: 100dvh;
			background-color: transparent;
			inset: 0;
			/* 元: 0px */
			padding: 0vw;
			/* 元: 0px */
			margin: 0vw;
		}

		.al-translation-buttons-wrapper .al-translation-buttons-list {
			position: absolute;
			/* 元: 0px */
			padding: 0vw;
			/* 元: 0px */
			margin: 0vw;
			list-style: none;
			/* 元: 1px */
			border: 0.069vw #e2e8f0 solid;
			/* 元: 6px */
			border-radius: 0.417vw;
			/* 元: 14px */
			font-size: 0.972vw;
			display: flex;
			flex-direction: column;
			background-color: #ffffff;
			color: black;
		}

		.al-translation-buttons-wrapper .al-translation-buttons-list li {
			position: relative;
			/* 元: 8px 26px */
			padding: 0.556vw 1.806vw;
			white-space: nowrap;
			text-align: left;
			/* 元: 20px */
			line-height: 1.389vw;
			cursor: pointer;
			/* 元: 1px */
			border-bottom: 0.069vw #e2e8f0 solid;
			color: black;
		}

		.al-translation-buttons-wrapper .al-translation-buttons-list li:last-child {
			border-bottom: none;
		}

		.al-translation-buttons-wrapper .al-translation-buttons-list li.active::before {
			content: "";
			/* 元: 6px */
			height: 0.417vw;
			/* 元: 6px */
			width: 0.417vw;
			position: absolute;
			/* 元: 12px */
			inset: 50% auto 50% 0.833vw;
			transform: translateY(-50%);
			background-color: black;
			border-radius: 100%;
			display: block;
		}

		.al-translation-buttons-wrapper .al-translation-buttons-list li:hover {
			transition: opacity 0.3s;
			opacity: 0.5;
		}
	}
}

/* 744以下のデザイン */
@media screen and (max-width: 744px) {
	#autolingual-container-sp .al-widget-wrapper {
		position: fixed !important;
		inset: unset !important;
		top: unset !important;
		left: unset !important;
		right: unset !important;
		bottom: unset !important;

		top: 5vw !important;
		right: 20vw !important;
	}

	#autolingual-container-sp {
		.al-widget-wrapper {
			position: fixed;
			/* 元: 16px */
			inset: auto 4.267vw 4.267vw auto;
			z-index: calc(infinity);
			/* 元: 0px */
			border-radius: 0vw;
			width: fit-content;
			height: fit-content;
			background-color: transparent;
			/* 元: 0px */
			padding: 0vw;
			/* 元: 0px */
			margin: 0vw;
		}

		.al-widget-wrapper .al-widget-button {
			/* 元: 8px 12px */
			padding: 2.133vw 3.2vw;
			/* 元: 36px */
			height: 9.6vw;
			display: flex;
			/* 元: 8px */
			gap: 2.133vw;
			justify-content: space-between;
			align-items: center;
			/* 元: 1px */
			border: 0.267vw #e2e8f0 solid;
			/* 元: 6px */
			border-radius: 1.6vw;
			text-align: center;
			color: black;
			background-color: #ffffff;
			/* 元: 20px */
			line-height: 5.333vw;
			cursor: pointer;
		}

		.al-widget-wrapper .al-widget-button p {
			color: black;
			/* 元: 0px */
			margin: 0vw;
			/* 元: 14px */
			font-size: 3.733vw;
		}

		.al-widget-wrapper .al-widget-button span {
			color: black;
			/* 元: 16px */
			width: 4.267vw;
			/* 元: 16px */
			height: 4.267vw;
			display: flex;
		}

		#default-svg {
			width: 4.267vw !important;
			height: 4.267vw !important;
		}
	}

	/* クリックされると表示されるボタン */
	body {
		.al-translation-buttons-wrapper .al-translation-buttons-list {
			top: 5vw !important;
			right: 18vw !important;
			left: unset !important;
		}
		.al-translation-buttons-wrapper {
			position: fixed;
			display: none;
			z-index: calc(infinity);
			width: 100%;
			height: 100dvh;
			background-color: transparent;
			inset: 0;
			/* 元: 0px */
			padding: 0vw;
			/* 元: 0px */
			margin: 0vw;
		}

		.al-translation-buttons-wrapper .al-translation-buttons-list {
			position: absolute;
			/* 元: 0px */
			padding: 0vw;
			/* 元: 0px */
			margin: 0vw;
			list-style: none;
			/* 元: 1px */
			border: 0.267vw #e2e8f0 solid;
			/* 元: 6px */
			border-radius: 1.6vw;
			/* 元: 14px */
			font-size: 3.733vw;
			display: flex;
			flex-direction: column;
			background-color: #ffffff;
			color: black;
		}

		.al-translation-buttons-wrapper .al-translation-buttons-list li {
			position: relative;
			/* 元: 8px 26px */
			padding: 2.133vw 6.933vw;
			white-space: nowrap;
			text-align: left;
			/* 元: 20px */
			line-height: 5.333vw;
			cursor: pointer;
			/* 元: 1px */
			border-bottom: 0.267vw #e2e8f0 solid;
			color: black;
		}

		.al-translation-buttons-wrapper .al-translation-buttons-list li:last-child {
			border-bottom: none;
		}

		.al-translation-buttons-wrapper .al-translation-buttons-list li.active::before {
			content: "";
			/* 元: 6px */
			height: 1.6vw;
			/* 元: 6px */
			width: 1.6vw;
			position: absolute;
			/* 元: 12px */
			inset: 50% auto 50% 3.2vw;
			transform: translateY(-50%);
			background-color: black;
			border-radius: 100%;
			display: block;
		}

		.al-translation-buttons-wrapper .al-translation-buttons-list li:hover {
			transition: opacity 0.3s;
			opacity: 0.5;
		}
	}
}