@charset "UTF-8";
/*
	Theme Name:lightning-child
	Template:lightning
*/

:root {
	/* ライトブルー */
	--main-color-0: #d1faff;
	/* ブルー */
	--main-color-1: #40d4e5;
	/* オレンジ */
	--main-color-2: #ff9600;
	/* パープル */
	--main-color-3: #7e5bfc;
	/* レッド */
	--main-color-4: #ff4500;
	/* ライトグレー */
	--main-color-5: #e8e8e8;
	/* ライトパープル */
	--main-color-6: #b7a3ff;

	--wise-logo-back-ground-color: #081421;

	--sticky-color-front: #7e5bfc;
	--sticky-color-back: #f8f6ff;

	--main-font-size-1: 21px;
	--main-font-size-2: 18px;
	--main-font-size-3: 16px;
	--main-font-size-4: 14px;

	--main-font-family-1: "メイリオ", sans-serif;

	--wise-front-z-index-minus2: 9988;
	--wise-front-z-index-minus1: 9989;
	--wise-front-z-index-baseline: 9990;
	--wise-front-z-index-plus1: 9991;
	--wise-front-z-index-plus2: 9992;
	--wise-front-z-index-plus3: 9993;
	--wise-front-z-index-plus4: 9994;
	--wise-front-z-index-plus5: 9995;

	
    --wise-bg-900: #081421;
    --wise-bg-800: #0c1b2b;
    --wise-panel: color-mix(in srgb, var(--wise-bg-800) 72%, black);
    --wise-border: color-mix(in srgb, var(--wise-cyan, #39d5ff) 12%, #1c2a3a);
    --wise-panel-ink: rgba(255,255,255,0.86);
    --wise-muted-ink: rgba(255,255,255,0.64);
    --wise-cyan: #35c6ff;
    --wise-cyan-soft: color-mix(in srgb, var(--wise-cyan) 70%, white 30%);
    --wise-cyan-glow: color-mix(in srgb, var(--wise-cyan) 90%, white 10%);
    --wise-card-shadow: 0 0 8px rgba(57,213,255,.25), 0 0 18px rgba(57,213,255,.18), 0 0 36px rgba(57,213,255,.12);
    --wise-card-shadow-strong: 0 0 12px rgba(57,213,255,.32), 0 0 28px rgba(57,213,255,.22), 0 0 56px rgba(57,213,255,.16), 0 0 96px rgba(57,213,255,.10);
    --wise-radius: 12px;
    --wise-gap: 10px;
    --wise-scan-duration: 5000ms; /* 走査線が下→上に到達する時間 */
    --wise-outro-duration: 700ms; /* オーバーレイ退場 */

	--term-bg: rgba(255, 230, 230, 0.6);
    --term-bd: #f2a3a3;
    --form-bg: rgba(230, 240, 255, 0.6);
    --form-bd: #88a8f2;
    --ring: 2px;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
body {
	-webkit-text-size-adjust: 100%;
	font-family: var(--main-font-family-1) !important;
}

:where(.page-id-1417,.page-id-456,.page-id-1285,.page-id-400,.page-id-1422,.page-id-460,.page-id-1288,.page-id-404,.page-id-216,.page-id-66,.page-id-1259,.page-id-393) .site-body{
	padding: 20px 0 0 0;
}
:where(.page-id-1417,.page-id-456,.page-id-1285,.page-id-400,.page-id-1422,.page-id-460,.page-id-1288,.page-id-404,.page-id-216,.page-id-66,.page-id-1259,.page-id-393) .main-section{
	margin: 0;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* UL をシンプルに整える */
.entry-body > ul {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
}

/* LI → 下線のみのフラットデザイン */
.entry-body > ul li {
    padding: 1rem 0;
    border-bottom: 1px solid #dce2eb;
}

/* 最後のLIだけ下線なし */
.entry-body > ul li:last-child {
    border-bottom: none;
}

/* リンクは大きめで読みやすく */
.entry-body > ul li a {
    font-size: 1.5rem;
    color: #34495e;
    text-decoration: none;
    display: block;
    padding: 0.2rem 0;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

/* ホバーで左に少し動く（控えめな UI） */
.entry-body > ul li a:hover {
    color: var(--main-color-3);
    padding-left: 0.4rem;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.fontFixed{
	font-size: var(--main-font-size-1) !important;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
img {
	max-width: 100%;
	display: block;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.border {
	border: 1px solid var(--main-color-3)!important;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.site-footer-copyright p:nth-child(2) {
	display:none;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.sectionStandard{
	margin-bottom: 80px;
}
.sectionGrammarFunction{
	margin-bottom: 20px;
}
.sectionSecondContents{
	margin-bottom: 30px;
	padding-left: 20px;
}
.sectionTOC{
	margin-bottom: 100px;
}
/* .sectionContent{
	position: relative;
	z-index: 10;
} */
.divFrame{
	padding-left: 20px;
}
.divQuiz{
	margin-bottom: 100px;
}
.divBasicChoices{
	margin-bottom: 20px;
}
.divTOC{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	/* margin-top: 0px; */
	margin-bottom: 10px;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.divChoicesNone{
	display: none;
	width: calc(75% - .125em);
	max-width: none;
	/* margin-top: 2.0em;
	margin-bottom: 2.0em; */
	margin-top: 1.0em;
	margin-bottom: 1.0em;
	font-size: 1.2em;
	margin-left: auto;
	margin-right: auto;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.divChoices{
	width: calc(75% - .125em);
	max-width: none;
	display: block;
	/* margin-top: 2.0em;
	margin-bottom: 2.0em; */
	margin-top: 1.0em;
	margin-bottom: 1.0em;
	margin-left: auto;
	margin-right: auto;
	font-size: 1.2em;
}
.inputChoices,
.inputChoicesWhite{
	font-size: var(--main-font-size-3);
	width: 100%;
	color: black;
	padding-top: calc(.6em + 2px);
	padding-bottom: calc(.6em + 2px);
	border-radius: var(--vk-size-radius);
	transition: all .1s ease-in;
	box-shadow: none;
	cursor: pointer;
	display: block;
	text-align: center;
	text-decoration: none;
	overflow-wrap: break-word;
	box-sizing: border-box;

	margin-left: auto;
	margin-right: auto;
}
.inputChoices{
	border:none;
}
.inputChoicesWhite{
	border: 2px solid var(--main-color-1);
}



.aToButton {
	display: block;
	width: calc(75% - .125em);
	border-radius : var(--vk-size-radius);
	font-size: 1.2em;
	text-align: center;	/* 文字位置	 */
	cursor: pointer;	 /* カーソル	 */
	/* padding: 12px 12px; */
	padding-top: calc(.6em + 6px);
	padding-bottom: calc(.6em + 10px);
	background: var(--main-color-1);
	color: #ffffff;	 /* 文字色	 */
	line-height: 1em;	 /* 1行の高さ	*/
	transition: .3s;	 /* なめらか変化 */
	/* box-shadow: 6px 6px 3px #666666;	*/
	box-shadow: none;	/* カーソル時の影消去 */
	border: 2px solid #000066;	/* 枠の指定 */
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 6px;
}
.aToButton:hover {
	box-shadow: none;	/* カーソル時の影消去 */
	color: #000066;	 /* 背景色	 */
	background: #ffffff;	 /* 文字色	 */
}

.siteZoomContainers{
	display: flex;
	justify-content: center;
	align-items: center;
	right: 20px;
	top: 5px;
	position: fixed;
	z-index: 9999;
}
.siteZoomContainers .siteZoomContents{
	width: 30px;
	height: 30px;
	border-radius : var(--vk-size-radius);
	text-align: center;
	cursor: pointer;
	background: var(--main-color-1);
	color: #ffffff;
	border: 2px solid #000066;
	line-height: 30px;
}
.screenZoomContainers{
	display: flex;
	justify-content: center;
	align-items: center;
	right: 20px;
	top: 5px;
	position: absolute;
	z-index: 9999;
}
.screenZoomContents{
	width: 30px;
	height: 30px;
	border-radius : var(--vk-size-radius);
	text-align: center;
	cursor: pointer;
	background: var(--main-color-1);
	color: #ffffff;
	border: 2px solid #000066;
	line-height: 30px;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.divWide{
	width: calc(90% - .125em);
	max-width: none;
	display: block;
	margin-top: 2.0em;
	margin-bottom: 2.0em;
	font-size: 1.0em;
	margin-left: auto;
	margin-right: auto;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.divContent{
	padding-left: 0.2em;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.divExpand{
	margin-bottom: 60px;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.divExplanation{
	background: var(--main-color-0);
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.divInputBox{
	width: calc(75% - .125em);
	max-width: none;
	display: block;
	margin-bottom: .5em;
	margin-left: auto;
	margin-right: auto;
}
.inputBox{
	font-size: var(--main-font-size-1) !important;
	width: 100%;
	height:80px;
	color: black;
	padding-top: calc(.6em + 2px);
	padding-bottom: calc(.6em + 2px);
	border-radius: var(--vk-size-radius);
	transition: all .1s ease-in;
	box-shadow: none;
	cursor: pointer;
	display: block;
	padding: calc(.667em + 2px) calc(1.333em + 2px);
	text-align: center;
	text-decoration: none;
	overflow-wrap: break-word;
	box-sizing: border-box;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.sectionGrammarRelationHideButton{
	margin-bottom: 20px;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.contentsList{
	margin-top: 10px;
	margin-bottom: 50px;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* .fontFixed{
	font-family: var(--main-font-family-1) !important;
} */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.colorChangerHighlight{
	color: red;
	font-size: var(--main-font-size-1) !important;
}
.colorChangerHighlightEmRed{
	color: red;
	font-size: 1.1em !important;
}
.colorChangerHighlightEmBlue{
	color: blue;
	font-size: 1.1em !important;
}
.colorChangerHighlightEmBlack{
	color: black;
	font-size: var(--main-font-size-1);
	font-weight:bold;
}
.colorChangerNotHighlight{
	color: gray;
	font-size: var(--main-font-size-4) !important;
}
.boxTOC {
	padding: 0.5em 1em;
	margin: 0 1.5px 5px;
	font-weight: bold;
	/* color: #6091d3; */
	background: #FFF;
	border: solid 3px #6091d3;/*線*/
	border-radius: 10px;/*角の丸み*/
}
.boxTOCNone {
	padding: calc(0.5em + 3px) 0;
	margin: 0 1.5px 5px;
	font-weight: bold;
	/* color: #6091d3; */
	background: #FFF;
}
.boxTOC p {
	margin: 0;
	padding: 0;
}
.hTOC{
	padding-top: 30px;
	margin-top:-30px;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
::selection {
background: var(--main-color-6);
color: #333;
}
.commonTextContent{
	width: 100%;
	font-size: var(--main-font-size-1);
	color: black;
	margin-top: 10px;
	margin-bottom: 10px;
	line-height: 2.0em;
}
[contenteditable="true"]:focus
{
	outline: none;
}
.commonTextContent::selection,
.summarysContents::selection,
.grammarInsightsDisplayAreaLiText::selection
{
	background: var(--main-color-6);
	color: #333;
}
.commonTextContent::-moz-selection {
	background: var(--main-color-6);
	color: #333;
}
.commonTextContent * ::selection {
	background: var(--main-color-6);
	color: #333;
}
.commonTextContent * ::-moz-selection {
	background: var(--main-color-6);
	color: #333;
}
.commonTextContent span::selection {
	background: var(--main-color-6);
	color: #333;
}
.commonTextContent span::-moz-selection {
	background: var(--main-color-6);
	color: #333;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/*--------------------
 オリジナルのフレーム
--------------------*/
.frame {
	width: 90%;
	margin: 30px auto 20px;
	padding: 20px 20px 10px;
	border: 3px solid #aaa;
	position: relative;
	border-radius: 3px;
	background-color: white;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.frameSmall {
	width: 80%;
	margin: 30px auto 20px;
	padding: 20px 20px 10px;
	border: 3px solid #aaa;
	position: relative;
	border-radius: 3px;
	background-color: white;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.frameNonTitle {
	width: 90%;
	margin: 15px auto;
	padding: 5px 20px;
	border: 3px solid #aaa;
	position: relative;
	border-radius: 3px;
	background-color: white;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.frameTitle {
	position: absolute;
	top: 0;
	transform: translateY(-50%);
	left: 20px;
	padding: 0 5px;
	background-color: white;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.frameQuiz{
	margin-top: 50px;
	padding-top: 30px;
}
.frameTitleQuiz {
	position: absolute;
	top: 0;
	transform: translateY(-50%);
	left: 20px;
	padding: 5px 10px;
	color: black;
	font-weight: bold;
	border-radius: 5px;
	font-size: var(--main-font-size-1);
	background-color: white;
	border: 2px solid var(--main-color-1);
	border-radius: 3px;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.frameTitle .fa {
	margin-right: 5px;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.cautionRed {
	font-size: var(--main-font-size-3);
	background-color: var(--main-color-4);
	border: 2px solid var(--main-color-4);
	color: white;
	border-radius: 3px;
}
.frameRed {
	border-color: var(--main-color-4);
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.cautionDeepBlue {
	font-size: var(--main-font-size-3);
	background-color: var(--main-color-1);
	border: 2px solid var(--main-color-1);
	color: white;
	border-radius: 3px;
}
.frameDeepBlue {
	border-color: var(--main-color-1);
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.cautionLightBlue {
	font-size: var(--main-font-size-3);
	background-color: var(--main-color-1);
	border: 2px solid var(--main-color-1);
	color: white;
	border-radius: 3px;
}
.frameLightBlue {
	border-color: var(--main-color-1);
	background-color: var(--main-color-0);
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.cautionOrange {
	font-size: var(--main-font-size-3);
	background-color: var(--main-color-2);
	border: 2px solid var(--main-color-2);
	color: white;
	border-radius: 3px;
}
.frameOrange {
	border-color: var(--main-color-2);
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.cautionPurple {
	font-size: var(--main-font-size-3);
	background-color: var(--main-color-3);
	border: 2px solid var(--main-color-3);
	color: white;
	border-radius: 3px;
}
.framePurple {
	border-color: var(--main-color-3);
}
.frameInSlider {
	display: none;
}
.frameInSlider.visible{
	display: block;
}
.frameInSlider.vanishing {
	display: block;
	opacity: 0;
	transform: translateX(-100%);
	transition: opacity 0.7s ease, transform 0.7s ease;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.ulNone{
	list-style-type: none;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* 展開ボタン */
.grammarListDetails {
	font: var(--main-font-size-1) var(--main-font-family-1);
	width: 100%;
}
.grammarViewDetails,
.grammarOutlineDetails
{
	font: var(--main-font-size-1) var(--main-font-family-1);
	width: 100%;
	margin-bottom: 0px;
}
.investigateSummary {
	padding: 2px 6px;
	width: 90%;
	background-color: #ddd;
	border: none;
	box-shadow: 3px 3px 4px black;
	cursor: pointer;
	margin-left: auto;
	margin-right: auto;
}
.headingSummary {
	cursor: pointer;
	transition: background-color 0.5s, transform 0.5s !important;
}
.headingSummary.highlight,
.divGrammarOutlineInputLabel.highlight,
.divGrammarOutlineText.highlight,
.contentsSummary.highlight{
	color: black !important;
	background-color: var(--main-color-3) !important;
	transform: scale(1.05) !important;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}
.detailsDiv {
	overflow: hidden;
}
.detailsDivAddMarginBottom {
	margin-bottom: 50px;
}

.animationSlideIn{
	animation-name: slideIn;
	animation-duration: 0.7s;
	animation-timing-function: ease;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: normal;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	perspective: 1000;
}
@keyframes slideIn {
	0% {
	opacity: 0;
	-webkit-transform: translateX(64px);
	transform: translateX(64px);
	}
	99.9% ,
	to{
	opacity: 1;
	-webkit-transform: translateX(0px);
	transform: translateX(0px);
	}
}
@keyframes fadeIn {
	0% {
	opacity: 0;
	}
	99.9% ,
	to{
	opacity: 1;
	}
}
.contentsMargin{
	margin-bottom:40vh;
	margin-bottom: calc(var(--vh, 1vh) * 40);
}
@keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}

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

.japaneseMainImage {
    width: auto;
	max-height: 50vh;
    max-height: 50dvh;
}
.grammarViewContentLinksUl{
	padding-left: 0;
	align-self: flex-start;
}
.grammarViewContentLinksLi{
	display: flex;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */

.expandButtonDetails {
	width: 70%;
	background-color: var(--main-color-1);
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	margin: 10px 0 20px 0;
	padding: 5px 10px;
	transition: background-color 0.3s ease;
}
.expandButtonDetails.inGrammarExplanation {
	width: 100%;
}
.contentsSummary {
	font-size: 1.1em;
	font-weight: bold;
	color: var(--main-color-3);
	cursor: pointer;
	padding: 10px 15px;
	border-radius: 6px;
	background-color: #f1f1f1;
	transition: background-color 0.3s ease, color 0.3s ease;
}
.expandButtonDetails[open] {
	background-color: var(--main-color-0);
}
.expandButtonDetails[open] .contentsSummary {
	color: var(--main-color-3);
	background-color: #d1d6f0;
	border-radius: 6px;
	padding: 10px 15px;
}
.summarysContents{
	padding: 10px;
	background-color: #f1f1f1;
	border-radius: 8px;
	margin: 10px 15px;
	/* margin-top: 10px; */
}
.summarysContents.inGrammarExplanation{
	margin: 10px 0;
}
.summarysContents.noBackground{
	background-color: var(--main-color-0);
	margin-top: 0px;
	margin-bottom: 0px;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* 付箋風タグ */
.heading.tag {
	text-decoration: none;
	/* margin-top: 10px;
	margin-bottom: 30px; */
	padding: 0.5rem;
	/* background: #f7f7f7; */
	border-left: solid 6px;
	/* color: #58ad5a; */
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.22);
}
.heading.tagGrammarView {
	text-decoration: none;
	margin-bottom: 5px;
	padding: 0.5rem;
	/* background: #f7f7f7; */
	border-left: solid 6px;
	/* color: #58ad5a; */
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.22);
}

.heading.colorPurple {
	border-left-color: var(--main-color-3);
	color: var(--main-color-3);
}
.heading.colorPurpleBlack {
	border-left-color: var(--main-color-3);
	color: #000;
}
.heading.colorOrangeRed {
	border-left-color: orangered;
	color: #000;
}
.heading.colorLightGray {
	border-left-color: var(--sticky-color-back);
	/* border-left-color: var(--main-color-5); */
	color: #000;
}

.heading.colorNothing {
	border-left: solid 6px transparent;
	color: #000;
}

.heading.withBackgroundColor {
/* .heading.color.withBackgroundColor { */
	background-color: var(--sticky-color-back);
}
.heading.rounded {
	border-radius: 4px;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */

.termText,
.formText,
.emphasisText
{
	border-bottom: solid 2px var(--main-color-3);
	font-weight: bold;
	margin: 0 10px;
}

.underLine{
	border-bottom: solid 1px var(--main-color-3);
	font-weight:bold;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* ▼ アカウント系ページ共通レイアウト */
.accountSection .container {
    max-width: 480px;
    margin: 0 auto 3rem;
}

/* ▼ カード型コンテンツ（フォームやメッセージを囲むボックス） */
.accountSection .loginContent,
.accountSection .registerContent,
.accountSection .logoutContent,
.accountSection .profileContent,
.accountSection .changeEmailContent,
.accountSection .changePasswordContent,
.accountSection .lostPasswordContent,
.accountSection .resetPasswordContent,
.accountSection .deleteAccountContent,
.accountSection .deleteAccountCompleteContent,
.accountSection .loginAlready,
.accountSection .registerAlready {
    position: relative;
    margin: 35px 0 0 0;
    padding: 2.6rem 2rem 2rem;
    background-color: #f9fafe;
    border-left: 4px solid var(--main-color-3);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ▼ 浮いた見出し風タイトル（全ページ共通） */
.accountSection .loginTitle,
.accountSection .registerTitle,
.accountSection .logoutTitle,
.accountSection .profileTitle,
.accountSection .changeEmailTitle,
.accountSection .changePasswordTitle,
.accountSection .lostPasswordTitle,
.accountSection .resetPasswordTitle,
.accountSection .deleteAccountTitle,
.accountSection .deleteAccountCompleteTitle {
    font-size: 2rem;
    font-weight: 700;
    color: #34495e;
    background-color: #ffffff;
    padding: 0.5rem 1.2rem;
    border-radius: 8px;
    border: 1px solid #e1e5ef;
    position: absolute;
    top: -35px;
    left: 1.6rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* ▼ 文字サイズのベース */
.accountSection label,
.accountSection input,
.accountSection button,
.accountSection p,
.accountSection a {
    font-size: 1.5rem;
}

/* ▼ 共通フォームグループ */
.accountSection .formGroup {
    margin-bottom: 3.5rem;
}
.accountSection form .formGroup:last-child {
    margin-bottom: 0.1rem;
}

.accountSection .formGroup label {
    display: block;
    color: #34495e;
    margin-bottom: 0.45rem;
    font-weight: 500;
}

/* ▼ テキスト入力欄共通 */
.accountSection input[type="text"],
.accountSection input[type="email"],
.accountSection input[type="password"],
.accountSection input[type="number"] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.8rem 1rem;
    border-radius: 6px;
    border: 1px solid #d0d7e2;
    background-color: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.accountSection input[type="text"]:focus,
.accountSection input[type="email"]:focus,
.accountSection input[type="password"]:focus,
.accountSection input[type="number"]:focus {
    outline: none;
    border-color: var(--main-color-3);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.18);
}

/* ▼ チェックボックス（ログイン状態維持、削除確認など） */
.accountSection .formGroup.checkBox label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-weight: 400;
}

.accountSection .formGroup.checkBox input[type="checkbox"] {
    margin-top: 0.2rem;
}

/* ▼ エラーメッセージ共通 */
.accountSection .errorMessage {
    margin: 0 0 1.5rem;
    padding: 1rem 1.2rem;
    background-color: #fff5f5;
    border-left: 4px solid #e74c3c;
    border-radius: 6px;
}

.accountSection .errorMessage .errorItem {
    margin: 0 0 0.3rem;
    font-size: 1.4rem;
    color: #c0392b;
}

/* ▼ お知らせ・案内メッセージ系 */
.accountSection .profileNotice,
.accountSection .changeEmailNotice,
.accountSection .changeEmailInfo,
.accountSection .autoRenewActiveInfo,
.accountSection .changePasswordNotice,
.accountSection .lostPasswordNotice,
.accountSection .resetPasswordNotice,
.accountSection .deleteAccountCompleteMessageMain,
.accountSection .deleteAccountCompleteMessageDetail {
    font-size: 1.4rem;
    color: #555;
}

.accountSection .profileInfo p,
.accountSection .changeEmailInfo p,
.accountSection .autoRenewActiveInfo p {
    font-size: 1.4rem;
    margin-bottom: 3.5rem;
}

/* ▼ パスワード系ページ説明文 */
.accountSection .lostPasswordDescription,
.accountSection .resetPasswordDescription {
    font-size: 1.4rem;
    color: #555;
    margin-bottom: 2rem;
}

/* ▼ ボタン共通（見た目を統一） */
.accountSection .loginBtn,
.accountSection .registerBtn,
.accountSection .logoutBtn,
.accountSection .profileBtn,
.accountSection .changeEmailBtn,
.accountSection .changePasswordBtn,
.accountSection .lostPasswordBtn,
.accountSection .resetPasswordBtn,
.accountSection .deleteAccountBtn,
.accountSection .cancelAutoRenewBtn,
.accountSection .homeBtn {
    display: inline-block;
    padding: 0.7rem 2.2rem;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: 600;
    background-color: var(--main-color-1);
    color: #000000;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
    transition: 0.2s;
}

.accountSection .loginBtn:hover,
.accountSection .registerBtn:hover,
.accountSection .logoutBtn:hover,
.accountSection .profileBtn:hover,
.accountSection .changeEmailBtn:hover,
.accountSection .changePasswordBtn:hover,
.accountSection .lostPasswordBtn:hover,
.accountSection .resetPasswordBtn:hover,
.accountSection .deleteAccountBtn:hover,
.accountSection .cancelAutoRenewBtn:hover,
.accountSection .homeBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.accountSection .loginBtn:active,
.accountSection .registerBtn:active,
.accountSection .logoutBtn:active,
.accountSection .profileBtn:active,
.accountSection .changeEmailBtn:active,
.accountSection .changePasswordBtn:active,
.accountSection .lostPasswordBtn:active,
.accountSection .resetPasswordBtn:active,
.accountSection .deleteAccountBtn:active,
.accountSection .cancelAutoRenewBtn:active,
.accountSection .homeBtn:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
}

/* ▼ ボタンを右寄せしたい場合（formGroup 内） */
.accountSection .formGroup > button,
.accountSection .formGroup > .loginBtn,
.accountSection .formGroup > .registerBtn,
.accountSection .formGroup > .logoutBtn,
.accountSection .formGroup > .profileBtn,
.accountSection .formGroup > .changeEmailBtn,
.accountSection .formGroup > .changePasswordBtn,
.accountSection .formGroup > .lostPasswordBtn,
.accountSection .formGroup > .resetPasswordBtn,
.accountSection .formGroup > .deleteAccountBtn {
    margin-left: auto;
}

/* ▼ ログイン済み／未ログイン時のリンク（マイページ・ログインページへなど） */
.accountSection .loginAlready a,
.accountSection .registerAlready a,
.accountSection .deleteAccountCompleteHomeLink a,
.accountSection .profileContent a,
.accountSection .changeEmailContent a,
.accountSection .changePasswordContent a,
.accountSection .lostPasswordContent a,
.accountSection .resetPasswordContent a,
.accountSection .deleteAccountContent a {
    color: var(--main-color-3);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: 0.15s ease;
}

.accountSection .loginAlready a:hover,
.accountSection .registerAlready a:hover,
.accountSection .deleteAccountCompleteHomeLink a:hover,
.accountSection .profileContent a:hover,
.accountSection .changeEmailContent a:hover,
.accountSection .changePasswordContent a:hover,
.accountSection .lostPasswordContent a:hover,
.accountSection .resetPasswordContent a:hover,
.accountSection .deleteAccountContent a:hover {
    color: #2c3e50;
    border-color: var(--main-color-3);
}

/* ▼ 削除完了ページのメッセージ整形 */
.deleteAccountCompleteMessageMain {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.deleteAccountCompleteMessageDetail {
    margin-bottom: 1.2rem;
}

/* ▼ スマホ対応 */
@media (max-width: 480px) {
    .accountSection .loginContent,
    .accountSection .registerContent,
    .accountSection .logoutContent,
    .accountSection .profileContent,
    .accountSection .changeEmailContent,
    .accountSection .changePasswordContent,
    .accountSection .lostPasswordContent,
    .accountSection .resetPasswordContent,
    .accountSection .deleteAccountContent,
    .accountSection .deleteAccountCompleteContent,
    .accountSection .loginAlready,
    .accountSection .registerAlready {
        padding: 2.6rem 1.4rem 2rem;
    }

    .accountSection .loginTitle,
    .accountSection .registerTitle,
    .accountSection .logoutTitle,
    .accountSection .profileTitle,
    .accountSection .changeEmailTitle,
    .accountSection .changePasswordTitle,
    .accountSection .lostPasswordTitle,
    .accountSection .resetPasswordTitle,
    .accountSection .deleteAccountTitle,
    .accountSection .deleteAccountCompleteTitle {
        top: -24px;
        font-size: 1.8rem;
        padding: 0.45rem 1.1rem;
    }
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* .divTable{
	width: calc(75% - .125em);
} */
dl{
	display:flex;
	flex-wrap: wrap;
	width: calc(90% - .125em);
	/* border: 1px solid #ccc; */
	border-top: none;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	/* padding: 50px; */
}
dt{
	background: #ddd;
	width: 30%;
	padding: 10px;
	margin: 0;
	box-sizing: border-box;
	border: 1px solid #ccc;
	font-size: 16px;
}
dd{
	background-color: white;
	width: 70%;
	padding: 10px;
	margin: 0;
	box-sizing: border-box;
	border: 1px solid #ccc;
}
dd > p{
	margin-bottom: 5px;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* .japaneseSyllabary{
	display:block;
	position:fixed;
	bottom:40px;
	right:10px;
	z-index:1000;
} */

/* .pagetop a:before{
margin:0 5px 0 0;
content:"\f139";
font-family:"Font Awesome 5 Free";
font-weight:bold;} */

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.ribbon5 {
	/* display: inline-block; */
	position: relative;
	height: 60px;
	line-height: 60px;
	text-align: center;
	padding: 7px 0;
	font-size: 18px;/*文字サイズ*/
	background: var(--main-color-3);/*背景色*/
	color: #FFF;/*文字色*/
	box-sizing: border-box;
	/* margin: 0 0 0 auto; */
}
.ribbon5 h3 {
	margin: 0;
	padding: 0 30px 0 15px;
	border-top: dashed 1px #FFF;
	border-bottom: dashed 1px #FFF;
	line-height: 46px;
}
.ribbon5 h3:after {
	border-bottom: initial;
}

.ribbon5:after {
	position: absolute;
	content: '';
	z-index: 1;
	top: 0;
	right: 0;
	width: 0px;
	height: 0px;
	border-width: 30px 15px 30px 0px;
	border-color: transparent #fff transparent transparent;
	border-style: solid;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.article .arrow-down {
	text-align: center;
}
.article .arrow-down:after {
	content: "\f103";
	font-family: Fontawesome;
	font-size: 2rem;
	color: #eee;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.drag {
	z-index: 1001;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.sectionWise *,
#sectionWiseQuiz *,
#sortingQuizMainSection *,
.layerScreenOverlay *,
#wiseVerticalToolbarContainer *,
.wiseMenuBar,
#workshopLessonVerticalToolbarContainer *,
.workshopLessonMenuBar,
#globalVerticalToolbarContainer *,
.globalVerticalToolbarMenuBar,
.wiseSideMenuLessonContentsMenuBar,
.siteZoomContainers,
.screenZoomContainers,
.clickableInnerContainer,
.homeworkSectionButton,
#puzzlePieceSpan,
.createWordSpan,
#phraseClauseElementSpanMerged,
.phraseClauseElementSpan,
.japaneseSpan,
.quizContentsButton,
.workshopContentsButton,
.searchWordListLi
{
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

.sectionWise,
#wiseBody,
#wiseContent,
#wiseCanvasContainer,
#searchSentenceBody,
#lessonContentsBody,
#naviItemsBody
{
	overflow: hidden;
}
.sectionWise,
#sectionWiseQuiz,
#searchSentenceBody,
#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;
}
#sectionWiseCreateLayers{
	display: flex;
}

#wiseBody,
#wiseContent,
#wiseBodyQuiz,
#wiseContentQuiz,
#wiseContentCreateLayers{
	width: 100%;
	height: 100%;
	display: flex;
	position: relative;
}

.wiseContainersDisplayArea{
	width: 100%;
	height: 100%;
	display: flex;
	position: absolute;
}
.wiseContainersDisplayArea.horizontalLayout{
	width: 100%;
	height: 100%;
	padding: 50px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: flex-start;
	position: static;
}
.wiseContainersDisplayArea.horizontalLayout *{
	position: static;
	display: flex;
	border: none;
	align-self: flex-start;
}

#wiseBodyCreateLayers{
	overflow: auto;
	overscroll-behavior-x: contain;
	overscroll-behavior-y: contain;
	flex: 1;
	height: 100vh;
    height: -webkit-fill-available;
    height: 100dvh;
	display: flex;
	position: relative;
}
#wiseSideMenuCreateLayers{
	width: 50%;
	height: 100vh;
    height: -webkit-fill-available;
    height: 100dvh;
	display: flex;
	flex-direction: column;
	position: relative;
	padding: 10px;
	background-color: white;
	z-index: var(--wise-front-z-index-plus1);
}

#wiseLayersMenuCreateLayers{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
}

#wiseLayersMenuCreateNewLayerButtonContainer,
.sectionGrammarRelationButtonsContainer
{
	width: 100%;
	display: flex;
	position: relative;
}

#wiseBackgroundImageContainer{
	width: 70%;
	height: 80%;
	margin: 2% 40px 0 auto;
	z-index: 0;
}
#wiseCanvasContainer{
	display: flex;
	position: absolute;
	pointer-events: none;
}
#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;
}

.globalCanvas{
	position: fixed;
	top: 0;
	left: 0;
	z-index: var(--wise-front-z-index-plus5);
	pointer-events: none;
}


.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;
}

.puzzlePieceContainer{
	width:90%;
	/* cursor: move; */
	margin: 0;
	color: #000;
	background-color:#fff;
	border: 1px solid var(--main-color-1);;
	display: flex;
}

#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;
}
.puzzlePieceMenuContainer{

	/* temporary setting */
	width: 20px;
	height: 15px;
	transform: translateX(-30%) translateY(10%);
	/* temporary setting */

	background-color: var(--main-color-3);
	border-radius: 40vh;
	margin-left: auto;
	/* cursor: pointer; */
}

.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;
}

#puzzlePieceSpan{
	background: rgba(255,255,255,0.6);
}
.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;
}

.isEditingLayerClickableContainer,
.layerElementsVisuallyHidden{
	opacity: 0.05;
}
.isEditingLayerClickableContainer.selected{
	background-color:#FFF;
	opacity: 1;
}

.wiseLayersMenuLocked {
    opacity: 0.3;
    pointer-events: none;
    cursor: not-allowed;
}


.overlayCloseButton {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 32px;
    height: 32px;
    background: color-mix(in srgb, var(--wise-panel, #0c1b2b) 80%, black);
    color: var(--wise-panel-ink, rgba(255,255,255,0.86));
    text-align: center;
    line-height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-weight: bold;
    font-size: 18px;
    border: 1px solid var(--wise-border, #1c2a3a);
    transition: background .2s ease, box-shadow .2s ease, color .2s ease, transform .2s ease;
    box-shadow: 0 0 4px rgba(0,0,0,0.5);
}

.overlayCloseButton:hover {
    background: var(--wise-cyan, #39d5ff);
    color: #fff;
    box-shadow: 0 0 8px var(--wise-cyan), 0 0 20px var(--wise-cyan), 0 0 40px color-mix(in srgb, var(--wise-cyan) 70%, transparent);
    transform: scale(1.08);
}


#wiseOverlay,
.wiseStartOverlay,
.wiseScreensOverlay,
.wiseQuizzesScreenOverlay,
.landingPageQuizzesScreenOverlay,
#wiseMovieShootingScreenOverlay,
.layerScreenOverlay,
.wisePoliteFormPlainFormOverlay,
#plainformQuizExplanationScreenOverlay,
#grammarOutlinePreviewOverlay,
#grammarInsightsOverlay,
#shootVideoOverlay,
.workshopLessonOverlay
{
	position: fixed;
	top:0;
	left: 0;
	width: 100vw;
	height: 100%;
	visibility: hidden;
	opacity: 0;
}

#wiseOverlay,
.wiseScreensOverlay,
.wiseQuizzesScreenOverlay,
.landingPageQuizzesScreenOverlay,
#wiseMovieShootingScreenOverlay,
.layerScreenOverlay,
.wisePoliteFormPlainFormOverlay,
#plainformQuizExplanationScreenOverlay,
#grammarOutlinePreviewOverlay,
#grammarInsightsOverlay,
#shootVideoOverlay,
.workshopLessonOverlay
{
	background: rgba(0,0,0,0.6);
}

#wiseOverlay,
.quizOverlay,
#explanationScreenOverlay,
#layerUpdateScreenOverlay,
.wisePoliteFormPlainFormOverlay,
#plainformQuizExplanationScreenOverlay{
	z-index: var(--wise-front-z-index-plus4);
}

#grammarOutlinePreviewOverlay,
#grammarInsightsOverlay{
	z-index: var(--wise-front-z-index-plus1);
}



#wiseChartScreenOverlay,
#wiseQuizzesScreenOverlay,
#landingPageQuizzesScreenOverlay,
.workshopLessonOverlay
{
	z-index: var(--wise-front-z-index-plus1);
}

#layerUpdateOverrideOverlay{
	z-index: 9999;
}

#wiseOverlay{
	transition: all 0.5s ease-out;
}
#wiseOverlay.overlay-on,
.quizOverlay.overlay-on,
.wiseScreensOverlay.overlay-on,
.wiseQuizzesScreenOverlay.overlay-on,
#landingPageQuizzesScreenOverlay.overlay-on,
.layerScreenOverlay.overlay-on,
#wiseMovieShootingScreenOverlay.overlay-on,
.wisePoliteFormPlainFormOverlay.overlay-on,
#plainformQuizExplanationScreenOverlay.overlay-on,
#grammarOutlinePreviewOverlay.overlay-on,
#grammarInsightsOverlay.overlay-on,
.workshopLessonOverlay.overlay-on
{
	visibility: visible;
	opacity: 1;
}

#wiseOverlay.spanOpen{
	background: rgba(0,0,0,1);
	visibility: visible;
	opacity: 1;
}

.wiseStartOverlay{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(8, 20, 33, 0.95);
	background-color: color-mix(in srgb, var(--wise-logo-back-ground-color) 95%, transparent);
    backdrop-filter: blur(1px);
	transition: opacity 0.6s ease, visibility 0.6s ease, transform 0.6s ease;
    pointer-events: none;
	transform: translateZ(0);
}
#wiseOpeningOverlay{
    flex-direction: column;
    gap: .75rem;
    min-height: 100dvh;
}

#wiseWaitOverlay,
#wiseOpeningOverlay
{
	z-index: 9998;
}
#wiseScanOverlay{
	z-index: 9997;
}

.wiseStartOverlay.overlay-on{
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

#wiseWaitOverlayLogo{
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    opacity: 0;
    animation: wiseLogoCycle 8s ease-in-out infinite;
    animation-play-state: paused;
    will-change: opacity, transform;
}

#wiseWaitOverlay.overlay-on #wiseWaitOverlayLogo{
    animation-play-state: running;
}

#wiseOpeningOverlayLogo {
    height: 50%;
    /* height: 80%; */
    width: auto;
    max-height: 80%;
    max-width: 100%;
    object-fit: contain;
}

#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 {
    position: relative;
    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;
}


.quizOverlay,
.wiseScreensOverlay,
.wiseQuizzesScreenOverlay,
#landingPageQuizzesScreenOverlay,
.layerScreenOverlay,
#wiseMovieShootingScreenOverlay,
.wisePoliteFormPlainFormOverlay,
#plainformQuizExplanationScreenOverlay,
#grammarOutlinePreviewOverlay,
#grammarInsightsOverlay,
.workshopLessonOverlay
{
	display: flex;
	justify-content: center;
	align-items: center;
}
#explanationScreenOverlay{
	flex-direction: column;
}

#shootVideoOverlay{
	z-index: 9999;
	opacity: 0;
}

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,
.searchSentenceModal ul,
.lessonContentsModal ul,
.naviItemsModal ul,
#searchSentenceContentResultUl,
#wiseLayersMenuUl,
.layerUpdateScreenSideMenuUl,
#plainformQuizExplanationScreenExplanationUl,
.grammarInsightsModal ul,
.grammarInsightsDisplayAreaUl,
.wiseSideMenuLessonContentsModal ul,
.quizUsersManualScreenSectionUl,
#quizFeedbackScreenContentExplanationUl,
#quizInflectionScreenUl,
.homeworkUl,
.grammarInsightsHomeworkLinkDisplayAreaUl,
.wiseMapUXWaypointContainerUl,
#layerUpdateOverrideScreenlayerUpdateOverridesUl,
.wiseMapScreenListDisplayAreaUl,
.grammarViewContentLinksUl,
.workshopLessonsUl,
.workshopManageStatusUl
{
	list-style-type: none;
}
.quizUsersManualScreenSectionUl li,
.quizFeedbackScreenContentExplanationLi
{
	font-size: var(--main-font-size-1);
}
.grammarInsightsDisplayAreaUl{
	text-align: left;
}
.grammarInsightsDisplayAreaLi
{
	display: flex;
	margin-bottom: 30px;
}
.grammarInsightsDisplayAreaLi.flexDirectionColumn{
	flex-direction: column;
}
.grammarInsightsDisplayAreaLiContainer{
	display: flex;
	font-size: var(--main-font-size-1);
	align-items: center;
}
.grammarInsightsDisplayAreaLiDivButtonsContainer,
.homeworkLiButtonsContainer
{
	margin: 0 20px 0 0;
}
.grammarInsightsDisplayAreaLiDivTextsContainer,
.homeworkLiTextsContainer
{
	margin: 0 20px 0 20px;
}
.grammarOutlineCreateAreaQuizContainer{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.grammarOutlineCreateAreaAddContents{
	display: inline;
    width: auto;
	word-wrap: break-word;
	white-space: normal;
}
.wiseModal:not(#wiseSideMenuGrammarExplanation,
#wiseSideMenuLessonContents) li:hover,
#explanationScreenExplanationUl li:hover,
.searchSentenceModal 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;
}

.layerUpdateScreenSideMenuUsedGrammarIdSelectedGrammartLi{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 0 0 30px 0;
}

.editButtonsContainer,
.layerNamesContainer,
.layerSortButtonsContainer,
.wiseSideMenuCallAlreadyregisteredSentenceListLi,
.registeredSentenceNamesContainer,
.registeredSentenceSortButtonsContainer,
.layerUpdateScreenLayerElementsDisplayAreaLi,
.layerElementNamesContainer
{
	display: flex;
	align-items: center;
}

.layerViewExplanationButtonContainer{
	margin: 0 0 0 20px;
	background: #FFF;
	border: 2px solid var(--main-color-1);
	cursor: pointer;
	min-width: 50px;
	padding: 4px 8px;
	text-align: center;
}

.wiseSideMenuContents,
#explanationScreenExplanationContainer,
.searchSentenceSideMenuContents,
.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%;
}

.editButtonsContainer
{
	display: flex;
	flex-direction: column;
}

.layerNamesContainer
{
	margin-left: 20px;
}

.layerEditButton
{
	white-space: nowrap;
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
}

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

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

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

.wiseSideMenuTitleContainer,
.searchSentenceSideMenuTitleContainer,
.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,
.selectedLiSearchSentenceSideMenuContents,
.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;
}

.hidden
{
	display: none !important;
}

.grammarOutlineUl,
.divGrammarOutlineGrammarsUl,
.grammarOutlineRadioContainer.hiddenByGrammarOutlineRadio
{
	display: none;
}

.wiseSideMenuMemoPadTextareas{
	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;
}

.wiseSideMenuLoading,
.searchSentenceSideMenuLoading,
.lessonContentsSideMenuLoading,
.grammarInsightsSideMenuLoading,
.layerUpdateOverrideScreenDisplayAreaLoading,
.globalSideMenuLoading,
.wiseSideMenuLessonContentsLoading,
.grammarInsightsHomeworkLinkDisplayAreaLeftContainerLoading,
.workshopLessonManageStatusLoading
{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: auto;
	/* height: 100%; */
}


.Loading-hidden{
	display: none !important;
}

.wiseSideMenuLoadingSpinner,
.searchSentenceSideMenuLoadingSpinner,
.lessonContentsSideMenuLoadingSpinner,
.grammarInsightsSideMenuLoadingSpinner,
.layerUpdateOverrideScreenDisplayAreaLoadingSpinner,
.globalSideMenuLoadingSpinner,
.wiseSideMenuLessonContentsLoadingSpinner,
.grammarInsightsHomeworkLinkDisplayAreaLeftContainerLoadingSpinner,
.workshopLessonManageStatusLoadingSpinner
{
	width: 40px;
	height: 40px;
	border: 4px solid #f3f3f3;
	border-top: 4px solid #3498db;
	border-radius: 50%;
	animation: spin 2s linear infinite;
}

#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;
}

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

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

.itemOfPhraseClauseContainer{
	display: none;
}
/* ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー */
.searchSentenceModal,
.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;
}
.searchSentenceModal,
.lessonContentsModal,
.naviItemsModal,
.grammarInsightsModal{
	z-index: 9999;
}
.wiseSideMenuLessonContentsModal{
	z-index: var(--wise-front-z-index-plus4);
}

#searchSentenceBody{
	display: flex;
	align-items: center;
	justify-content: center;
}

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

#searchSentenceContent,
#lessonContentsContent,
#naviItemsContent
{
	width: 80%;
	height: 80%;
}
#searchSentenceContentUlContainer{
	width: 100%;
	height: 90%;
	overflow: auto;
	overscroll-behavior-y: contain;
}
.searchSentenceContentResultLi,
.grammarInsightsDisplayAreaLiText,
.homeworkLiText
{
	font-size: var(--main-font-size-1);
}

#lessonContentsSideMenuAddContents,
#naviItemsSideMenuAddContents,
#grammarInsightsSideMenuAddContents,
#grammarInsightsSideMenuAddContentsFromCategory,
#grammarInsightsSideMenuAddContentsFromHistory,
#wiseSideMenuLessonContentsSearchGrammar{
	left: -100%;
}
#searchSentenceSideMenuSelectedWord,
#lessonContentsSideMenuSelectedContents,
#naviItemsSideMenuSelectedContents,
#grammarInsightsSideMenuSelectedContents{
	right: -100%;
}

#lessonContentsSideMenuAddContents.lessonContentsModal-open,
#naviItemsSideMenuAddContents.naviItemsModal-open,
#grammarInsightsSideMenuAddContents.grammarInsightsModal-open,
#grammarInsightsSideMenuAddContentsFromCategory.grammarInsightsModal-open,
#grammarInsightsSideMenuAddContentsFromHistory.grammarInsightsModal-open,
#wiseSideMenuLessonContentsSearchGrammar.wiseSideMenuLessonContentsModal-open{
	left: 0 !important;
}
#searchSentenceSideMenuSelectedWord.searchSentenceModal-open,
#lessonContentsSideMenuSelectedContents.lessonContentsModal-open,
#naviItemsSideMenuSelectedContents.naviItemsModal-open,
#grammarInsightsSideMenuSelectedContents.grammarInsightsModal-open{
	right: 0 !important;
}

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

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

.grammarInsightsSideMenuSelectedContentsButtonContainer{
	display: flex;
	justify-content: right;
}

.leftPositionModalContents{
	padding-left: 50px;
}
/* ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー */
/* ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー */
.sampleSentenceListUl{
	list-style-type: none;
}
.sampleSentenceListLi{
	margin-bottom: 30px;
}
.sampleSentenceListLiButtonsContainer{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
}
.sampleSentenceListLiButtonsContainer > * {
	margin: 0 5px;
}
.sampleSentenceListTextDiv{
	display: flex;
	flex-wrap: wrap;
}
.sampleSentenceListAnswerSpan{
	font-size: 1.1em !important;
}
.sampleSentenceListAnswerSpan,
.grammarInsightsDisplayAreaLiTextJapaneseText
{
	color: var(--main-color-3);
	margin-left: 20px;
}
.sampleSentenceListFuriganaSpan{
	color: blue;
	font-size: 1.1em !important;
	margin-left: 20px;
}
/* ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー */
#myLessonsForTeacherSearchGrammarDropDownMenuArea,
#wiseSideMenuLessonContentsDropDownSelectRoomArea,
#grammarInsightsSideMenuAddContentsFromCategoryDropDownMenuArea,
#grammarInsightsSideMenuAddContentsFromHistoryDropDownMenuArea
{
	display: flex;
	align-items: center;
	justify-content: center;
}
#myLessonsForTeacherSearchGrammarChangeSelection,
#myLessonsForTeacherDropDownChangeSelectionArea,
#myLessonsForTeacherDropDownSelectRoomArea{
	width: calc(75% - 0.125em);
	margin: 0 auto 0 auto;
}
#wiseSideMenuLessonContentsSelectRoom,
#grammarInsightsSideMenuAddContentsFromCategorySelectId
{
	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;
} */
/* ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー */
.wiseContextMenu{
	position:fixed;
	left:0px;
	top:0px;
	padding:0 20px;
	border:1px solid #000;
	background-color:#fff;
	z-index: var(--wise-front-z-index-plus3);
}

.wiseContextMenu ul{
	margin: 0 !important;
	padding: 0 !important;
	list-style-type: none;
}
.wiseContextMenu li,
.layerUpdateScreenSideMenuUsedGrammarIdSelectedGrammartLi
{
	cursor: pointer;
}
.wiseContextMenu 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;
}

#wiseMovieShootingScreen{
	height: 90%;
	aspect-ratio: 9 / 16;
	margin: auto;
	background-color: white;
}

/* ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー */
#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);
}

/* ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー */

#sortingQuizContentsSection{
	height: 60vh;
}
#quizBody,
#sortingQuizBody{
	width: 90%;
	height: auto;
	margin: auto;
	border: 1px solid #999;
	position: relative;
}
#sortingQuizBody.sortingQuizFull{
	height: 90%;
}

#quizPuzzleContents,
#sortingQuizContents{
	width: 100%;
	height: 100%;
	display: flex;
}

#quizPuzzleContentsLeftContainer,
#quizPuzzleContentsRightContainer,
#sortingQuizContentsLeftContainer,
#sortingQuizContentsRightContainer{
	height: 100%;
	display: flex;
	flex-direction: column;
}

#quizPuzzleContentsLeftContainer,
#sortingQuizContentsLeftContainer{
	width:30%;
}
#quizPuzzleContentsRightContainer,
#sortingQuizContentsRightContainer{
	width:70%;
}
#sortingQuizContentsLeftContainer.sortingQuizFlex,
#sortingQuizContentsRightContainer.sortingQuizFlex
{
	width:50%;
}
#quizMenuBarTools,
#correctAnswer,
#sortingQuizMenuBarTools,
#sortingQuizQuestion{
	height: 15%;
	overflow:auto;
	overscroll-behavior-x: contain;
	overscroll-behavior-y: contain;
}

#quizPuzzlePieceListContainer,
#quizPuzzleZone,
#sortingQuizPieceListContainer,
#sortingQuizZone{
	width: 100%;
	height: 85%;
	overflow:auto;
	overscroll-behavior-x: contain;
	overscroll-behavior-y: contain;
}

#sortingQuizPieceListContainer.sortingQuizFlex,
#sortingQuizZone.sortingQuizFlex{
	height: 100%;
}

#quizPuzzlePieceListContainer,
#sortingQuizPieceListContainer{
	background-color:rgb( 185, 244, 251);
}


.quizPuzzlePieceListContainer ul{
	list-style-type: none;
	padding-left: 40px;
}
#sortingQuizPieceListContainerUl{
	list-style-type: none;
	padding-left: 0.5em;
}

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

.sortingQuizPieceListContainerLi.selected{
	visibility: hidden;
}

.sortingQuizPieceListContainerLiJapanese{
	width: 80%;
	background-color: white;
}

.sortingQuizPieceListContainerLiButtonsContainer,
.grammarInsightsDisplayAreaLiDivButtonsContainer,
.homeworkLiButtonsContainer
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* align-items: center; */
}

#correctAnswer,
#sortingQuizQuestion{
	font-size:30px;
	padding:0 0 0 10px;
}
#quizPuzzleZone{
	position: relative;
	display: flex;
	background-color:var(--main-color-1);
}
#sortingQuizZone{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-content: flex-start;
	background-color:var(--main-color-1);
}

.quizPuzzleFrameContainer{
	/* width:50px;
	height:50px; */
	background-color:#fff;
	position: absolute;
	display: flex;
}
.quizPuzzleFrameInnerContainer{
	width:100%;
	height:100%;
	line-height:1;
	left: 0;
	position: absolute;
}
.quizPuzzleFrameLeftLinkMarker,
.quizPuzzleFrameRightLinkMarker{
	width:10px;
	height:10px;
	background-color: #000;
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
	visibility: hidden;
}
.quizPuzzleFrameLeftLinkMarker{
	left: 0;
}
.quizPuzzleFrameRightLinkMarker{
	right: 0;
}

#quizMenuBarTools,
#sortingQuizMenuBarTools{
	width: 100%;
	display: flex;
	flex-wrap:wrap;
	align-items: center;
	background-color: #fff;
	border: solid 1px #ddd;
}

#sortingQuizMenuBarButtonChangeSizeContainer{
	display: flex;
	flex-wrap:nowrap;
	align-items: center;
}

.quizScreenModal,
.explanationScreenModal,
.wiseChartScreenModal,
.layerUpdateScreenModal,
#layerUpdateOverrideScreen,
#wiseChartScreenChart,
.wiseQuizzesScreenModal,
.landingPageQuizzesScreenModal,
#wisePoliteFormPlainFormChart,
#plainformQuizExplanationScreen,
.grammarOutlinePreviewScreenModal,
.workshopLessonModal
{
	width: 80%;
	background-color: white;
	padding: 20px;
	border-radius: 5px;
	text-align: center;
	overflow: auto;
	overscroll-behavior-y: contain;
	position: relative;
}

.quizScreenModal,
#plainformQuizExplanationScreen,
.grammarOutlinePreviewScreenModal,
.workshopLessonModal
{
	height: 80vh;
	height: calc(var(--vh, 1vh) * 80);
}
#wiseChartScreenChart,
#wiseQuizzesScreen,
#landingPageQuizzesScreen,
#wisePoliteFormPlainFormChart
{
	display: flex;
	flex-direction: column;
	height: 90vh;
	height: calc(var(--vh, 1vh) * 90);
	overflow-x: hidden;
}

#wiseChartScreenChartSection,
#wisePoliteFormPlainFormTableSection,
#layerUpdateOverrideScreen
{
	height: 90%;
	overflow:auto;
	display: flex;
	flex-direction: column;
}
#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;
}

.wiseChartScreenModal,
.layerUpdateScreenModal{
	flex: 1;
	max-width: 40%;
	height: 90vh;
	height: calc(var(--vh, 1vh) * 90);
	margin: 0 2.5%;
}

#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,
.plainformQuizExplanationScreenButton
{
	background-color: var(--main-color-1);
	color: black;
	border: none;
	border-radius: 5px;
	padding: 10px 20px;
	font-size: 18px;
	margin:5px;
}

.quizContentsButtonConfirm
{
	background-color: var(--main-color-3);
}

#grammarOutlinePreviewDisplayAreaSection{
	width: 100%;
	height: 60%;
}
#grammarOutlinePreviewDisplayArea{
	width: 100%;
	height: 100%;
	overflow:auto;
}

#grammarOutlinePreviewScreenButtonsContainer,
#grammarInsightsScreenButtonsContainer{
	display: flex;
	/* justify-content: center; */
	flex-wrap: wrap;
}
.grammarOutlinePreviewScreenButtonAutoHidden{
	display: none;
}
.grammarOutlinePreviewScreenButtonAutoHidden.visible{
	display: block;
}

#grammarInsightsScreen{
	width: 80%;
	height: 80vh;
	height: calc(var(--vh, 1vh) * 80);
	background-color: white;
	padding: 20px;
	border-radius: 5px;
	position: relative;
	display: flex;
	flex-direction: column;
}
#grammarInsightsScreenButtonsSection{
	display: flex;
	justify-content: center;
	margin-bottom: 15px;
}
#grammarInsightsDisplayAreaSection{
	flex-grow: 1;
	width: 100%;
	text-align: center;
	overflow:auto;
	overscroll-behavior-y: contain;
}
#grammarInsightsDisplayAreaSection .grammarOutlineDetailsSummarys  {
	text-align: left;
}
#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;
}

.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 *,
.plainformQuizExplanationScreenExplanationLi{
	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;
}
/* ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー */
#quizHistoryScreenTableContainer th,
#quizHistoryScreenTableContainer td {
    font-size: var(--main-font-size-1);
}

/* ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー */

.globalModal{
	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;
}
.globalModal.dragging{
	transition: none;
}
.globalModal.globalModal-open {
	right: 0 !important;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.grammarOutline{
	display: flex;
	flex-direction: column;
	overflow: auto;
}
.grammarOutline ul li ul {
	margin-bottom: .75em;
	margin-left: 24px;
}

.grammarOutline ul li ul li {
	margin-bottom: .25em;
	position: relative;
}

.grammarOutline ul li ul li::before {
	content: "";
	position: absolute;
	top: -0.5em;
	left: -16px;
	width: 10px;
	height: calc(100% + .75em);
	border-left: 1px solid #3972b2;
}

.grammarOutline ul li ul li:last-child::before {
	height: calc(1em + .25em);
}

.grammarOutline ul li ul li::after {
	content: "";
	position: absolute;
	top: .75em;
	left: -16px;
	width: 10px;
	border-bottom: 1px solid #3972b2;
}

.grammarOutline ul li{
	list-style-type: none;
}

.divGrammarOutlineContainer{
	position: relative;
	display: flex;
	align-items: center;
}
.divGrammarOutlineContentsContainer{
	display: flex;
	flex-direction: column;
}
.divGrammarOutlineLabelContainer{
	display: flex;
	position: relative;
}

.grammarOutlineLabelButtonOpener{
	color: black;
	padding: 1px 6px;
	border-width: 2px;
	border-style: outset;
	border-color: black;
}
.grammarOutlineLabelButtonGrammarOutlineUlOpener,
.grammarOutlineLabelButtonGrammarsUlOpener
{
	background: var(--main-color-3);
}
.grammarOutlineLabelButtonOpener.completed{
	color: black;
	background: white;
}
.grammarOutlineLabelButtonGrammarOutlineUlOpener.completed,
.grammarOutlineLabelButtonGrammarsUlOpener.completed
{
	border-color: var(--main-color-3);
}
.grammarOutlineLabelButtonExplanation{
	font-size: var(--main-font-size-1);
	background: white;
    color: var(--main-color-3);
    padding: 3px 6px;
	border-style: none;
    /* border-style: solid;
    border-color: var(--main-color-1); */
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}

.divGrammarOutlineCorner {
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	border-right: 20px solid var(--main-color-3);
	border-bottom: 20px solid transparent;
	opacity: 0.8;
}

.divGrammarOutlineGrammarsLi{
	display: flex;
	vertical-align: top;
	/* margin-left: 35px; */
	align-items: center;
	flex-wrap: wrap;
}
.basicGrammarLi,
.derivedGrammarLi{
	display: flex;
}

.grammarOutlineCheckbox.hiddenByGrammarScope,
.grammarOutlineLabelButton.hiddenByGrammarScope,
.divGrammarOutlineGrammarsLi.hiddenByGrammarScope,
.derivedGrammarsButtonOpener.hiddenByGrammarScope,
.grammarOutlineRadioContainer.hiddenByGrammarScope,
.homeworkHidden
{
	opacity: 0.1;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.derivedGrammarsButtonOpener{
	display: block;
}
.grammarOutlineUl.completed,
.divGrammarOutlineGrammarsUl.completed
{
	display: block !important;
}
.divGrammarOutlineButtonInput{
	font: var(--main-font-size-1) var(--main-font-family-1);
	cursor: pointer;
	color: black;
	padding: 1px 6px;
	border: none;
	margin: 5px 0 5px 0;
}
.divGrammarOutlineTextContainer{
	display: flex;
	border-width: 2px;
	border-style: outset;
	border-color: black;
}
.divGrammarOutlineText{
	font: var(--main-font-size-1) var(--main-font-family-1);
	cursor: default;
	background-color: white;
	color: black;
	padding: 1px 6px;
	margin: 0;
	white-space: nowrap;
}
.divGrammarOutlineInputLabel{
	font: var(--main-font-size-1) var(--main-font-family-1);
	cursor: default;
	background-color: white;
	color: black;
	padding: 1px 6px;
	margin: 0;
	white-space: nowrap;
}
.divGrammarOutlineInputLabel.search-target,
.divGrammarOutlineText.search-target{
	background-color: var(--main-color-3);
}

.summaryGrammarOutline{
	font-size: 13px;
	color: white;
	background-color: orangered;
	list-style: none;
	border-radius: 4px;
	width:fit-content;
	margin: 2px 0 10px 0;
	padding: 0 10px;
}
/* .divFrameGrammarOutline{
	overflow: auto;
} */
.frameGrammarOutline {
	width: 90%;
	margin: 10px auto;
	padding: 5px 5px;
	border: 3px solid #aaa;
	position: relative;
	overflow: auto;
	border-radius: 3px;
	background-color: white;
	border-color: orangered;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.mainItemsContainer{
	display: flex;
}
.mainItemsLRContainer{
	margin: auto;
	padding: 10px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.mainItemsLRContainer > * {
	flex: 1;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.registeredSentenceToggleButton,
.layerElementToggleButton,
.waypointToggleButton,
.layerUpdateOverrideToggleButton
{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 5;
	opacity: 0;
	cursor: pointer;
}
.registeredSentenceToggleLabel,
.layerElementToggleLabel,
.waypointToggleLabel,
.layerUpdateOverrideToggleLabel {
    width: 75px;
    height: 35px;
    background: rgba(0, 0, 0, 0.1);
    position: relative;
    display: inline-block;
    border-radius: 40px;
    transition: 0.4s;
    box-sizing: border-box;
    border: 1px solid var(--wise-border, #1c2a3a);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.4);
}

.registeredSentenceToggleLabel:after,
.layerElementToggleLabel:after,
.waypointToggleLabel:after,
.layerUpdateOverrideToggleLabel:after {
    content: "";
    position: absolute;
    width: 35px;
    height: 35px;
    border-radius: 100%;
    left: 0;
    top: 0;
    z-index: 2;
    background: linear-gradient(180deg, #fff, #ddd);
    box-shadow: 0 0 6px rgba(0,0,0,0.4);
    transition: 0.4s;
}

/* ON状態：背景をシアン発光に */
.registeredSentenceToggleButton:checked + .registeredSentenceToggleLabel,
.layerElementToggleButton:checked + .layerElementToggleLabel,
.waypointToggleButton:checked + .waypointToggleLabel,
.layerUpdateOverrideToggleButton:checked + .layerUpdateOverrideToggleLabel {
    background: linear-gradient(180deg, color-mix(in srgb, var(--wise-cyan, #39d5ff) 40%, #0c1b2b), var(--wise-cyan, #39d5ff));
    box-shadow: 0 0 8px var(--wise-cyan), 0 0 22px color-mix(in srgb, var(--wise-cyan) 70%, transparent);
    border-color: color-mix(in srgb, var(--wise-cyan) 50%, var(--wise-border, #1c2a3a));
}

.registeredSentenceToggleButton:checked + .registeredSentenceToggleLabel:after,
.layerElementToggleButton:checked + .layerElementToggleLabel:after,
.waypointToggleButton:checked + .waypointToggleLabel:after,
.layerUpdateOverrideToggleButton:checked + .layerUpdateOverrideToggleLabel:after {
    left: 40px;
    background: linear-gradient(180deg, #e9fcff, #c7f6ff);
    box-shadow: 0 0 8px var(--wise-cyan), 0 0 20px color-mix(in srgb, var(--wise-cyan) 70%, transparent);
}

/* コンテナはそのままでもOKですが、暗背景に調整するなら */
.registeredSentenceToggleButtonContainer,
.layerElementToggleButtonContainer,
.waypointToggleButtonContainer,
.layerUpdateOverrideToggleButtonContainer {
    position: relative;
    width: 75px;
    height: 35px;
    margin-left: 20px;
}


.layerUpdateScreenLayerElementsDisplayAreaLi {
    display: flex;
    flex-direction: column;
    padding: 12px;
    border-bottom: 1px solid #ddd;
    gap: 8px;
}

.layerElementNamesContainer {
    font-weight: bold;
    margin-bottom: 6px;
}

.layerElementEditContainer{
	display: flex;
}

.layerElementToggleButtonContainer {
    display: flex;
    align-items: center;
    gap: 6px;
}

.layerElementInputContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
}

.layerElementInputPair {
    display: flex;
    align-items: center;
    gap: 6px;
}

.layerElementInputLabel {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.layerElementFormIdSelect,
.layerElementVoiceIdSelect {
    padding: 4px 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    min-width: 100px;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.editContentsContainer{
	display: flex;
	margin-bottom: 20px;
}
.mainEditContainer{
	flex: 1;
}
.mainEditFields{
	display: flex;
}
.lessonContentsSideMenuSelectedContentsNamesSpan,
.naviItemsSideMenuSelectedContentsNamesSpan
{
	padding: 5px 10px 5px 10px;
}

.editContentsRadioContainer input[type="radio"],
.quizFeedbackScreenContentExplanationRadioContainer input[type="radio"],
.grammarOutlineRadioContainer input[type="radio"],
.grammarInsightsRadioContainer input[type="radio"],
.workshopLessonRadioContainer input[type="radio"]
{
	display: none;
}

.editContentsRadioContainer label,
.quizFeedbackScreenContentExplanationRadioContainer label,
.grammarOutlineRadioContainer label,
.grammarInsightsRadioContainer label,
.workshopLessonRadioContainer label
{
	display: inline-block;
	padding: 10px;
	background-color: #f0f0f0;
	border-radius: 50%;
	cursor: pointer;
	margin-right: 10px;
	transition: background-color 0.3s ease;
}
.grammarOutlineRadioContainer label
{
	font-size: var(--main-font-size-3);
	padding: 5px;
	margin-right: 0px;
}

.editContentsRadioContainer input[type="radio"]:checked + label,
.quizFeedbackScreenContentExplanationRadioContainer input[type="radio"]:checked + label,
.grammarOutlineRadioContainer input[type="radio"]:checked + label,
.grammarInsightsRadioContainer input[type="radio"]:checked + label,
.workshopLessonRadioContainer input[type="radio"]:checked + label,
.grammarInsightsHomeworkLinkDisplayAreaRightContainerDaySelector.selected,
.grammarInsightsHomeworkLinkDisplayAreaRightContainerTaskTypeContainer.selected
{
	background-color: var(--main-color-3);
	color: white;
}

#grammarInsightsHomeworkLinkDisplayArea{
	height: 100%;
}

#grammarInsightsHomeworkLinkDisplayAreaDualPaneContainer {
	display: flex;
	width: 100%;
	height: 95%;
}

#grammarInsightsHomeworkLinkDisplayAreaLeftContainer {
	width: 30%;
	height: 100%;
	border-right: 1px solid #ccc;
	padding: 10px;
	display: flex;
	flex-direction: column;
}

#grammarInsightsHomeworkLinkDisplayAreaRightContainer {
	width: 70%;
	height: 100%;
	padding: 10px;
	display: flex;
	flex-direction: column;
}

#grammarInsightsHomeworkLinkDisplayAreaRightContainerButtonsContainer {
	display: flex;
	gap: 10px;
	margin-bottom: 10px;
}

.grammarInsightsHomeworkLinkDisplayAreaRightContainerDayStatusContainer {
	display: flex;
	gap: 5px;
	flex-grow: 1;
    overflow-y: hidden;
}

.grammarInsightsHomeworkLinkDisplayAreaRightContainerDayStatusContainerDynamic,
.grammarInsightsHomeworkLinkDisplayAreaRightContainerDayStatusContainerStatic {
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 1;
	overflow-y: auto;
}




.grammarInsightsHomeworkLinkDisplayAreaRightContainerTaskTypeContainer {
	width: 100%;
	border: 1px solid #ccc;
	padding: 5px;
}

#grammarInsightsHomeworkLinkDisplayAreaLeftContainerUl{
	overflow-y: auto;
}

.grammarInsightsHomeworkLinkDisplayAreaRightContainerTaskTypeContainer.selected 
.grammarInsightsHomeworkLinkDisplayAreaRightContainerUl,
.grammarInsightsHomeworkLinkDisplayAreaRightContainerTaskTypeContainer.selected 
.grammarInsightsHomeworkLinkDisplayAreaRightContainerUl li {
	color: black;
}

.homeworkSection{
	margin-bottom: 150px;
}

.homeworkContentContainer{
	margin-top: 20px;
	margin-bottom: 80px;
	padding: 0 20px 0 20px;
}
.homeworkOl{
	list-style: decimal;
	list-style-type: upper-roman;
	list-style-position: outside;
}

.homeworkLi{
	margin-bottom: 30px;
}
.homeworkLiContent{
	display: flex;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.html2canvasHiddenTarget{
	display: none !important;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.hudContainer {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background: rgba(0, 0, 0, 0.7); /* 背景を半透明に */
	color: white;
	display: flex;
	justify-content: space-between;
	padding: 10px 20px;
	box-sizing: border-box;
	flex: 1;
}

.hudNavButton {
	width: 10%;
	background: var(--main-color-3);
	color: white;
	border: none;
	padding: 10px 20px;
	cursor: pointer;
	border-radius: 5px;
}

.hudNavButton:hover {
	background: var(--main-color-6);
}

#hudContainerDisplayArea {
	flex-grow: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: white;
}

#hudStartButton {
	background: var(--main-color-1);
	color: white;
	padding: 10px 20px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.practiceSentencesTableContainer{
	overflow: auto;
	margin-bottom: 50px;
}
.practiceSentencesA{
	color: black;
	font-size: var(--main-font-size-1);
	white-space: nowrap;
	display: inline-block;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.quizOverlay
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}


@media (max-width: 576px){
	
	#sectionWiseCreateLayers{
		flex-direction: column;
		padding-bottom: env(safe-area-inset-bottom);
	}
	#wiseBodyCreateLayers{
		width: 100%;
        flex: 0 0 30%;
    }
	
    #wiseSideMenuCreateLayers{
		width: 100%;
        flex: 1;
        min-height: 0;
    }
}
@media (min-width: 577px) and (max-width: 768px) {
	.wiseLayersMenuLi{
		margin-bottom: 20px;
	}
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
#layerUpdateScreenLayerElements{
	max-width: 70%;
}

#layerUpdateScreenGrammarIdInput{
	-webkit-text-security: disc;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
#quizContentsContainer{
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;
	text-align: left !important;
	flex-grow: 1;
}

.sectionQuizContents{
	flex: 1;
	min-width: 40%;
	padding: 20px;
	background: #f5f5f5;
	border-radius: 10px;
}

/* スマホ対応（幅600px以下）で縦並びに */
@media (max-width: 576px) {
	#quizContentsContainer {
		flex-direction: column;
	}
	.sectionQuizContents {
		min-width: 100%;
	}
}

.quizItems,
.quizChoices
{
	margin-bottom: 20px;
}

.quizItemMargin{
	margin-bottom: 100px;
}

.quizHeader{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
}

.quizPrompt,
.quizTranslation {
	font-size: calc(var(--main-font-size-1) * 1.2);
	font-weight: bold;
	text-align: left;
	color: var(--primary-text-color);
	background: rgba(255, 255, 255, 0.9);
	padding: 10px 20px;
	border-radius: 8px;
	box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
	margin: 5px 0;
	display: block;
}

.quizInteraction .quizChoices
{
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 10px;
}

input.quizInput {
	font-size: var(--main-font-size-1);
	margin: 20px 0 !important;
}

.quizChoice {
	display: flex;
	align-items: center;
	font-size: var(--main-font-size-1);
	background: var(--main-color-0);
	padding: 8px 12px;
	border-radius: 5px;
	transition: background 0.3s;
}

.quizChoice:has(input[type="radio"]:checked) {
	background-color: var(--main-color-3);
	color: white;
}

.quizChoice input[type="radio"] {
	display: none;
}

.quizChoice:hover {
	background: var(--main-color-1);
}


.quizItemButton,
.quizFeedbackScreenContentExplanationToGrammarButton
{
	background-color: var(--main-color-3);
}

.quizContentsNoticeContainer{
	margin-top: 50px;
}

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

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* W.I.S.E. MAP */
#wiseMapScreenOverlay {
	flex-direction: column;
	height: 100dvh; 
    padding-top: 5%;
    padding-bottom: 5%;
	gap: 3%;
    z-index: var(--wise-front-z-index-plus1);
	transition:
        opacity 0.8s ease,
        transform 0.8s ease,
        visibility 0.8s ease;
}
#wiseMapScreenOverlay.overlay-on
{
	visibility: visible;
	opacity: 1;
	transition:
        opacity 0.8s ease,
        transform 0.8s ease,
        visibility 0.8s ease;
}

#wiseMapScreen,
#wiseNaviScreen
{
    width: 80%;
	display: flex;
	flex-direction: column;
    background: radial-gradient(60% 80% at 50% 10%, rgba(57,213,255,.08), transparent 70%), linear-gradient(180deg, var(--wise-bg-900), #050c14 58%, #03080e 100%);
    color: var(--wise-panel-ink);
    border-radius: 14px;
    border: 1px solid var(--wise-border);
    box-shadow: 0 12px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.03);
    backdrop-filter: blur(2px);
    padding: 16px;
    text-align: left;
    position: relative;
	overflow: hidden;
}

#wiseMapScreen {
	flex: 0 0 100%;
}
#wiseNaviScreen {
	flex: 0 0 80%;
    min-height: 0;
}
#wiseMapMessageScreen {
	width: 80%;
	display: flex;
	flex: 0 0 20%;
    min-height: 0;
}
/* #wiseMapMessageScreen::before {
  content: "";
  flex: 0 0 10%;
  width: 80%;
  align-self: center;
} */


#wiseMapScreenButtonsContainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px;
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    border: 1px solid var(--wise-border);
    border-radius: var(--wise-radius);
    box-shadow: var(--wise-card-shadow);
    margin-bottom: 12px;
	flex: 0 0 auto;
}
#wiseMapControlButtons {
    display: flex;
    gap: 8px;
}
#wiseMapScreenTabs {
    display: flex;
    gap: 8px;
}
.wiseMapControlButton,
.wiseMapScreenTabButton {
    appearance: none;
    border: 1px solid var(--wise-border);
    background: color-mix(in srgb, var(--wise-panel) 86%, black);
    color: var(--wise-panel-ink);
    padding: 8px 12px;
    border-radius: 8px;
    letter-spacing: .02em;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, color .12s ease;
    box-shadow: 0 0 0 0 transparent;
    cursor: pointer;
}
.wiseMapControlButton:hover,
.wiseMapScreenTabButton:hover {
    border-color: color-mix(in srgb, var(--wise-cyan) 28%, var(--wise-border));
    box-shadow: 0 0 6px var(--wise-cyan), 0 0 18px var(--wise-cyan), 0 0 32px var(--wise-cyan);
    transform: translateZ(0) scale(1.02);
}
.wiseMapScreenTabButton[aria-current="true"] {
    background: linear-gradient(180deg, color-mix(in srgb, var(--wise-cyan) 14%, var(--wise-panel)), var(--wise-panel));
    border-color: color-mix(in srgb, var(--wise-cyan) 38%, var(--wise-border));
    box-shadow: 0 0 6px var(--wise-cyan), 0 0 20px var(--wise-cyan), 0 0 40px color-mix(in srgb, var(--wise-cyan) 80%, transparent);
}
.wiseMapScreenSection {
    display: flex;
    flex-direction: column;
    height: 100%;
	flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.wiseMapScreenUiUxContainer {
    display: flex;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    gap: var(--wise-gap);
	min-height: 0;
    overflow: hidden;
}
.wiseMapScreenUiContainer,
.wiseMapScreenListContainer {
    display: flex;
    flex-direction: column;
    flex: 3;
    height: 100%;
    background: linear-gradient(180deg, color-mix(in srgb, var(--wise-panel) 92%, black), color-mix(in srgb, var(--wise-panel) 86%, black));
    border: 1px solid var(--wise-border);
    border-right: 1px solid color-mix(in srgb, var(--wise-border) 70%, black);
    border-radius: var(--wise-radius);
    color: var(--wise-panel-ink);
    box-sizing: border-box;
    padding: 10px;
    box-shadow: var(--wise-card-shadow);
}
.wiseMapScreenUiDisplayArea,
.wiseMapScreenListDisplayArea {
    flex: 1;
	overflow-y: auto;
    overflow-x: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
    border: 1px solid var(--wise-border);
    border-radius: 8px;
    padding: 10px;
    box-sizing: border-box;
    color: var(--wise-panel-ink);
}
.wiseMapScreenUxContainer {
    flex: 7;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: linear-gradient(180deg, color-mix(in srgb, var(--wise-panel) 88%, black), color-mix(in srgb, var(--wise-panel) 80%, black));
    border: 1px solid var(--wise-border);
    border-radius: var(--wise-radius);
    padding: 10px;
    box-sizing: border-box;
    box-shadow: var(--wise-card-shadow);
}
.wiseMapScreenNodeDisplayArea {
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00));
    border: 1px solid var(--wise-border);
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 10px;
    box-sizing: border-box;
    flex-shrink: 0;
    color: var(--wise-panel-ink);
    box-shadow: var(--wise-card-shadow);
}
.wiseMapScreenMapContainer {
    display: flex;
    flex-direction: column;
    flex: 1;
    background: radial-gradient(70% 90% at 50% 10%, rgba(57,213,255,.06), transparent 70%), linear-gradient(180deg, #0a1624, #091420 60%, #08121e 100%);
    border: 1px solid var(--wise-border);
    border-radius: 10px;
    padding: 10px;
    position: relative;
    min-height: 200px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), var(--wise-card-shadow);
	overflow-y: auto;
    overflow-x: hidden;
}

#wiseNaviScreen .wiseMapScreenMapContainer{
    overflow: hidden !important;
}
.wiseMapScreenMapDisplayArea {
    flex: 1;
    border-radius: 8px;
    background-image: linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 24px 24px, 24px 24px;
}
.wiseMapScreenUiDisplayAreaUl {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    list-style-type: none;
    text-align: left;
    padding: 0;
}
.wiseMapWaypoint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--wise-border) 80%, black);
    font-size: 16px;
    color: var(--wise-panel-ink);
}
.waypointTitle {
    flex: 1;
    text-align: left;
    color: var(--wise-panel-ink);
}
.wiseMapUXWaypointContainer {
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
    border: 1px solid var(--wise-border);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
    will-change: transform, opacity;
    color: var(--wise-panel-ink);
    box-shadow: var(--wise-card-shadow);
    transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.wiseMapUXWaypointContainer:hover,
.wiseMapUXWaypointContainer.newRendered,
#wiseMapScreenNodeDisplayAreaFocus.newRendered
{
    border-color: color-mix(in srgb, var(--wise-cyan) 28%, var(--wise-border));
    box-shadow: 0 0 6px var(--wise-cyan), 0 0 18px var(--wise-cyan), 0 0 32px var(--wise-cyan);
    transform: translateZ(0) scale(1.01);
}

.wiseMapGoal {
    line-height: 1.2;
}
.wiseMapGoal span {
    line-height: inherit;
}

.wise-diff-line { 
    line-height: 1.2;
}
.wise-diff-line .wise-arrow {
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
    font-size: 0.95em;
}
.wise-diff-line .wise-prev,
.wise-diff-line .wise-current {
    line-height: inherit;
    white-space: normal;
    word-break: break-word;
}


.wiseMapUXWaypointContainerUl {
    margin: 0;
    padding: 0;
}
.wiseMapSentence,
.wiseMapUXWaypointContainerLi {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    gap: 8px;
    color: var(--wise-panel-ink);
}
.wiseMapTextEditable {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    outline: none;
    padding: 2px 4px;
    color: var(--wise-panel-ink);
    background: transparent;
    border-radius: 4px;
}
.wiseMapTextEditable:focus {
    outline: 2px solid color-mix(in srgb, var(--wise-cyan) 55%, #88c2ff);
}
.wiseMapSeparator {
    text-align: center;
    color: var(--wise-muted-ink);
    font-size: 14px;
    margin: 10px 0 0 0;
    font-weight: bold;
}
.wiseMapSlideInFromRight {
    transform: translateX(100%);
    opacity: 0;
}
.wiseMapDeleteButton {
    position: absolute;
    top: 6px;
    right: 6px;
    background: transparent;
    border: none;
    font-size: 16px;
    color: rgba(255,255,255,.55);
    cursor: pointer;
    transition: color .12s ease, transform .12s ease;
}
.wiseMapDeleteButton:hover {
    color: color-mix(in srgb, #ff7070 80%, white);
    transform: scale(1.06);
}
.wiseMapScreenMapContainerLoadingSpinner,
.wiseMapScreenLoadingSpinner {
    border-top-color: var(--wise-cyan) !important;
    border-right-color: rgba(255,255,255,.15) !important;
}

.wiseMapScreenLoading,
.wiseMapScreenMapContainerLoading {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    background: rgba(8, 20, 33, 0.85); /* ダークトーンの半透明 */
    width: 100%;
    height: 100%;
    backdrop-filter: blur(2px);
}

.wiseMapScreenLoadingSpinner,
.wiseMapScreenMapContainerLoadingSpinner {
    width: 42px;
    height: 42px;
    border: 4px solid rgba(255, 255, 255, 0.08); /* 背景に溶ける薄グレー */
    border-top: 4px solid var(--wise-cyan, #39d5ff); /* シアン発光 */
    border-radius: 50%;
    animation: spin 1.2s linear infinite;
    box-shadow: 0 0 8px var(--wise-cyan), 0 0 18px color-mix(in srgb, var(--wise-cyan) 70%, transparent);
}

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

@media (max-width: 768px) {
    .wiseMapScreenUiUxContainer {
        flex-direction: column;
    }
    .wiseMapScreenUiContainer,
    .wiseMapScreenListContainer {
        order: 2;
        width: 100%;
        background: linear-gradient(180deg, color-mix(in srgb, var(--wise-panel) 92%, black), color-mix(in srgb, var(--wise-panel) 86%, black));
        bottom: 0;
        left: 0;
        display: flex;
        justify-content: space-around;
        padding: 10px 0;
        border-top: 1px solid var(--wise-border);
        z-index: 9999;
    }
    .wiseMapScreenUiDisplayAreaUl {
        display: flex;
        flex-direction: row;
        width: 100%;
        justify-content: space-around;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .wiseMapScreenUiDisplayAreaUl > * {
        flex: 1;
        text-align: center;
    }
	.wiseMapScreenUiDisplayArea,
	.wiseMapScreenUxContainer
	{
		overflow-y: hidden;
		overflow-x: auto;
	}
}
@media (prefers-reduced-motion: reduce) {
    #wiseMapScreen * {
        transition: none !important;
        animation: none !important;
    }
}
.wiseCyanGlowRing {
    position: relative;
}
.wiseCyanGlowRing::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: inherit;
    pointer-events: none;
    mix-blend-mode: screen;
    box-shadow: 0 0 12px var(--wise-cyan), 0 0 28px var(--wise-cyan), 0 0 56px var(--wise-cyan), 0 0 96px color-mix(in srgb, var(--wise-cyan) 70%, transparent);
    opacity: 0;
    transform: scale(.96);
    transition: opacity .2s ease, transform .2s ease;
}
.wiseCyanGlowRing.is-active::after {
    opacity: .95;
    transform: scale(1.02);
}
.wiseMapShowGrammarExplanationButton,
.wisePaletteButton
{
    appearance: none;
    border: 1px solid var(--wise-border, #1c2a3a);
    background: color-mix(in srgb, var(--wise-panel, #0c1b2b) 90%, black);
    color: var(--wise-panel-ink, rgba(255,255,255,0.86));
    font-size: 13px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .2s ease, box-shadow .2s ease, transform .2s ease, color .2s ease;
    box-shadow: 0 0 0 rgba(0,0,0,0);
}

.wiseMapShowGrammarExplanationButton:hover,
.wisePaletteButton:hover
{
    background: var(--wise-cyan, #39d5ff);
    color: #fff;
    border-color: color-mix(in srgb, var(--wise-cyan) 40%, var(--wise-border, #1c2a3a));
    box-shadow: 0 0 8px var(--wise-cyan),
                0 0 20px var(--wise-cyan),
                0 0 40px color-mix(in srgb, var(--wise-cyan) 70%, transparent);
    transform: translateZ(0) scale(1.05);
}

.wiseMapShowGrammarExplanationButton:active,
.wisePaletteButton:active
{
    transform: scale(0.96);
    box-shadow: 0 0 6px var(--wise-cyan);
}

.wiseLearningHiContrast {
    --ink-strong: rgba(255,255,255,0.97);
    --ink: rgba(255,255,255,0.92);
    --ink-muted: rgba(255,255,255,0.75);
    --accent-cyan: var(--wise-cyan, #39d5ff);
    --accent-red: #ff6060;
    --accent-yellow: #ffd65c;
    color: var(--ink);
    text-shadow: 0 0 1px rgba(0,0,0,0.35);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.wiseLearningHiContrast .wiseMapScreenNodeDisplayArea,
.wiseLearningHiContrast .wiseMapScreenMapDisplayArea {
    color: var(--ink);
}

.wiseLearningHiContrast h1,
.wiseLearningHiContrast h2,
.wiseLearningHiContrast h3 {
    color: var(--ink-strong);
    letter-spacing: .01em;
}

.wiseLearningHiContrast .wiseMapSentence,
.wiseLearningHiContrast .wiseMapTextEditable {
    color: var(--ink-strong);
    /* font-weight: 550; */
    line-height: 1.55;
    letter-spacing: .01em;
}

.wiseLearningHiContrast .wiseMapSeparator,
.wiseLearningHiContrast .wiseMapWaypoint {
    color: var(--ink-muted);
}

.wiseLearningHiContrast .wiseMapShowGrammarExplanationButton {
    border: 1px solid color-mix(in srgb, var(--accent-cyan) 45%, var(--wise-border, #1c2a3a));
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent-cyan) 18%, #0c1b2b), #0c1b2b);
    color: var(--ink-strong);
    font-size: 14px;
    /* font-weight: 700; */
    padding: 4px 12px;
    border-radius: 8px;
    box-shadow: 0 0 8px color-mix(in srgb, var(--accent-cyan) 65%, transparent);
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.wiseLearningHiContrast .wiseMapShowGrammarExplanationButton:hover {
    background: var(--accent-cyan);
    color: #00121a;
    box-shadow: 0 0 10px var(--accent-cyan), 0 0 26px var(--accent-cyan);
    transform: scale(1.04);
}

.wiseLearningHiContrast .wiseMapShowGrammarExplanationButton:active {
    transform: scale(.97);
}

.wiseLearningHiContrast .wiseGrammarParticle,
.wiseLearningHiContrast .wiseGrammarFocus,
.wiseLearningHiContrast .wiseParticle {
    color: var(--accent-red);
    text-shadow: 0 0 6px color-mix(in srgb, var(--accent-red) 65%, transparent), 0 0 1px rgba(0,0,0,0.35);
    /* font-weight: 700; */
}

.naviItemsSideMenuAddContentsLiDiv .wiseGrammarParticle,
.naviItemsSideMenuAddContentsLiDiv .wiseGrammarFocus,
.naviItemsSideMenuAddContentsLiDiv .wiseParticle {
    color: red;
}


.wiseLearningHiContrast .wiseGrammarNoun,
.wiseLearningHiContrast .wiseTokenNoun {
    color: var(--ink-strong);
}

.wiseLearningHiContrast .wiseTokenHighlight {
    color: var(--accent-yellow);
    text-shadow: 0 0 6px color-mix(in srgb, var(--accent-yellow) 55%, transparent);
    /* font-weight: 700; */
}

.wiseLearningHiContrast .wiseMapScreenTabButton[aria-current="true"] {
    color: var(--ink-strong);
}

.wiseLearningHiContrast .wiseMapScreenUiDisplayArea,
.wiseLearningHiContrast .wiseMapScreenListDisplayArea {
    color: var(--ink);
}

.wiseLearningHiContrast .wiseMapScreenMapContainer {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 0 24px rgba(0,0,0,.35);
}

.wiseLearningHiContrast .wiseMapScreenMapDisplayArea {
    background-image:
      linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
}

.wiseLearningHiContrast .wiseMapScreenNodeDisplayArea {
    box-shadow: 0 0 18px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.05);
}

.wiseLearningHiContrast .wiseMapSentence a,
.wiseLearningHiContrast .wiseMapTextEditable a {
    color: var(--accent-cyan);
    text-decoration-thickness: 2px;
}

.wiseLearningHiContrast .is-dim {
    color: var(--ink-muted);
}

.wiseLearningHiContrast .is-strong {
    color: var(--ink-strong);
    font-weight: 700;
}

.wiseMapFloatIn {
    opacity: 0;
    transform: scale(.975);
    filter: blur(2px);
    will-change: transform, opacity, filter;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* W.I.S.E. NAVIGATION */

#wiseNaviEventOverlay {
    position: absolute;
    inset: 0;
    z-index: 9999;
    background: transparent;
    pointer-events: auto;
    outline: none;
}

#wiseNaviNextLabel {
    display: none;
    /* display: block; */
    position: absolute;
    right: 20px;
    bottom: 20px;
    padding: 10px 16px;
    font-size: 16px;
    border-radius: 8px;
    background: transparent;
    user-select: none;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0,0,0,0.08);
    border: 1px solid transparent;
}

#wiseNaviNextLabel.white-text {
    color: #fff;
    /* border-color: #fff; */
}

#wiseNaviNextLabel.black-text {
    color: #000;
    /* border-color: #000; */
}


.wiseStartOverlayMessage{
    display: none;
    max-width: min(80ch, 90vw);
}

.wiseNaviMessage{
    background: linear-gradient(180deg, color-mix(in srgb, var(--wise-panel) 92%, black), color-mix(in srgb, var(--wise-panel) 86%, black));
    color: var(--wise-panel-ink);
    border: 1px solid var(--wise-border);
    border-radius: var(--wise-radius, 12px);
    box-shadow: var(--wise-card-shadow, 0 12px 60px rgba(0,0,0,.55)), inset 0 0 0 1px rgba(255,255,255,.03);
    backdrop-filter: blur(2px);
    padding: 12px 16px;
    line-height: 1.6;
    letter-spacing: .01em;
    text-align: left;
    position: relative;
	font-size: clamp(14px, 1.8vw, 18px);
    word-wrap: break-word;
}

.wiseTypingText{
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    white-space: pre-wrap;
    /* overflow-wrap: anywhere; */
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}


#wiseStartOverlayTopicMessage.is-typing{
	display: inline-block !important;
}

.wiseNaviMessage.is-typing .wiseTypingText{
    border-right-color: var(--wise-cyan, #39d5ff);
    animation: wiseCaretBlink 1s steps(1) infinite;
}

.wiseNaviMessage.is-typing .wiseTypingText::after{
    content: "";
    display: inline-block;
    width: 0;
    border-right: 2px solid var(--wise-cyan, #39d5ff);
    animation: wiseCaretBlink 1s steps(1) infinite;
    vertical-align: -0.1em;
}

.wiseNaviMessage.wiseCyanGlowRing::after{
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: inherit;
    pointer-events: none;
    mix-blend-mode: screen;
    box-shadow: 0 0 12px var(--wise-cyan), 0 0 28px var(--wise-cyan), 0 0 56px var(--wise-cyan), 0 0 96px color-mix(in srgb, var(--wise-cyan) 70%, transparent);
    opacity: .9;
    transform: scale(1.01);
}

@keyframes wiseCaretBlink{
    50% { border-right-color: transparent; }
}

@media (prefers-reduced-motion: reduce){
    .wiseNaviMessage.is-typing .wiseTypingText{
        animation: none;
        border-right-color: transparent;
    }
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.layerUpdateOverrideScreenLiDataContainer{
	width: 100%;
}
.layerUpdateOverrideScreenLi{
	display: flex;
	border: 2px solid var(--main-color-1);
	border-radius: 3px;
}
.layerUpdateOverrideScreenLiRow{
	display: flex;
	flex-direction: column;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.landingPageContentsSection p {
	font-size: var(--main-font-size-1);
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.workshopLessonLevelSelector {
	margin-bottom: 80px;
}
.workshopLessonsDetails {
	font: var(--main-font-size-1) var(--main-font-family-1);
	width: 100%;
	margin-bottom: 0px;
}
.workshopLessonsDetailsDiv {
	margin: 2em 0;
}
.workshopLessonsItem {
	margin-bottom: 3em;
}

.workshopLessonsLiLabel {
    color: #000;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.workshopLessonsLiLabel:hover {
    text-decoration: underline;
    opacity: 0.85;
}

.workshopLessonsLiExample {
    padding-left: 2em;
    color: #444;
    line-height: 1.4;
}

.workshopLessonsUl {
    margin: 0;
    padding-left: 24px;
}

.workshopLessonsLi {
	display: flex;
    position: relative;
    list-style: none;
	margin: 0;
    padding: 0 0 24px 24px;
}

.workshopLessonsLi::before
{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 8px;
    border-left: 1px solid #3972b2;
}

.workshopLessonsLi::after 
{
    content: "";
    position: absolute;
    top: 1.1em;
    left: 8px;
    width: 12px;
    border-bottom: 1px solid #3972b2;
}

.workshopLessonsLi:last-child::before {
    bottom: calc(100% - 1.1em);
}

.workshopLessonRadioContainer{
	margin-left: 30px;
}

.workshopManageStatusLi{
	text-align: center;
	/* text-align: left; */
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.frameInSliderPrevButton:disabled,
.frameInSliderNextButton:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.aboutUsText {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 0.5em;
    color: #2c3e50;
}

.landingPageContentsSection,
.workshopHomeContentsSection,
.aboutUsSection
 {
    border-left: 4px solid var(--main-color-3);
    padding: 1em 1.5em;
    margin-bottom: 2em;
    background-color: #f9fafe;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    border-radius: 6px;
}

.aboutUsH1 {
    font-size: 2rem;
    color: #34495e;
    margin-bottom: 1em;
}

.aboutUsH2 {
    font-size: 1.5rem;
    color: var(--main-color-3);
    margin-bottom: 0.75em;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.legalAsctUpdated {
    text-align: right;
    margin-top: 12px;
    font-size: 14px;
    color: #555;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */