.wiseSectionRoot,
#wiseBody,
#wiseCanvasContainer,
#lessonContentsBody,
#naviItemsBody
{
	overflow: hidden;
}
.wiseSectionRoot,
#sectionWiseQuiz,
#lessonContentsBody,
#naviItemsBody
{
	top:0;
	left: 0;
	z-index:0;
	width: 100vw;
	height: 100vh;
    height: -webkit-fill-available;
    height: 100dvh;
	padding: 0;
	margin: 0;
	position: fixed;
}

#wiseContent {
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
#wiseBody,
#wiseContent,
#wiseBodyQuiz,
#wiseContentQuiz,
#wiseContentCreateLayers{
	width: 100%;
	height: 100%;
	display: flex;
	position: relative;
}

.wiseContainersDisplayArea{
	width: 100%;
	height: 100%;
	display: flex;
	position: absolute;
}


#wiseBackgroundImageContainer{
	width: 70%;
	height: 80%;
	margin: 2% 40px 0 auto;
	z-index: 0;
}

#wiseCanvasContainer {
	display: flex;
    position: absolute;
    left: 0;
    top: 0;
    width: var(--wise-board-w, 100%);
    height: var(--wise-board-h, 100%);
    pointer-events: none;           /* 既存維持でOK（イベント設計が別なら） */
}

#canvasLinkedContainer{
	width: 100%;
	height: 100%;
	position: absolute;
}
#wiseCanvasOriginal{
	z-index: var(--wise-front-z-index-plus5);
}
#wiseCanvasHandWriting{
	z-index: var(--wise-front-z-index-baseline);
}
#wiseBannerAdvertisementContainer{
	position: fixed;
	max-width: 60%;
	max-height: 90px;
	aspect-ratio: 728 / 90;
	bottom: 2%;
	left: 50%;
	transform: translateX(-50%);
	overflow:auto;
	display: flex;
}
.wiseCanvas{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
    top: 0;
}


.movableContainer.is-dragging-front {
    z-index: var(--wise-front-z-index-plus4) !important;
}
.textAreaContainer.is-dragging-front {
    background-color: white;
}
.wordContainer,
.stickyNoteContainer,
.textAreaContainer{
	/* cursor: move; */
	margin: 0;
	color: #000;
	background-color:rgba(0, 0, 0, 0);
	border: 0;
	position: absolute;
	display: flex;
}
.clickableContainer{
	margin: 0;
	color: #000;
	background-color:#FFF;
	position: absolute;
	display: flex;
	border: 1px solid #999;
}

.clickableContainer.horizontalLayout{
	border: none;
}

.linkView{
	border: 1px solid #999 !important;
}

.selectedMovableContainer{
	border: 1px solid #999 !important;
}
.selectedMenuContainer{
	display: block !important;
}

.deleteTarget{
	background-color:#f00 !important;
	opacity: 0.5;
}

#wiseSideMenuCreatestickyNoteInput{
	padding: 10px;
}
.wordBaseContainer,
.puzzlePieceBaseContainer,
.clickableBaseContainer{
	padding: 5px 10px 5px 5px;
	/* cursor: move; */
}
.wordInnerContainer,
.puzzlePieceInnerContainer{
	line-height: 1.2;
	max-width: 75vw;
	overflow-wrap: break-word;
}
.stickyNoteInnerContainer{
	line-height: 1.2;
	overflow-wrap: break-word;
}
.clickableInnerContainer{
	line-height: 1.2;
	max-width: 75vw;
	white-space: nowrap;
}
.linkContainer{
	position: absolute;
	opacity: 0.5;
	display: none;
}
.linkContainer.linkContainer-selected{
	background-color: red !important;
}
.linkContainer.linkContainer-displayed{
	display: block;
}
.linkContainer.linkContainer-displayed-toSentence{
	background-color: var(--main-color-3);
	display: block;
}

/* .phraseClauseContainer .leftLinkContainer{
	background-color: #fff !important;
} */
.leftLinkContainer{
	background-color: var(--main-color-1);
	left: 0;
}
.rightLinkContainer{
	background-color: var(--main-color-1);
	right: 0;
}


.linkMarker{
	width: 10px;
	height: 10px;
	background-color: #fff;
	position: absolute;

	/* cursor: default; */
	opacity: 0;
}
.leftLinkMarker{
	top: 50%;
	left: 0;
	transform: translateY(-50%) translateX(50%);
}
.rightLinkMarker{
	top: 50%;
	right: 0;
	transform: translateY(-50%) translateX(-50%);
}
.clickableLeftLinkMarker,
.clickableRightLinkMarker{
	position: absolute;
	opacity: 0;
}

.stickyNoteBaseContainer{
	padding: 0 2px;
}
.wordMenuContainer,
.stickyNoteMenuContainer,
.textAreaMenuContainer{
	/* temporary setting */
	width: 20px;
	height: 15px;
	right: 0;
	transform: translateX(50%) translateY(-50%);
	/* temporary setting */

	background-color: var(--main-color-3);
	border-radius: 40vh;
	position: absolute;
	display: none;
	/* cursor: pointer; */
}
.stickyNoteMenuContainer{
	display: none;
}

.textAreaBaseContainer{
	padding:0 5px 0 5px;
}

.innerContainerTextArea{
	font-family: var(--main-font-family-1) !important;
	margin: 2px 0;
	padding: 2px;
	resize: none;
	line-height: 1.2;
	height: 50px;
	width: 50px;
	color: black;
	background-color:rgba(0, 0, 0, 0);
	border-style: none;
	overflow:hidden;
	display:block;
}
.innerContainerTextArea.emptyText{
	border: 1px solid black;
}

.stickyNoteContainerTextArea {
	color: black;
}

#puzzlePieceSpan,
.createWordSpan,
#phraseClauseElementSpanMerged,
.phraseClauseElementSpan{
	position: absolute;
	white-space: nowrap;
	z-index: 9999;
}

.createWordSpan{
	left:200%;
	top:30%;
	padding:10px;
	background: rgba(255,255,255,1);
	transform: translateY(-50%) translateX(-50%);
	transition: all 0.5s ease-out;
}
.createWordSpan.spanOpen{
	left:25%;
}

.phraseClauseElementSpan{
	/* top:30%; */
	/* padding:10px; */

	padding: 5px 10px 5px 10px;
	background: rgba(255,255,255,1);
	transform: translateX(-50%);
	transition: all 0.5s ease-out;
}
.phraseClauseElementSpan.spanHidden{
	left:200% !important;
}
.phraseClauseElementSpan.spanOpen{
	left:25% !important;
}
.phraseClauseElementSpan.spanAssemble{
	/* left:25% !important; */
	top:50% !important;
	transform: translateY(-50%) !important;
}
#phraseClauseElementSpanMerged{
	left:25% !important;
	top:50%;
	transform: translateY(-50%);
	padding:10px;
	background: rgba(255,255,255,1);
	transition: all 0.5s ease-out;
}

#eraserSpan{
	display: inline-block;
	background-color: white;
	border:1px solid black;
	border-radius: 50%;
	position: absolute;
	transform: translateY(-50%) translateX(-50%);
	z-index:0;
}


/* ーーーーーーーーーーーーーーーーーー
modal
ーーーーーーーーーーーーーーーーーー */

body.modalOpen{
	height: 100vh;
    height: -webkit-fill-available;
    height: 100dvh;
	overflow-y: hidden;
}

.wiseModal{
	position: fixed;
	z-index: var(--wise-front-z-index-plus4);
	display: flex;
	flex-direction: column;
	right: -100%;
	background-color: #fff;
	border-left: solid 1px #ddd;
	transition: all 0.5s ease-out;
}
.wiseModal.dragging,
.wiseSideMenuLessonContentsModal.dragging{
	transition: none;
}
.wiseModal.wiseModal-open {
	right: 0 !important;
}

#wiseSideMenuAddWordOptions.wiseModal.wiseModal-open,
#wiseSideMenuGrammarExplanationHistory.wiseModal.wiseModal-open
{
	left: 0 !important;
}

.wiseModal:not(#wiseSideMenuAddWordOptions):not(#wiseSideMenuGrammarExplanationHistory).wiseModal-open {
	right: 0 !important;
}


.wiseHalfModal,
.globalHalfModal
{
	width: 50%;
}

.wiseModal ul,
.lessonContentsModal ul,
.naviItemsModal ul,
#wiseLayersMenuUl,
.layerUpdateScreenSideMenuUl,
.grammarInsightsModal ul,
.grammarInsightsDisplayAreaUl,
#wiseUpdateUserInputDataList,
.wiseSideMenuLessonContentsModal ul,
.quizUsersManualScreenSectionUl,
#quizFeedbackScreenContentExplanationUl,
#quizInflectionScreenUl,
.homeworkUl,
.grammarInsightsHomeworkLinkDisplayAreaUl,
.wiseMapUXWaypointContainerUl,
#layerUpdateOverrideScreenlayerUpdateOverridesUl,
.wiseMapScreenListDisplayAreaUl,
.grammarViewContentLinksUl,
.workshopLessonsUl,
.workshopManageStatusUl
{
	list-style-type: none;
}



.wiseModal:not(#wiseSideMenuGrammarExplanation,
#wiseSideMenuLessonContents) li:hover,
#explanationScreenExplanationUl li:hover,
.layerUpdateScreenSideMenuUsedGrammarIdSelectedGrammartLi:hover,
.lessonContentsSideMenuAddContentsLi:hover,
.naviItemsSideMenuAddContentsLi:hover,
.grammarInsightsModal li:hover,
.wiseSideMenuLessonContentsModal li:hover,
.grammarInsightsHomeworkLinkDisplayAreaUl li:hover
{
	background-color: var(--main-color-1);
}

#wiseSideMenuCallActionHistory{
	opacity: 0.6;
}
#wiseSideMenuLessonContentsSearchGrammar{
	opacity: 0.9;
}


.wiseSideMenuContents,
#explanationScreenExplanationContainer,
.lessonContentsSideMenuContents,
.naviItemsSideMenuContents,
.wiseLayersMenuContents,
.grammarInsightsSideMenuContents,
.globalSideMenuContents,
.wiseSideMenuLessonContentsContents
{
	width: 100%;
	height: 100%;
	overflow: auto;
	overscroll-behavior-y: contain;
}

.searchWordListLi,
.searchWordListLiLabel.display-on,
.lessonContentsSideMenuSelectedContentsLi,
.naviItemsSideMenuSelectedContentsLi,
.wiseSideMenuSearchGrammarGrammarListLi,
.searchGrammarListLiLabel,
.wiseLayersMenuLi
{
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
	align-items: center;
	width: 100%;
	height: 100%;
}


.searchWordListLiButton.display-on,
.searchWordListLiDiv.display-on{
	display:block;
}

.searchWordListLiButton,
.searchWordListLiDiv,
.searchWordListLiLabel{
	display:none;
}



.wiseLayersMenu{
	border: 2px solid var(--main-color-1);
}
.wiseSideMenuSearchArea,
.lessonContentsSideMenuSearchArea,
.grammarInsightsSideMenuSearchArea,
.globalSideMenuSearchArea{
	display: flex;
}
.wiseSideMenuSearchForm,
.lessonContentsSideMenuSearchForm,
.grammarInsightsSideMenuSearchForm,
.globalSideMenuSearchForm{
	flex-basis:80%;
}
.wiseSideMenuSearchInput,
.lessonContentsSideMenuSearchInput,
.grammarInsightsSideMenuSearchInput,
.globalSideMenuSearchInput{
	padding: 0.8em 1em !important;
	margin: 0 !important;
}
.wiseSideMenuSearchAreaButton,
.lessonContentsSideMenuSearchButton,
.globalSideMenuSearchButton{
	flex-basis:20%;
}
.wiseSideMenuTextInputArea,
.lessonContentsSideMenuTextInputArea,
.grammarInsightsSideMenuTextInputArea,
.globalSideMenuTextInputArea{
	font-size:16px !important;
}

.wiseSideMenuTitleContainer,
.lessonContentsSideMenuTitleContainer,
.naviItemsSideMenuTitleContainer,
.wiseLayersMenuTitleContainer,
.grammarInsightsSideMenuTitleContainer,
.globalSideMenuTitleContainer{
	display: flex;
	border:1px solid #000;
}
.wiseSideMenuCloseButton,
.wiseSideMenuAddWordButtons,
#globalSideMenuCloseButton{
	width: 100px;
}

#wiseSideMenuGrammarExplanation,
#wiseSideMenuMemoPad{
	z-index: var(--wise-front-z-index-plus3);
}

.wiseSideMenuOpeners{
	z-index: var(--wise-front-z-index-plus2);
}

.wiseSideMenuTitle,
.wiseLayersMenuTitle,
.globalSideMenuTitle{
	width: calc(100% - 50px);
	justify-content: center;
	align-items: center;
	background: var(--main-color-1);
	text-align: center;
	overflow: hidden;
	white-space: nowrap;
}

.selectedLiWiseSideMenuContents,
.selectedLiLessonContentsSideMenuContents
{
	background: var(--main-color-1);
}

#wiseSideMenuGrammarExplanationDisplayAreaContainer,
#wiseSideMenuLessonContentsDisplayAreaContainer
{
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: auto;
}
#wiseSideMenuGrammarExplanationDisplayArea{
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}
#wiseSideMenuGrammarExplanationDisplayAreaDefault{
	position: absolute;
	z-index: 1;
}
.wiseSideMenuGrammarExplanationDisplayAreaContents
{
	background: #ffffff;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
	overflow-y: auto;
	height: 0;
	padding:30px;
}



.wiseSideMenuMemoPadTextarea{
	overflow: auto;
	overscroll-behavior-y: contain;
}

#grammarInsightsScreen h1,
#grammarInsightsScreen h2,
#grammarInsightsScreen h3,
#grammarInsightsScreen h4,
#grammarInsightsScreen h5,
#grammarInsightsScreen h6,
#grammarInsightsScreen .grammarInsightsDisplayAreaLiText,
.divGrammarOutlineText,
.divGrammarOutlineInputLabel,
#wiseSideMenuGrammarExplanationDisplayArea h1,
#wiseSideMenuGrammarExplanationDisplayArea h2,
#wiseSideMenuGrammarExplanationDisplayArea h3,
#wiseSideMenuGrammarExplanationDisplayArea h4,
#wiseSideMenuGrammarExplanationDisplayArea h5,
#wiseSideMenuGrammarExplanationDisplayArea h6,
#wiseSideMenuGrammarExplanationDisplayArea p,
#wiseSideMenuGrammarExplanationDisplayArea span,
#wiseSideMenuGrammarExplanationDisplayArea .sampleSentenceListTextDiv,
#wiseSideMenuGrammarExplanationDisplayArea .grammarViewWordListTextDiv,
#wiseChartScreenChartTable *
{
	user-select: text !important;
	-moz-user-select: text !important;
	-webkit-user-select: text !important;
	-ms-user-select: text !important;
}

.wiseModalHandle
{
	width: 10px;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	cursor: ew-resize;
	z-index: var(--wise-front-z-index-plus3);
}
@media (hover: none) and (pointer: coarse) {
	.wiseModalHandle
	{
		width: 20px;
	}
}

.wiseSideMenuViewWordInformationResultContentsViewExplanation{
	user-select: none !important;
	-moz-user-select: none !important;
	-webkit-user-select: none !important;
	-ms-user-select: none !important;
}


.wiseSideMenuOpeners{
	background-color: var(--main-color-1);
	position: absolute;
	right: 0;
	display: block;
	padding: 10px;
	font-weight: bold;
	border-radius: 8px;
	cursor: pointer;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	writing-mode: vertical-rl;
}


#wiseSideMenuCreateStickyNoteDrawingColors{
	margin: 20px auto auto 20px;
}

#wiseSideMenuMemoPadContents{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: visible;
	position: relative;
}
#wiseSideMenuMemoPadTextareaContainer{
	width: 100%;
	flex-grow: 1;
	overflow: auto;
}

.wiseSideMenuMemoPadTextarea{
	font-family: var(--main-font-family-1) !important;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 15px;
	resize: none;
	display: none;
}
.wiseSideMenuMemoPadTextarea.visible{
	display: block;
}

@keyframes spin {
	0% {
	transform: rotate(0deg);
	}
	100% {
	transform: rotate(360deg);
	}
}

.itemOfPhraseClauseContainer{
	display: none;
}
/* ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー */
.lessonContentsModal,
.naviItemsModal,
.grammarInsightsModal,
.wiseSideMenuLessonContentsModal{
	position: fixed;
	display: flex;
	flex-direction: column;
	width: 50%;
	background-color: #fff;
	border-left: solid 1px #ddd;
	transition: all 0.5s ease-out;
}

.lessonContentsModal,
.naviItemsModal,
.grammarInsightsModal{
	z-index: 9999;
}
.wiseSideMenuLessonContentsModal{
	z-index: var(--wise-front-z-index-plus4);
}

#lessonContentsBody,
#naviItemsBody
{
	display: flex;
	justify-content: center;
}

#lessonContentsContent,
#naviItemsContent
{
	width: 80%;
	height: 80%;
}

.grammarInsightsDisplayAreaLiText,
.homeworkLiText
{
	font-size: var(--main-font-size-1);
	text-align: left;
}

#lessonContentsSideMenuAddContents,
#naviItemsSideMenuAddContents,
#grammarInsightsSideMenuAddContents,
#grammarInsightsSideMenuAddContentsFromCategory,
#grammarInsightsSideMenuAddContentsFromBookmark,
#grammarInsightsSideMenuAddContentsFromHistory,
#wiseSideMenuLessonContentsSearchGrammar{
	left: -100%;
}

#lessonContentsSideMenuSelectedContents,
#naviItemsSideMenuSelectedContents,
#grammarInsightsSideMenuSelectedContents{
	right: -100%;
}

#lessonContentsSideMenuAddContents.lessonContentsModal-open,
#naviItemsSideMenuAddContents.naviItemsModal-open,
#grammarInsightsSideMenuAddContents.grammarInsightsModal-open,
#grammarInsightsSideMenuAddContentsFromCategory.grammarInsightsModal-open,
#grammarInsightsSideMenuAddContentsFromBookmark.grammarInsightsModal-open,
#grammarInsightsSideMenuAddContentsFromHistory.grammarInsightsModal-open,
#wiseSideMenuLessonContentsSearchGrammar.wiseSideMenuLessonContentsModal-open{
	left: 0 !important;
}

#lessonContentsSideMenuSelectedContents.lessonContentsModal-open,
#naviItemsSideMenuSelectedContents.naviItemsModal-open,
#grammarInsightsSideMenuSelectedContents.grammarInsightsModal-open{
	right: 0 !important;
}

.lessonContentsSideMenuTitle,
.naviItemsSideMenuTitle,
.grammarInsightsSideMenuTitle{
	width: 100%;
	justify-content: center;
	align-items: center;
	background: var(--main-color-1);
	text-align: center;
}

.lessonContentsRightModalButtons,
.naviItemsRightModalButtons,
.grammarInsightsSideMenuButtons{
	width: 20%;
	float: right;
}

.grammarInsightsSideMenuChangeModalButtonContainer {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    /* gap: 8px; */
    width: 100%;
    box-sizing: border-box;
}

.grammarInsightsSideMenuChangeModalButtonContainer .grammarInsightsSideMenuChangeModalButton {
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 900px) {
    .grammarInsightsSideMenuChangeModalButtonContainer {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 520px) {
    .grammarInsightsSideMenuChangeModalButtonContainer {
        grid-template-columns: repeat(2, 1fr);
    }
}



.leftPositionModalContents{
	padding-left: 50px;
}


/* ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー */
#myLessonsForTeacherSearchGrammarDropDownMenuArea,
#wiseSideMenuLessonContentsDropDownSelectRoomArea,
#grammarInsightsSideMenuAddContentsFromCategoryDropDownMenuArea,
#grammarInsightsSideMenuAddContentsFromBookmarkDropDownMenuArea,
#grammarInsightsSideMenuAddContentsFromHistoryDropDownMenuArea
{
	display: flex;
	align-items: center;
	justify-content: center;
}
#myLessonsForTeacherSearchGrammarChangeSelection,
#myLessonsForTeacherDropDownChangeSelectionArea,
#myLessonsForTeacherDropDownSelectRoomArea{
	width: calc(75% - 0.125em);
	margin: 0 auto 0 auto;
}
#wiseSideMenuLessonContentsSelectRoom,
#grammarInsightsSideMenuAddContentsFromCategorySelectId,
#grammarInsightsSideMenuAddContentsFromBookmarkSelectId
{
	margin: 0;
}
#wiseSideMenuLessonContentsDisplayArea,
.grammarInsightsDisplayAreas
{
	overflow: hidden;
	padding: 20px 10%;
}
#wiseSideMenuLessonContentsLessonToolbar{
	display: flex;
	margin-left: auto;
	margin-right: 20px;
	visibility: hidden;
}
#wiseSideMenuLessonContentsLessonToolbar.visible{
	visibility: visible;
}
.wiseSideMenuLessonContentsLessonToolbarButton{
	width: 35px;
	height: 35px;
	margin: 0 5px;
}

.wiseSideMenuLessonContentsMenuBar{
	/* max-width: 75%; */
	min-height: 45px;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	position: fixed;
	align-items: center;
	background-color: #fff;
	border: solid 1px #ddd;
	visibility: hidden;
}
.wiseSideMenuLessonContentsMenuBar.wiseSideMenuLessonContentsMenuBar-open{
	z-index: var(--wise-front-z-index-plus4);
	visibility: visible;
}

/* #wiseSideMenuLessonContentsSearchGrammarGrammarListUl{
	padding-left: 50px;
} */
/* ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー */
.wiseContextMenuRoot{
	position:fixed;
	left:0px;
	top:0px;
	padding:0 20px;
	border:1px solid #000;
	background-color:#fff;
	z-index: var(--wise-front-z-index-plus3);
}

.wiseContextMenuRoot ul{
	margin: 0 !important;
	padding: 0 !important;
	list-style-type: none;
}
.wiseContextMenuRoot li,
.layerUpdateScreenSideMenuUsedGrammarIdSelectedGrammartLi
{
	cursor: pointer;
}
.wiseContextMenuRoot li:hover{
	background-color: var(--main-color-1);
}
/* ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー */
.wiseSideMenuViewWordInformationResultHeadline{
	font-size: 18px;
	padding:0 0 0 10px;
	margin:10px 0 0 0;
	border-bottom: 3px solid var(--main-color-1);
}

.wiseSideMenuViewWordInformationResultContentsText{
	padding:10px 10px 0 20px;
	margin: 0 0 30px 0;
}
/* ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー */
/* ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー */
#wiseSideMenuAddWordDisplayAreaContainer{
	position: relative;
}
#wiseSideMenuAddWordOptionsDropDownMenuArea{
	width: 100%;
	height: 100%;
	position:relative;
	overflow: auto;
	overscroll-behavior-y: contain;
}
.wiseSideMenuAddWordOptionsDropDownMenuContainer{
	width: 90%;
	margin: 10px auto 20px auto;
}
.wiseSideMenuAddWordOptionsHeadline{
	font-size: 18px;
	padding:0 0 0 10px;
	margin:10px 0 0 0;
	border-bottom: 3px solid var(--main-color-1);
	margin: 0 0 10px 0;
}


/* ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー */
#wiseVerticalToolbarContainer,
#workshopLessonVerticalToolbarContainer,
#globalVerticalToolbarContainer
{
	position: fixed;
	bottom: 20px;
	left: 0;
	z-index: var(--wise-front-z-index-plus5);
}
.wiseVerticalToolbarButton,
.workshopLessonVerticalToolbarButton,
.globalVerticalToolbarButton,
.wiseSideMenuLessonContentsLessonToolbarButton
{
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--main-color-1);
	color: #FFF;
	text-decoration: none;
	text-align: center;
	/* cursor: pointer; */
}
.wiseVerticalToolbarButton,
.workshopLessonVerticalToolbarButton,
.globalVerticalToolbarButton,
.workshopLessonVerticalToolbarButton
{
	width: 50px;
	height: 50px;
	margin: 10px 10px;
}

.wiseVerticalToolbarButton img,
.workshopLessonVerticalToolbarButton img,
.globalVerticalToolbarButton img,
.wiseSideMenuLessonContentsLessonToolbarButton img{
	width: 60%;
	height: 60%;
}

.wiseVerticalToolbarButton.wiseVerticalToolbarButton-selected,
.workshopLessonVerticalToolbarButton.workshopLessonVerticalToolbarButton-selected,
.globalVerticalToolbarButton.globalVerticalToolbarButton-selected,
.wiseSideMenuLessonContentsLessonToolbarButton.wiseSideMenuLessonContentsLessonToolbarButton-selected{
	color: var(--main-color-1);
	background: #FFF;
	border: solid 1px var(--main-color-1);
}

.wiseMenuBarEraserToggle.wiseMenuBarEraserToggle-selected{
	color: #000;
	background-color: var(--main-color-1);
}

.wiseMenuBar,
.workshopLessonMenuBar,
.globalVerticalToolbarMenuBar,
.wiseSideMenuLessonContentsMenuBar
{
	max-width: 75%;
	min-height: 45px;
	display: flex;
	position: fixed;
	align-items: center;
	background-color: #fff;
	border: solid 1px #ddd;
	visibility: hidden;
	flex-wrap: wrap;
}
.wiseMenuBar.wiseMenuBar-open,
.workshopLessonMenuBar.workshopLessonMenuBar-open,
.globalVerticalToolbarMenuBar.globalVerticalToolbarMenuBar-open,
.wiseSideMenuLessonContentsMenuBar.wiseSideMenuLessonContentsMenuBar-open
{
	z-index: var(--wise-front-z-index-plus5);
	visibility: visible;
}

.wiseMenuBarButton,
.workshopLessonMenuBarButton,
.globalVerticalToolbarMenubarButton,
.wiseSideMenuLessonContentsMenubarButton
{
	display: inline-block;
	margin: 5px;
	padding: 5px;
	border: solid 1px #ddd;
	border-radius: 5px;
	line-height: 1.0;
	/* cursor: pointer; */
	color: #000000;
}

#quizMenuBarButtonConfirm{
	background-color: var(--main-color-1);
	border: solid 1px var(--main-color-1);
}
.wiseMenuBarButtonSelectColor,
.wiseSideMenuCreateStickyNoteButtonSelectColor{
	width: 40px;
	height: 35px;
	display: inline-block;
	margin: 0 5px 0;
	padding: 5px;
	border: solid 1px #ddd;
	border-radius: 5px;
	line-height: 1.0;
	/* cursor: pointer; */
}
.wiseSideMenuCreateStickyNoteButtonSelectColor{
	height: 40px;
}

.wiseMenuBarButtonSelectColor.SelectColorBlack{
	background-color: black;
}
.wiseMenuBarButtonSelectColor.SelectColorRed{
	background-color: rgb(255, 0, 0);
}
.wiseMenuBarButtonSelectColor.SelectColorBlue{
	background-color: rgb(0, 0, 255);
}
.wiseMenuBarButtonSelectColor.SelectColorOrange{
	background-color: rgb(255, 165, 0);
}
.wiseMenuBarButtonSelectColor.SelectColorGreen{
	background-color: rgb(0, 128, 0);
}

.wiseSideMenuCreateStickyNoteButtonSelectColor.SelectColorWhite,
.wisePaletteColorSquare.SelectColorWhite,
.stickyNoteBaseContainerColorWhite
{
	background-color: rgb(245, 245, 245);
}
.wiseSideMenuCreateStickyNoteButtonSelectColor.SelectColorRed,
.wisePaletteColorSquare.SelectColorRed,
.stickyNoteBaseContainerColorRed
{
	background-color: rgb(255, 50, 0);
}
.wiseSideMenuCreateStickyNoteButtonSelectColor.SelectColorBlue,
.wisePaletteColorSquare.SelectColorBlue,
.stickyNoteBaseContainerColorBlue
{
	background-color: rgb(80, 230, 245);
}
.wiseSideMenuCreateStickyNoteButtonSelectColor.SelectColorOrange,
.wisePaletteColorSquare.SelectColorOrange,
.stickyNoteBaseContainerColorOrange
{
	background-color: rgb(245, 155, 0);
}
.wiseSideMenuCreateStickyNoteButtonSelectColor.SelectColorGreen,
.wisePaletteColorSquare.SelectColorGreen,
.stickyNoteBaseContainerColorGreen
{
	background-color: rgb(127, 255, 127);
}
.wiseSideMenuCreateStickyNoteButtonSelectColor.SelectColorYellow,
.wisePaletteColorSquare.SelectColorYellow,
.stickyNoteBaseContainerColorYellow
{
	background-color: rgb(255, 255, 0);
}


#wiseChartScreenChart,
#wiseQuizzesScreen,
#landingPageQuizzesScreen,
#wisePoliteFormPlainFormChart
{
	height: 90vh;
	height: calc(var(--vh, 1vh) * 90);
	overflow-x: hidden;
}

#wiseChartScreenChartSection,
#wisePoliteFormPlainFormTableSection,
#layerUpdateOverrideScreen
{
	height: 90%;
	overflow: auto;
}
#wiseChartScreenChartButtonsSection{
	height: 10%;
}
#wiseChartScreenButtonExit{
	margin: 20px 0 0 0;
}
.wiseChartScreenChartHeaderX,
.wiseChartScreenChartHeaderY,
.wisePoliteFormPlainFormTableTextarea{
	min-width: 200px !important;
	padding: 5px !important;
	margin: 0 !important;
}
.wiseChartScreenChartHeaderY{
	max-width: 200px;
}


#explanationScreen{
	height: 75vh;
	height: calc(var(--vh, 1vh) * 70);
}
#explanationJapaneseSpanScreen{
	margin-top: 5vh;
	display: flex;
	justify-content: center;
	align-items: center;
}
.explanationScreenModal{
	max-width: 500px;
	margin-bottom: 5vh;
}


#explanationScreenTargetWordContainer{
	display: flex;
	justify-content: center;
	align-items: center;
}
.japaneseSpan{
	display: inline-block;
}

.quizScreenSection,
.layerUpdateScreenSection,
.wiseChartScreenSection,
.grammarOutlinePreviewScreenSection
{
	margin-bottom: 30px;
}
.quizScreenButtonsSection,
.layerUpdateScreenButtonsSection,
.explanationScreenButtonsSection,
.grammarOutlinePreviewScreenButtonsSection{
	display: flex;
	justify-content: center;
}
.quizUsersManualScreenSection
{
	margin-bottom: 100px;
}

.quizScreenContainer,
.layerUpdateScreenContainer{
	margin-bottom: 40px;
}

.quizScreenContainerTitle,
.layerUpdateScreenContainerTitle{
	font-size: 24px;
	text-align: left;
	margin-bottom: 10px;
}

.quizScreenContainerContent,
.layerUpdateScreenContainerContent{
	font-size: var(--main-font-size-1);
	text-align: left;
	padding-left: 30px;
	margin-bottom: 30px;
}

.quizFeedbackScreenSectionMessage{
	margin-bottom: 50px;
}

.quizScreenButton,
.explanationScreenButton,
.wiseChartScreenButton,
.layerUpdateScreenButton,
#wisePoliteFormPlainFormButtonExit,
.grammarOutlinePreviewScreenButton,
.quizContentsButton,
.workshopContentsButton,
.quizItemButton,
.quizFeedbackScreenContentExplanationToGrammarButton
{
	background-color: var(--main-color-1);
	color: black;
	border: none;
	border-radius: 5px;
	padding: 10px 20px;
	font-size: 18px;
	margin:5px;
}



.wiseChartScreenButtonsSection{
	display: flex;
	flex-direction: column;
	justify-content: center;
}
#wiseChartScreenDropDownMenuAreaSelect{
	text-align: center;
}
#wiseChartScreenInflectionsUl{
	list-style-type: none;
	list-style-position: inside;
	padding-left: 0;
}
.wiseChartScreenInflectionsLi{
	text-align: left;
	margin: 0 0 10px 20px;
}
.wiseChartScreenInflectionsLiCheckbox{
	transform: scale(2);
	margin: 0 20px 0 0;
}
.wiseChartScreenInputs{
	width: 40% !important;
}

.wisePoliteFormPlainFormTableTd{
	display: flex;
	justify-content: center;
	align-items: center;
}

.wisePoliteFormPlainFormTableTd > div{
	margin: 0 5px;
}

#wisePoliteFormPlainFormButtonExitSection{
	height: 10%;
}
#wisePoliteFormPlainFormButtonExit{
	margin: 20px 0 0 0;
}

#plainformQuizTableSection{
	margin-bottom: 50px;
}

#plainformQuizTable *{
	font: var(--main-font-size-1) var(--main-font-family-1);
}
/* #plainformQuizCoution{
	font: var(--main-font-size-1) var(--main-font-family-1) !important;
	color: red;
} */
.plainformQuizTableAnswersDiv{
	font: var(--main-font-size-1) var(--main-font-family-1) !important;
	background-color:var(--main-color-6);
}
.plainformContainers{
	display: flex;
	justify-content: center;
	align-items: center;
}
.plainformQuizTableTextarea,
.wiseChartScreenChartTextarea{
	font-family: var(--main-font-family-1) !important;
	margin: 2px 0;
	padding: 2px;
	resize: none;
	line-height: 1.2;
	height: 50px;
	overflow: hidden;
}
.plainformQuizTableTextarea.empty{
	border: 1px solid red;
}



#explanationScreen {
	display: flex;
	flex-direction: column;
}
#explanationScreenExplanationUl{
	width:90%;
	margin-left: auto;
	margin-right: auto;
	list-style-type: none;
	text-align: left;
}
/* .explanationScreenExplanationLi{
	overflow: auto;
} */
#explanationScreenButtonsSection{
	margin-top: auto;
}

/* ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー */
/* ーーーーーーーーーーーーーーーーーー
scan
ーーーーーーーーーーーーーーーーーー */
#wiseScanline{
    position: fixed;
    left: 0; right: 0;
    height: 92px;
    bottom: -120px;
    pointer-events: none;
    --scan-core-thickness: 2px;
    background:
        linear-gradient(
            to bottom,
            transparent calc(50% - var(--scan-core-thickness)),
            color-mix(in srgb, var(--wise-cyan) 92%, transparent)
                calc(50% - var(--scan-core-thickness)),
            color-mix(in srgb, var(--wise-cyan) 92%, transparent)
                calc(50% + var(--scan-core-thickness)),
            transparent calc(50% + var(--scan-core-thickness))
        );
    mix-blend-mode: screen;
    opacity: 0;
    transform: translateZ(0);
    will-change: transform, opacity;
}

#wiseScanline::before,
#wiseScanline::after{
    content: "";
    position: absolute;
    left: 0; right: 0;
    pointer-events: none;
    mix-blend-mode: screen;
    filter: blur(8px);
}

#wiseScanline::before{
    bottom: 50%;
    height: 50%;
    background:
        radial-gradient(120px 40px at 50% 100%,
            var(--wise-cyan-glow), transparent 65%),
        linear-gradient(to top,
            color-mix(in srgb, var(--wise-cyan-soft) 86%, transparent), transparent 80%);
    opacity: .9;
}

#wiseScanline::after{
    top: 50%;
    height: 50%;
    background:
        radial-gradient(120px 40px at 50% 0%,
            var(--wise-cyan-glow), transparent 65%),
        linear-gradient(to bottom,
            color-mix(in srgb, var(--wise-cyan-soft) 86%, transparent), transparent 80%);
    opacity: .85;
}

#wiseScanLabel{
    position: fixed; left: 16px; bottom: 16px;
    font: 600 12px/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.2em;
    color: rgba(255,255,255,0.65);
    opacity: 0; transform: translateY(8px);
    transition: opacity 200ms ease, transform 200ms ease;
}

#wiseScanOverlay.scan-start #wiseScanline{
    animation: wiseScanTravel var(--wise-scan-duration) linear forwards;
    opacity: 1;
}
#wiseScanOverlay.scan-start #wiseScanLabel{
    opacity: .9; transform: translateY(0);
}

#wiseScanOverlay.scan-finish{
    transition: opacity var(--wise-outro-duration) ease;
    opacity: 0; pointer-events: none;
}

@keyframes wiseScanTravel{
    from { bottom: -200px; }
    to   { bottom: 100%; }
}

@keyframes wiseLogoCycle{
    0%   { opacity: 0; transform: scale(0.92); }
    30%  { opacity: 1; transform: scale(1.00); }
    60%  { opacity: 1; transform: scale(1.00); }
    70%  { opacity: 0; transform: scale(1.06); }
    85%  { opacity: 0; transform: scale(1.06); }
    100% { opacity: 0; transform: scale(0.92); }
}


@media (prefers-reduced-motion: reduce){
    #wiseScanline, .wiseStartOverlayLogo{ animation: none !important; }
    #wiseScanline{ opacity: 0 !important; }
    #wiseScanLabel{ opacity: 0 !important; transform: none !important; }
}

.wiseScanTarget {
    will-change: filter, transform;
}

.wise-scan-glow {
    position: relative;
    z-index: 9999;
    animation: wiseGlow 520ms ease-out 1;
}

.wise-scan-glow::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: inherit;
    pointer-events: none;
    mix-blend-mode: screen;
    box-shadow:
		0 0 6px var(--wise-cyan),
		0 0 14px var(--wise-cyan),
		0 0 32px var(--wise-cyan),
		0 0 64px var(--wise-cyan);
    opacity: 0;
    transform: scale(0.96);
    animation: wiseGlowRing 520ms ease-out 1;
}

@keyframes wiseGlow {
    0% { filter: brightness(1.2) drop-shadow(0 0 0 var(--wise-cyan)); transform: translateZ(0) scale(1); }
    25% { filter: brightness(2.6) drop-shadow(0 0 22px var(--wise-cyan)) drop-shadow(0 0 44px var(--wise-cyan)); transform: translateZ(0) scale(1.02); }
    60% { filter: brightness(1.8) drop-shadow(0 0 26px var(--wise-cyan)); transform: translateZ(0) scale(1.01); }
    100% { filter: brightness(1) drop-shadow(0 0 0 transparent); transform: none; }
}

@keyframes wiseGlowRing {
    0% { opacity: 0; transform: scale(0.90); }
    30% { opacity: 0.95; transform: scale(1.04); }
    100% { opacity: 0; transform: scale(1.10); }
}

.wise-scan-glow-soft {
    position: relative;
    z-index: 9999;
    animation: wiseGlowSoft 520ms ease-out 1;
}

.wise-scan-glow-soft::after {
    content: "";
    position: absolute;
    inset: -12px;
    border-radius: inherit;
    pointer-events: none;
    mix-blend-mode: screen;
    box-shadow:
        0 0 3px var(--wise-cyan),
        0 0 8px var(--wise-cyan),
        0 0 16px var(--wise-cyan);
    opacity: 0;
    transform: scale(0.98);
    animation: wiseGlowRingSoft 520ms ease-out 1;
}

@keyframes wiseGlowSoft {
    0%   { filter: brightness(1.1) drop-shadow(0 0 0 var(--wise-cyan)); transform: scale(1); }
    25%  { filter: brightness(1.8) drop-shadow(0 0 12px var(--wise-cyan)); transform: scale(1.01); }
    60%  { filter: brightness(1.4) drop-shadow(0 0 16px var(--wise-cyan)); transform: scale(1.005); }
    100% { filter: brightness(1) drop-shadow(0 0 0 transparent); transform: none; }
}

@keyframes wiseGlowRingSoft {
    0%   { opacity: 0; transform: scale(0.94); }
    30%  { opacity: 0.6; transform: scale(1.02); }
    100% { opacity: 0; transform: scale(1.06); }
}

.wise-scan-clone {
    position: fixed;
    pointer-events: none;
    margin: 0 !important;
    box-sizing: border-box;
}