/* student login */
#btn_barcode {
	position: absolute;
	left: 20px;
	top: 13px;
	width: 48px;
}
.btn-barcode{
    display: inline-block;
    text-decoration: none;
    background: #ff8181;
    color: #FFF;
    width: 48px;
    height: 48px;
    line-height: 48px;
    border-radius: 50%;
    text-align: center;
    font-weight: bold;
    vertical-align: middle;
    overflow: hidden;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
    border-bottom: solid 3px #bd6565;
    transition: .4s;
}
.btn-barcode:active{
    -ms-transform: translateY(2px);
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
    border-bottom: none;
}

.barcode-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.barcode-modal-title {
	padding:5px 0 15px 5px;
	font-size: 20px;
	font-weight: bold;
	color: blue;
	pointer-events: none;
}

.barcode-modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px 20px 20px 40px;
    border: 1px solid #888;
    width: 460px; /* Could be more or less, depending on screen size */
	border-radius: 20px;
}

.barcode-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.barcode-close:hover,
.barcode-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.barcode-blinking {
	animation-name: barcode-blink; /* アニメーションの名前を設定 */
	animation-duration: 1.2s; /* アニメーションの秒数を設定 */
	animation-iteration-count: infinite; /* 繰り返しを設定（１回だけなら不要） */
}
@keyframes barcode-blink{ /*上記で設定したアニメーションの動作を指定 */
	0% {opacity:1;} /* 1.2s中の動作開始時間を%で指示 */
	50% {opacity:0;} /* 同上 */
}


/* hondana */
.search-favorite {
	position: absolute;
	left: 60px;
	top: 100px;
    background-color: #deb887;
    width: 180px;
    height: 30px;
    border: 1px green solid;
    border-radius: 10px;
	-ms-filter: "alpha(opacity=90)"; /* IE 8,9 */
	-moz-opacity: 0.9; /* FF , Netscape */
	-khtml-opacity: 0.9; /* Safari 1.x */
	opacity: 0.9;
	zoom:1; /*IE*/

}
.search-input {
 	position: absolute;
    vertical-align: top;
    margin: 0px;
    height: 100%;
    box-sizing: border-box;
    background-color: transparent;
    border: none;
    width: 170px;
    padding-left: 10px;
}
.search-button {
	position: absolute;
	left: 145px;
	top: -3px;
    height: 120%;
    background-color: transparent;
    width: 30px;
    border: none;
    background-image: url(data:image/png;base64,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);
    background-position: center;
    background-size: auto 90%;
    background-repeat: no-repeat;
}
.evaluation{
	position: relative;
	top: 3px;
	width: 160px;
}
.evaluation input[type='radio']{
  display: none;
}
.evaluation label{
  position: relative;
  padding: 4px;
  color: gray;
  cursor: pointer;
  font-size: 26px;
}
.evaluation label:hover,
.evaluation label:hover ~ label,
.evaluation input[type='radio']:checked ~ label{
  color: #ffcc00;
}

.book-title {
/*	white-space: nowrap;*/
}
.publisher-area {
	width: 100%;
	height: auto;
}
.publisher {
	position: relative;
	color: white;
	font-size: 14px;
	margin: .3em;
/*	white-space: nowrap;*/
	text-align: center;
}

/* quiz */
.question_center {
	position: absolute;
	top: 140px;
	width: 100%;
}
.question_center .box {
	width: 920px;
	margin: 80px auto 0;
	margin-top: 80px;
	display: flex;
	justify-content: center;
}
.arasuji_top {
	margin-top: 52px !important;
}
.question_center .box-left-pane {
	margin-top: 15px;
	width: 15%;
}
.question_center .box-center-pane {
	margin-top: 15px;
	width: 100%;
}
.question_center .box-right-pane {
	margin-top: 15px;
	width: 85%;
}
.question_center .box-explanation {
	display: none;
	width: 752px;
	height: 128px;
    padding: .5em 1em;
	margin: 0 auto;
    font-weight: bold;
    color: #ff7f50;
    background: #FFF;
    border: solid 3px #ff7f50;
    border-radius: 10px;
}
.question_center .box-left-image {
	width: 128px;
	margin-right: 10px;
}
.question_center .box img {
	width: 100%;
	height: 100%;
}
.question_center .title {
	margin-bottom: 6px;
}
.question_center .sentence {
	float: left;
	width: 85%;
}
.question_center .box-right-image {
	float: right;
	width: 15%;
}
.question_center .box div {
	padding: 0.2em;
}

.correct-answers {
	width:40%;
}
.correct-answers li {
	display: inline-block;
	padding: 0 .2em;
}

.correct-answer {
	width: 40px;
}

.quiz-line-height {
	line-height: 28px;
}
.quiz-explanation-line-height {
	line-height: 22px;
}
.quiz-underline {
	text-decoration: underline;
	text-underline-position: under;
}
.quiz-position {
	position: relative;
}
.quiz-head-msg {
    position: absolute;
	left: 2px;
	top: -3px;
	font-size: 25px;
	font-weight: bold;
	z-index: 9;
}
.quiz-choice-sentence {
	margin-left: 8px;
}
.quiz-title {
	position: relative;
	height: 100%;
}
.quiz-title span {
	position: absolute;
	display: block;
	right: 20px;
	top: 18px;
	font-size: 16px;
	font-weight: bold;
}

/* 読書 */
.translator {
	position: absolute;
	left: 200px;
	top: 32px;
	font-size: 18px;
}

.italic{
   font-family: Meiryo, "メイリオ", sans-serif;
   -webkit-transform: skewX(-15deg);
   -moz-transform: skewX(-15deg);
   -o-transform: skewX(-15deg);
   transform: skewX(-15deg);
   -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=-0.26794919243112214, M21=0, M22=1, SizingMethod='auto expand')";
}

.page-number-input {
	width: 60%;
	text-align: right;
    font-size: 2.0rem;
    font-family: 'Crimson';
	outline: 0;
	border: 0;
	background-color: transparent;
}

.reading-publisher-area {
	position: absolute;
	left: 280px;
	top: 655px;
	width: auto;
	border: 1px;
}
.reading-publisher {
	width: 100%;
	font-weight: normal;
	background-color: #eee8aa;
    border: 1px #eee8aa solid;
	padding: 8px 6px 4px 6px;
    border-radius: 15px;
	color: #111111;
	-ms-filter: "alpha(opacity=70)"; /* IE 8,9 */
	-moz-opacity: 0.7; /* FF , Netscape */
	-khtml-opacity: 0.7; /* Safari 1.x */
	opacity: 0.7;
	zoom:1; /*IE*/
}
#id_favorite {
	position: absolute;
	left: 380px;
	top: 645px;
}
.btn-favorite {
    display: inline-block;
    text-decoration: none;
    background: #ffd700;
    color: #FFF;
    width: 48px;
    height: 48px;
    line-height: 48px;
    border-radius: 50%;
    text-align: center;
    font-weight: bold;
    vertical-align: middle;
    overflow: hidden;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
    border-bottom: solid 3px #ffd700;
    transition: .4s;
}
.btn-favorite:active{
    -ms-transform: translateY(2px);
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
    border-bottom: none;
}
.btn-favorite:hover{
	-ms-filter: "alpha(opacity=90)"; /* IE 8,9 */
	-moz-opacity: 0.9; /* FF , Netscape */
	-khtml-opacity: 0.9; /* Safari 1.x */
	opacity: 0.9;
	zoom:1; /*IE*/
}	
.popup-favorite {
	display: none;
	position: absolute;
	left: 326px;
	top: 620px;
    background-color: #ffffff;
    width: 160px;
    height: 32px;
    border: 1px green solid;
    border-radius: 10px;
	z-index: 999;
	-ms-filter: "alpha(opacity=90)"; /* IE 8,9 */
	-moz-opacity: 0.9; /* FF , Netscape */
	-khtml-opacity: 0.9; /* Safari 1.x */
	opacity: 0.9;
	zoom:1; /*IE*/
}
.favorite-input {
 	position: relative;
    vertical-align: top;
    margin: 0 0 0 10px;
    height: 100%;
    box-sizing: border-box;
    background-color: transparent;
    border: none;
    width: 170px;
    padding-left: 10px;
}
.favorite-evaluation{
	position: absolute;
	display: flex;
	flex-direction: row-reverse;
	top: -3px;
	width: 114px;
}
_::-webkit-full-page-media, _:future, :root .favorite-evaluation{
	position: absolute;
	display: flex;
	flex-direction: row-reverse;
	top: -4px;
	width: 114px;
}
.favorite-evaluation input[type='radio']{
	display: none;
}
.favorite-evaluation label{
	position: relative;
	padding: 6px;
	color: gray;
	cursor: pointer;
	font-size: 26px;
}
.favorite-evaluation label:hover,
.favorite-evaluation label:hover ~ label,
.favorite-evaluation input[type='radio']:checked ~ label{
	color: #ffcc00;
}

.reading_gauge-wrapper button.handle,
.sound_gauge-wrapper button.handle {
	position: relative;
	display: block;
	top: -16px;
	left: 0;
	width: 23px;
	height: 23px;
	border-radius: 50%;
	border: 1px solid #9f9f9f;
	background: -moz-linear-gradient(
		top,
		#ababab 0%,
		#bcbcbc 30%,
		#c8c8c8 50%,
		#f5f5f5);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#ababab),
		color-stop(0.3, #bcbcbc),
		color-stop(0.5, #c8c8c8),
		to(#f5f5f5));
	background: linear-gradient(
		to bottom,
		#ababab 0%,
		#bcbcbc 30%,
		#c8c8c8 50%,
		#f5f5f5);
	box-shadow:
		inset 0 0 4px rgba(255,255,255,0.9),
		0 1px 1px rgba(0,0,0,0.5);
	z-index: 10;	
}

button.handle span.tooltip {
    position: absolute;
	visibility:hidden;
	opacity: 0;
	width: 70px;
    height: 26px;
	line-height: 27px;
    background: #fff;
    text-align: center;
	font-size: 1.4rem;
	font-family: helvetica, arial;
	color: #6a6b6b;
    border-radius: 5px;
    z-index: 10;
	box-shadow: 
		0 1px 1px rgba(0,0,0,0.5),
		0 0 1px rgba(0,0,0,0.3),
		0 -1px 1px rgba(0,0,0,0.2);
	bottom: 30px;
	left: -25px;
	margin: auto;
}
button.handle span.tooltip:before {
	display: block;
    content: " ";
    position: absolute;
    top: 26px; 
    left: 0;
	right: 0;
	margin: auto;
	width: 12px;
	height: 6px;
    z-index: 20;
	background: url("../images/arrow_tooltip.png") center bottom no-repeat;
	background-size: 12px 6px;
	-moz-background-size: 12px 6px;
	-webkit-background-size: 12px 6px;
}
button.handle:hover span.tooltip {
	visibility:visible;
	opacity: 1;
    -moz-transition: opacity 0.5s ease-in-out;
	-webkit-transition: opacity 0.5s ease-in-out;
	transition: opacity 0.5s ease-in-out;
}


/* 教室・生徒ログイン */
.error-message {
	position: absolute;
	left: 10px;
	top: 92px;
	width: calc(100% - 17px);
	text-align: center;
	z-index: 999;
}
.error-message-ex {
	top: 60px;
}
.error-message span {
	font-weight: bold;
	color: red;
}
.error-message-large {
	position: absolute;
	left: 10px;
	top: 200px;
	width: 100%;
	text-align: center;
	z-index: 999;
}
.error-message-large span {
	font-size: 24px;
	font-weight: bold;
	color: red;
}

/* 生徒エラーメッセージ */
.login-student-error {
	position: absolute;
	top: 160px;
	width: 100%;
	text-align: center;
	z-index: 1;
}

/* 読書エラーメッセージ */
.book-reading-error {
	position: absolute;
	top: 225px;
	width: 100%;
	text-align: center;
	z-index: 1;
}

/* ムービー	*/
.waku2-movie-play-mark {
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	margin: auto;
    background: url(/images/play-mark.svg);
	z-index: 1001;
	width: 100px;
	height: 100px;
}
.play_gauge-wrapper .gauge,
.onsei_gauge-wrapper .gauge {
    position: relative;
	width: 0;
    height: 5px;
	margin-top: 0px;
	border-radius: 2px;
	background-image: linear-gradient( -45deg, #feec3b 25%, #fccd00 25%, #fccd00 50%, #feec3b 50%, #feec3b 75%, #fccd00 75%, #fccd00 );
	background-size: 3px 3px;
	-moz-background-size: 3px 3px;
	-webkit-background-size: 3px 3px;
	z-index: 1;
}
/* ムービーIE用 */
.play_gauge-wrapper a.handle,
.onsei_gauge-wrapper a.handle {
	position: relative;
	display: block;
	top: -9px;
	left: 58%;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: -moz-linear-gradient(
		top,
		#ababab 0%,
		#bcbcbc 30%,
		#c8c8c8 50%,
		#f5f5f5);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#ababab),
		color-stop(0.3, #bcbcbc),
		color-stop(0.5, #c8c8c8),
		to(#f5f5f5));
	background: linear-gradient(
		to bottom,
		#ababab 0%,
		#bcbcbc 30%,
		#c8c8c8 50%,
		#f5f5f5);
	box-shadow:
		inset 0 0 4px rgba(255,255,255,0.9),
		0 1px 1px rgba(0,0,0,0.5);
	z-index: 10;
}
.movie-bar a.handle span.tooltip { bottom: 18px;}
.play_gauge-wrapper a.handle span.tooltip {
	width: 75px;
	left: -31px;
}
.onsei_gauge-wrapper a.handle span.tooltip { left: -30px;}
/* ムービー Chrome,その他用 */
.play_gauge-wrapper button.handle,
.onsei_gauge-wrapper button.handle {
	position: relative;
	display: block;
	top: -9px;
	left: 0;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: -moz-linear-gradient(
		top,
		#ababab 0%,
		#bcbcbc 30%,
		#c8c8c8 50%,
		#f5f5f5);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#ababab),
		color-stop(0.3, #bcbcbc),
		color-stop(0.5, #c8c8c8),
		to(#f5f5f5));
	background: linear-gradient(
		to bottom,
		#ababab 0%,
		#bcbcbc 30%,
		#c8c8c8 50%,
		#f5f5f5);
	box-shadow:
		inset 0 0 4px rgba(255,255,255,0.9),
		0 1px 1px rgba(0,0,0,0.5);
	z-index: 10;
}
.movie-bar button.handle span.tooltip { bottom: 18px;}
.play_gauge-wrapper button.handle span.tooltip {
	width: 75px;
	left: -31px;
}
.onsei_gauge-wrapper button.handle span.tooltip { left: -29px;}


/* tooltip color */
.tippy-tooltip.waku2-theme {
	background-color: #3498db;
	border: 1px solid #333;
	font-weight: bold;
	color: #fffffd;
	font-size: 12px;
}
.tippy-popper[x-placement^=right] .tippy-tooltip.waku2-theme .tippy-arrow {
    border-right: 7px solid #3498db;
}
.tippy-popper[x-placement^=left] .tippy-tooltip.waku2-theme .tippy-arrow {
    border-left: 7px solid #3498db;
}
.tippy-popper[x-placement^=top] .tippy-tooltip.waku2-theme .tippy-arrow {
    border-top: 7px solid #3498db;
}
.tippy-popper[x-placement^=bottom] .tippy-tooltip.waku2-theme .tippy-arrow {
    border-bottom: 7px solid #3498db;
}

/* 数値入力スピナー除去 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance:textfield;
}

/* しばらくお待ちください */
.waiting {
    position: absolute;
    top: 50%;
	left: 50%;
	margin: -17px -137px;
    width: 275px;
	height: 34px;
    background: url(../images/waiting.svg);
	background-repeat: no-repeat;
	border: none;
	z-index: 9999;
	filter:alpha(opacity=80);
	-ms-filter: "alpha(opacity=80)";
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
	opacity:0.8;
	zoom:1;
}
.waiting-ms {
    position: absolute;
    top: 50%;
	left: 50%;
	margin: -17px -137px;
    width: 275px;
	height: 34px;
    background: url(../images/waiting.gif);
	background-repeat: no-repeat;
	border: none;
	z-index: 9999;
	filter:alpha(opacity=80);
	-ms-filter: "alpha(opacity=80)";
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
	opacity:0.8;
	zoom:1;
}

/* 読了 */
form#reading input[type="button"] {
	display: block;
	width: 129px;
	height: 35px;
	line-height: 33px;
	position: relative;
	border-radius: 5px;
	text-align: center;
	cursor: pointer;
	font-size: 1.7rem;
	margin: 0 auto;
	box-shadow:
		0px 1px 2px 1px rgba(000,000,000,0.3),
		inset 0px 1px 0px rgba(255,255,255,0.4);
	color: #fff;
	border: 1px solid #6b890f;
	outline: 0;
	background: -moz-linear-gradient(
		top,
		#789a0f 0%,
		#576f0b);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#789a0f),
		to(#576f0b));
	background: linear-gradient(
		to bottom,
		#789a0f 0%,
		#576f0b);
	text-shadow: inset 1px 1px 1px rgba(000,000,000,0.4);
}

/* Room To Read動画 */
.room-to-read-movie {
	position: fixed;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	margin: auto;
	z-index: 1000;
	width: 800px;
	height: 600px;
}
.room-to-read-play {
	position: fixed;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	margin: auto;
    background: url(/images/play-mark.svg);
	z-index: 1001;
	width: 100px;
	height: 100px;
}

.login-btn-center {
	margin: 18px 104px !important;
}

.text-bordering {
	text-shadow: #fff 0.6px 0px,  #fff -0.6px 0px,
				#fff 0px -0.6px, #fff 0px 0.6px,
				#fff 0.6px 0.6px , #fff -0.6px 0.6px,
				#fff 0.6px -0.6px, #fff -0.6px -0.6px,
				#fff 0.6px 0.6px,  #fff -0.6px 0.6px,
				#fff 0.6px -0.6px, #fff -0.6px -0.6px,
				#fff 0.6px 0.6px,  #fff -0.6px 0.6px,
				#fff 0.6px -0.6px, #fff -0.6px -0.6px;
}
.text-bordering-bold {
	text-shadow: #fff 1px 0px,  #fff -1px 0px,
				#fff 0px -1px, #fff 0px 1px,
				#fff 1px 1px , #fff -1px 1px,
				#fff 1px -1px, #fff -1px -1px,
				#fff 1px 1px,  #fff -1px 1px,
				#fff 1px -1px, #fff -1px -1px,
				#fff 1px 1px,  #fff -1px 1px,
				#fff 1px -1px, #fff -1px -1px;
}


/* 本タイトル Type1 */
.opening-book-title1 {
	position: absolute;
	word-break: normal;
	overflow: visible;
	text-align: center;
	font-size: 14px;	
	font-weight: bold;
	color: #ffff99;
	cursor: default;
}
/* 本タイトル Type2 */
.opening-book-title2 {
	position: absolute;
	word-break: normal;
	overflow: visible;
	text-align: center;
	font-size: 14px;	
	font-weight: bold;
	padding: 0.5em 1em;
	margin: 0;
	color: #5d627b;
	background: white;
	border-top: solid 5px #5d627b;
	border-radius: 3px;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
.opening-book-title2 p {
	margin: 0; 
	padding: 0;
}	
/* 本タイトル Type3 */
.opening-book-title3 {
	position: absolute;
	word-break: normal;
	height: 30px;
	overflow: visible;
	text-align: center;
	font-size: 14px;	
	font-weight: bold;
	padding-top: 6px;
	color: #555555;
	background-image: url("/images/book_title_frame.png");
	background-size: 100% 100%;
	display: inline-block;
	cursor: default;
}

/* 本タイトル非表示 */
.book-title-hide {
	height: 108px;
	visibility: hidden;
	overflow: hidden;
}
.book-author-hide {
	visibility: hidden;
	overflow: hidden;
}

/* 生徒ログイン画面 背景画像 */
body.login-student {
	background-image: url("/images/background_student_login.png");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 100vh;
}

/* 本をえらぼう戻るボタン　*/
.back-select-book {
	width: 108px !important;
	margin-top: 5px;
	border: solid 3px #d9d9d9;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	-o-border-radius: 20px;
}
.back-select-book:active {
	position: relative;
	top: 3pt;
	-webkit-box-shadow: inset 0px 1px 3px 2px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: inset 0px 1px 3px 2px rgba(0, 0, 0, 0.4);
	box-shadow: inset 0px 1px 3px 2px rgba(0, 0, 0, 0.4);
	cursor: pointer;
}