/* CSS for Kenshin Web App */
/* --- additional --- */
/* --- page --- */
body {
	transition: all 1000ms 0s ease;
}

.ksbtn {
	cursor: pointer;
}

.ks-page,
#ks-exam-correctbox,
#ks-exam-incorrectbox,
.ks-annouce-topinactive {
	transition: all 500ms 0s ease;
}
.ks-mark1,
.ks-mark2,
#ks-exam-main,
#ks-exam-index,
.ks-correctmark,
.ks-incorrectmark,
.ks-varidate-error,
.ks-success,
.ks-failed {
	transition: all 250ms 0s ease;
}

.ks-opacity-0 {
	opacity:0;
}

.ks-lineactive {
	/* bg-cyan-200 */
	background-color: rgb(165 243 252) !important;
}

.ks-options-selected {
	border: 1px #5eead4 solid !important;
	background: #ccfbf1 !important;
}

#ks-vimeo iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.ks-smallonly {
	display: none;
}

@media screen and (max-width: 374px) {
	.ks-smallonly {
		display:block;
	}
}

/* ------------------------------------------------------------------
   ヘッダー分の余分なスクロール対策
   daisyUI の .drawer-mobile は .drawer / .drawer-side に height:100vh を
   設定するが、その上にヘッダー(.ks-body / h-12 = 3rem)が別要素として
   積まれるため、ページ全体が「100vh + 3rem」となり、ヘッダー高さ分だけ
   余分にスクロールしてしまう。
   そこで drawer コンテナとサイドバーの高さもヘッダー分(3rem)を引いて揃える。
   ※ kenshin.css の .drawer-content { height: calc(100vh - 3rem) } と対になる指定。
   ------------------------------------------------------------------ */
.drawer.drawer-mobile,
.drawer-side {
	height: calc(100vh - 3rem) !important;
}