@charset "UTF-8";
/*============================================================================*\
    Page - Form
\*============================================================================*/

/*------------------------------------*\
    Controls
\*------------------------------------*/
::-webkit-input-placeholder { color: rgba(0,0,0,.38); }
::-moz-placeholder { opacity: 1; color: rgba(0,0,0,.38); }
:-ms-input-placeholder { color: rgba(0,0,0,.38); }
:placeholder-shown { color: rgba(0,0,0,.38); }
.form-input,
.form-textarea,
.form-select,
.form-select option {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.form-input,
.form-textarea,
.form-select {
	width: 100%;
	padding: 0 .8rem;
	border: .2rem solid #bcc4cf;
	border-radius: .4rem;
	background-color: #fff;
	color: inherit;
	line-height: inherit;
	vertical-align: middle;
	transition: all .2s;
	outline: 0;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.form-input,
.form-select:not([multiple]) { height: 3em; }
.form-input::-ms-clear,
.form-input::-ms-reveal { /* IE10以上用 */
	height: 2rem;
	margin-right: -.6rem;
	color: rgba(0,0,0,.5);
}
.form-input::-webkit-search-cancel-button { margin-right: -.6rem; }
.form-textarea {
	min-height: 10rem;
	padding-top: .8rem;
	padding-bottom: .8rem;
}
.form-select[multiple] {
	padding-right: 0;
	padding-left: 0;
}
.form-select[multiple] optgroup,
.form-select[multiple] option { padding: .2rem .8rem; }
.form-select:not([multiple]) {
	padding-right: 2.5rem;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjE0IiB2aWV3Qm94PSIwIDAgOSAxNCI+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNLjUgNWw0LTQgNCA0TTguNSA5LjAxbC00IDQtNC00IiBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTpyZ2JhKDAsMCwwLC42KTtzdHJva2UtbWl0ZXJsaW1pdDoxMDtzdHJva2Utd2lkdGg6LjkzcHgiLz48L3N2Zz4=);
	background-repeat: no-repeat;
	background-size: .9rem 1.4rem;
	background-position: right .8rem center;
}
.form-select::-ms-expand { display: none; } /* IE10以上用 */

/* Size */
.form-input.form-size-s,
.form-select:not([multiple]).form-size-s { height: 1.5em; }
.form-input.form-size-l,
.form-select:not([multiple]).form-size-l { height: 4em; }

/* Checkbox Radio */
.form-checkbox,
.form-radio {
	display: block;
	position: relative;
	z-index: 0;
}
.form-checkbox input,
.form-radio input {
	position: absolute;
	top: 0;
	left: 0;
	clip: rect(1px,1px,1px,1px);
	width: 1px; 
	height: 1px;
	opacity: 0;
}
.form-checkbox .form__icon,
.form-radio .form__icon {
	display: inline-block;
	position: relative;
	width: 1.125em;
	height: 1.125em;
	margin-right: .4em;
	border: .2rem solid #bcc4cf;
	background-color: #fff;
	color: transparent;
	vertical-align: -.22em;
	transition: all .2s;
}
.form-checkbox input:not([disabled]) + .form__icon,
.form-radio input:not([disabled]) + .form__icon { cursor: pointer; }
.form-checkbox .form__icon { border-radius: .4rem; }
.form-radio .form__icon { border-radius: 50%; }
.form-checkbox .form__icon::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: .25em;
	transform: rotate(48deg);
	width: .4em;
	height: .75em;
	border-style: solid;
	border-width: 0 .2rem .2rem 0;
	border-color: currentColor;
}
.form-radio .form__icon::before {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: .375em;
	height: .375em;
	border-radius: 50%;
	background-color: currentColor;
}
.form-checkbox input:checked + .form__icon,
.form-radio input:checked + .form__icon {
	border-color: transparent;
	background-color: #5185c5;
	color: #fff;
}
.form-checkbox input:checked:focus + .form__icon,
.form-radio input:checked:focus + .form__icon,
.form-checkbox input.is-focus:checked + .form__icon,
.form-radio input.is-focus:checked + .form__icon {
	border-color: transparent;
	background-color: #3d6494;
	box-shadow: 0 0 0 .4rem rgba(61,100,148,.3);
}

/* Math */
.form-control-math {
	width: 3em;
	height: 1.75em;
	margin: .4rem;
	border-color: #5185c5;
	font-family: "UDDigiKyokasho R", "UD Digi Kyokasho NP-R", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif!important; /* MathJax用 */
	vertical-align: baseline;
	-moz-appearance: textfield;
}
.form-control-math::-webkit-outer-spin-button,
.form-control-math::-webkit-inner-spin-button { 
	margin: 0;
	-webkit-appearance: none;
}
.form-control-math--answer {
	display: inline-flex;
	align-items: center;
	width: auto;
	border-color: #bcc4cf;
}
.form-control-math--correct {
	border-color: transparent;
	background-color: transparent;
	color: #e4007f;
}

/* State */
.form-input:disabled,
.form-textarea:disabled,
.form-checkbox input:disabled + .form__icon,
.form-radio input:disabled + .form__icon { }
.form-input:focus,
.form-textarea:focus,
.form-select:focus,
.form-checkbox input:focus + .form__icon,
.form-radio input:focus + .form__icon,
.form-input.is-focus,
.form-textarea.is-focus,
.form-select.is-focus,
.form-checkbox input.is-focus + .form__icon,
.form-radio input.is-focus + .form__icon{
	border-color: #f2ab4c;
	box-shadow: 0 0 0 .4rem rgba(242,171,76,.3);
}

/* Validation */
form:not([novalidate]) .form-input:invalid,
form:not([novalidate]) .form-textarea:invalid,
form:not([novalidate]) .form-select:invalid,
form:not([novalidate]) .form-checkbox input:invalid + .form__icon,
form:not([novalidate]) .form-radio input:invalid + .form__icon { border-color: #5185c5; }
form:not([novalidate]) .form-input:invalid:focus,
form:not([novalidate]) .form-textarea:invalid:focus,
form:not([novalidate]) .form-select:invalid:focus,
form:not([novalidate]) .form-checkbox input:invalid:focus + .form__icon,
form:not([novalidate]) .form-radio input:invalid:focus + .form__icon,
form:not([novalidate]) .form-input.is-focus:invalid,
form:not([novalidate]) .form-textarea.is-focus:invalid,
form:not([novalidate]) .form-select.is-focus:invalid,
form:not([novalidate]) .form-checkbox input.is-focus:invalid + .form__icon,
form:not([novalidate]) .form-radio input.is-focus:invalid + .form__icon { box-shadow: 0 0 0 .4rem rgba(81,133,197,.3); }

@media (min-width:48em) {
	/* Math */
	.form-control-math { height: 1.5em; }
}


/*------------------------------------*\
    Keyboard
\*------------------------------------*/
.form-kbd { max-width: 605px; }
.form-kbd__num { max-width: 27.2rem; }
.form-kbd__other { max-width: 10.4rem; }
.form-kbd__btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 65px;
	height: 65px;
	padding-right: .6rem;
	padding-left: .6rem;
	font-family: "UDDigiKyokasho R", "UD Digi Kyokasho NP-R", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	font-size: 2rem;
}

@media (min-width:48em) {
	.form-kbd { max-width: 45.5rem; }
	.form-kbd__num { max-width: 32.1rem; }
	.form-kbd__other { max-width: 12rem; }
	.form-kbd__btn {
		width: 5.3rem;
		min-height: 4.9rem;
		font-size: 2.4rem;
	}
}


/*------------------------------------*\
    Note
\*------------------------------------*/
.form-note-heading {
	display: inline-block;
	position: relative;
	width: auto;
	padding-top: .8rem;
	padding-bottom: .8rem;
	border-width: .2rem 0;
	border-style: solid;
	border-color: rgba(0,0,0,.15);
}
.form-note-tool-btn {
	z-index: 1;
	width: 4.8rem;
	padding-right: .6rem;
	padding-left: .6rem;
}
.form-note-tool-btn__img { width: 2.8rem; }
.form-note-canvas {
	position: relative;
	/* padding-top: 100%; */
	background-color: #d9d9d9;
	background-image: linear-gradient(90deg, #fff 1.8rem, transparent 1%), linear-gradient(#fff 1.8rem, transparent 1%);
	background-position: center center;
	background-size: 2rem 2rem;
}
.form-note-canvas__inner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media (min-width:30em) {
	.form-note-canvas { background-position: top center; }
}

@media (min-width:48em) {
	.form-note-tool-btn { width: 5.2rem; }
	.form-note-tool-btn__img { width: 3.2rem; }
}


/*------------------------------------*\
    MathJax
\*------------------------------------*/
math,
.MathJax {
	display: block;
}
math::-webkit-scrollbar,
.MathJax::-webkit-scrollbar { height: .8rem; }
math::-webkit-scrollbar-track,
math::-webkit-scrollbar-thumb,
.MathJax::-webkit-scrollbar-track,
.MathJax::-webkit-scrollbar-thumb { border-radius: .4rem; }
math::-webkit-scrollbar-track,
.MathJax::-webkit-scrollbar-track {
	box-shadow: none;
	background-color: #fff;
}
math::-webkit-scrollbar-thumb,
.MathJax::-webkit-scrollbar-thumb {
	background-color: rgba(0,0,0,.6);
	border-radius: .4rem;
}
math { white-space: nowrap; }
mjx-math {
	padding-top: 0!important;
	padding-bottom: 0!important;
	/*
	改行
	word-wrap: break-word!important;
	white-space: normal!important;
	*/
}
mjx-semantics { font-size: 100%!important; } /* 分数用 */
.typesquare_option mjx-utext {
	padding-top: .85em!important;
	padding-bottom: .1em!important;
}

/* Num */
.is-es.typesquare_option mjx-mn { font-family: "UDDigiKyokasho R", "UD Digi Kyokasho NP-R", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; }
.is-es.typesquare_option mjx-mn [class^="mjx-c3"]::before,
.typesquare_option mjx-mn.form-control-math [class^="mjx-c3"]::before {
	padding-top: .35em;
	padding-right: .66em;
	padding-bottom: .42em;
}

/* Minus */
.is-es.typesquare_option mjx-mn .mjx-c2212::before,
.typesquare_option mjx-mn.form-control-math .mjx-c2212::before {
	padding-top: .28em;
	padding-right: 1em;
	padding-bottom: .38em;
}

/* Period */
.is-es.typesquare_option mjx-mn .mjx-c2E::before,
.typesquare_option mjx-mn.form-control-math .mjx-c2E::before {
	padding-top: .37em;
	padding-right: .32em;
	padding-bottom: .4em;
}


/*------------------------------------*\
    Answer
\*------------------------------------*/
.answer {
	position: relative;
	padding-left: 1.25em;
}
.answer--correct::before,
.answer--incorrect::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	border-style: solid;
	border-color: #e4007f;
}
.answer--correct::before {
	width: 1em;
	height: 1em;
	margin-top: -.5em;
	border-radius: 50%;
	border-width: .4rem;
}
.answer--incorrect::before {
	transform: rotate(48deg);
	width: .4em;
	height: .75em;
	margin-top: -.375em;
	margin-right: .3em;
	margin-left: .3em;
	border-width: 0 .4rem .4rem 0;
}