@charset "UTF-8";
/*
 * WakuWaku Bunko
 */

/* Common
-------------------------------------------------------------- */
/**
 * Header
**/
header .lt { float: left;}
.book-select .lt img.logo,
.my-hondana .lt img.logo {
	width: 57px;
}

header .rt { float: right;}
header .rt img.logo { width: 85px;}
.grade-select .rt img.logo { width: 82px;}
.book-select .rt img.logo,
.my-hondana .rt img.logo
{ width: 64px;}
header a:hover img { opacity: 1.0;}

/** Logo-type：book **/
header.type01 { padding: 25px 30px 0 20px;}
header.type01 .lt img.logo { width: 152px;}

/** Logo-type：castle **/
header.type02 { padding: 20px 30px 0 25px;}
header.type02 .lt img.logo { width: 116px;}
header.type02 .rt { padding-top: 5px;}
.book-select header .rt,
.my-hondana header .rt
{ padding-top: 5px;}

/** Search Window **/
form#search {
	display: inline-block;
	margin-right: 33px;
	margin-bottom: 4px;
	width: 210px;
	height: 32px;
	border-radius: 10px;
	box-shadow: 0 0 0 2px rgba(207,207,207,0.8);
	background: #fff;
}
.book-select form#search,/** Page:Book Select **/
.my-hondana form#search/** Page:Hondana **/
{
	width: 185px;
	margin-right: 7px;
	margin-bottom: 9px;
}
.my-hondana form#search { margin-bottom: 6px;}

form#search input {
	display: block;
	outline: 0;
	border: 0;
	height: 32px;
}
form#search input[type="text"] {
	float: left;
	width: 173px;
	padding: 0px 10px;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
	font-family: helvetica, arial;
}
.book-select form#search input[type="text"] ,/** Page:Book Select **/
.my-hondana form#search input[type="text"] /** Page:Hondana **/
{ width: 148px;}

form#search input[type="submit"] {
	float: right;
	width: 35px;
	background: url("../images/bt_search.png") center center no-repeat #fff;
	background-size: 19px 18px;
	-moz-background-size: 19px 18px;
	-webkit-background-size: 19px 18px;
	cursor: pointer;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}
form#search input[type="submit"]:hover {
	background: url("../images/bt_search_hover.png") center center no-repeat #fff;
	background-size: 19px 18px;
	-moz-background-size: 19px 18px;
	-webkit-background-size: 19px 18px;
}

/** Page:Book Select **/
.book-select header {
	position: relative;
	height: 199px;
	padding: 4px 19px 0 16px;
	background: url("../images/shelf_header_bg.png") center top repeat-x;
	background-size: 512px 199px;
	-moz-background-size: 512px 199px;
	-webkit-background-size: 512px 199px;
}
.book-select header h1 {
	display: inline;
	float: left;
}
header p.name {
	display: inline-block;
	height: 51px;
	margin: 3px 0 7px 17px;
	line-height: 55px;
}
header p.name span {
	display: inline-block;
	width: 162px;
	height: 51px;
	font-size: 1.8rem;
	text-align: center;
	background: url("../images/nameframe.png") left top no-repeat;
	background-size: 162px 51px;
	-moz-background-size: 162px 51px;
	-webkit-background-size: 162px 51px;
	margin-right: 7px;
}

header p.medal { padding-left: 119px;}
header p.medal img { width: 75px;}

header p.bt_grade-select { padding-left: 40px;}
header p.bt_grade-select img { width: 111px;}
header p.bt_grade-select a:hover img { opacity: 0.7;}

.book-select header h2 img {
	position: absolute;
	display: block;
	margin: 0 auto;
	top: 50px;
	left: 0;
	right: 0;
	width: 340px;
}

/** Page:Hondana **/
.my-hondana header {
	position: relative;
	height: 199px;
	padding: 4px 19px 0 16px;
	background: url("../images/shelf_header_bg_white.png") center top repeat-x;
	background-size: 512px 199px;
	-moz-background-size: 512px 199px;
	-webkit-background-size: 512px 199px;
}
.my-hondana header h1 {
	display: inline;
	float: left;
}
header p.book-number {
	display: inline-block;
	width: 166px;
	height: 56px;
	line-height: 52px;
	padding: 0 10px;
	margin: 3px 0 0 10px;
	background: url("../images/endbookimage.png") no-repeat;
	background-size: 166px 56px;
	-moz-background-size: 166px 56px;
	-webkit-background-size: 162px 56px;
	font-size: 1.3rem;
}
header p.book-number span.number {
	font-size: 1.8rem;
	font-family: 'Crimson';
	margin: 0 4px 0 11px;
}
header p.book-number span.unit {
	font-size: 1.6rem;
}

header .recent-book {
	width: 231px;
	height: 97px;
	margin-left: 12px;
	padding-top: 12px;
	background: url("../images/saikinyonda_base.png") no-repeat;
	background-size: 231px 97px;
	-moz-background-size: 231px 97px;
	-webkit-background-size: 231px 97px;
	text-align: center;
	font-size: 1.4rem;
}
.recent-book img { width: 99px;}
.recent-book p.title { 
	font-size: 1.8rem;
	margin-top: 3px;
	margin-bottom: 4px;
	text-shadow: 1px 1px 1px rgba(255,255,255,1.0);
}
.recent-book p.page-number {
	height: 18px;
	line-height: 20px;
}
.recent-book p.page-number span {
	display: inline-block;
	width: 70px;
	height: 18px;
	border-radius: 9px;
	background: #fff;
	font-size: 1.2rem;
	font-family: 'Crimson';
	text-align: center;
	box-shadow: inset 0px 1px 1px 1px rgba(000,000,000,0.3);
	margin-right: 3px;
}

.my-hondana header h2 img {
	position: absolute;
	display: block;
	width: 326px;
	margin: 0 auto;
	top: 24px;
	left: 0;
	right: 0;
}
.my-hondana header h3 {
	position: absolute;
	width: 340px;
	height: 60px;
	margin: 0 auto;
	top: 82px;
	left: 0;
	right: 0;
	background: url("../images/san.png") right 28px no-repeat;
	background-size: 51px 27px;
	-moz-background-size: 51px 27px;
	-webkit-background-size: 51px 27px;
}
.my-hondana header h3 span {
	display: inline-block;
	width: 282px;
	height: 60px;
	line-height: 62px;
	font-size: 2.4rem;
	text-align: center;
	color: #000;
	background: url("../images/myname.png") left top no-repeat;
	background-size: 282px 60px;
	-moz-background-size: 282px 60px;
	-webkit-background-size: 282px 60px;
}

/**
 * Footer
**/
/** Copyright **/
.copyright {
	text-align: center;
	font-size: 1.2rem;
	font-family: helvetica, arial;
	color: #333c3f;
	padding-bottom: 16px;
}
@media screen and (max-device-width: 1024px) and (orientation:landscape) { /** iPad横向き表示 **/
	.copyright { padding-bottom: 12px;}
}


.grade-select .copyright { color: #fff;}

/** 
 *Button Group
**/
.box-btn_group {
	width: 930px;
	margin: 25px auto 0;
	position: relative;
}
.box-btn_group .lt {
	float: left;
	width: 370px;
	padding-top: 8px;
}
.box-btn_group .md {
	float: left;
	width: 400px;
	padding-top: 12px;
}
.box-btn_group .rt {
	float: right;
	width: 150px;
}
.box-btn_group button.hondana {
	width: 195px !important;
	margin-right: 10px;
}
.box-btn_group button.book-select { width: 147px;}
.box-btn_group button.movie,
.box-btn_group button.arasuji-quiz,
.box-btn_group button.kotoba-quiz {
	width: 67px;
}
.box-btn_group .rt button:nth-of-type(1) { margin-right: 3px;}
.box-btn_group img { width: 100%;}

.quiz .box-btn_group{
	width: 930px;
	position: relative;
	display: flex;
/*	margin-top: 45px;*/
}
.quiz .lt {
	width :40%;
}
.quiz .box-btn_group .rt{
	width: 20%;
}

.reading p.kotoba-quiz:hover {
	background: url("../images/bg_bt_kotoba-quiz.png") no-repeat;
	background-size: 67px auto;
	-moz-background-size: 67px auto;
	-webkit-background-size: 67px auto;
}
.reading p.movie:hover {
	background: url("../images/bg_bt_movie.png") no-repeat;
	background-size: 67px auto;
	-moz-background-size: 67px auto;
	-webkit-background-size: 67px auto;
}
.reading p.arasuji-quiz:hover {
	background: url("../images/bg_bt_arasuji-quiz.png") no-repeat;
	background-size: 67px auto;
	-moz-background-size: 67px auto;
	-webkit-background-size: 67px auto;
}
.reading button.kotoba-quiz:hover,
.reading button.movie:hover,
.reading button.arasuji-quiz:hover { 
	opacity: 0.7;
}

/** Close Button **/
button.close_btn {
	display: block;
	width: 111px;
	height: 46px;
	position: relative;
	border-radius: 23px;
	text-align: center;
	cursor: pointer;
	font-size: 1.7rem;
	margin: 0 auto;
	box-shadow:
		1px 1px 2px 1px rgba(000,000,000,0.3);
	color: #3e3403;
	background: -moz-linear-gradient(
		top,
		#ffdeba 0%,
		#fad8b2);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#ffdeba),
		to(#fad8b2));
	background: linear-gradient(
		to bottom,
		#ffdeba 0%,
		#fad8b2);
}
button.close_btn .kigo,
button.close_btn .moji {
	z-index: 20;
	text-shadow: 1px 2px 1px rgba(255,255,255,1.0);
	display: inline-block;
	margin-top: 5px;
	font-weight: bold;
}
button.close_btn .kigo {
	font-size: 1.2rem;
	margin-right: 7px;
	margin-top: 9px;
	vertical-align: top;
}
button.close_btn .heightlight {
	display: block;
	position: absolute;
	top: 4px;
	left: 4px;
	width: 103px;
	height: 38px;
	border-radius: 23px;
	background: -moz-linear-gradient(
		top,
		rgba(255, 255, 255,0.7) 0%,
		rgba(255, 255, 255,0.2) 30%,
		rgba(255, 255, 255,0.1) 40%,
		rgba(255, 255, 255,0) 100%);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(rgba(255, 255, 255,0.7)),
		color-stop(0.3, rgba(255, 255, 255,0.2)), 
		color-stop(0.4, rgba(255, 255, 255,0.1)), 
		to(rgba(255, 255, 255,0)));
	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255,0.7) 0%,
		rgba(255, 255, 255,0.2) 30%,
		rgba(255, 255, 255,0.1) 40%,
		rgba(255, 255, 255,0) 100%);
	z-index: 10;
}
.box-btn_group button.close_btn {
	margin: 0 0 0 49px;
}

/** Button: Hondana **/
input.hondana[type="image"],
button.hondana {
	width: 210px;
}
input.hondana[type="image"]:hover { opacity: 0.7;}
form p.hondana,
.book-select p.hondana { 
	display: inline-block;
}
.grade-select form p.hondana { display: block;}
form p.hondana:hover,
.book-select p.hondana:hover,
.reading p.hondana:hover {
	background: url("../images/bg_bt_hondana.png") no-repeat;
	background-size: 210px auto;
	-moz-background-size: 210px auto;
	-webkit-background-size: 210px auto;
}
.book-select button.hondana:hover,
.reading button.hondana:hover { 
	opacity: 0.7;
}

/** Button: Log Out **/
input.logout[type="image"] { width: 139px;}
input.logout[type="image"]:hover { opacity :0.7;}
form p.logout { display: inline-block;}
.grade-select form p.logout { display: block;}
form p.logout:hover {
	background: url("../images/bg_bt_logout.png") no-repeat;
	background-size: 139px auto;
	-moz-background-size: 139px auto;
	-webkit-background-size: 139px auto;
}
/** Button: Modoru **/
input.modoru[type="image"] { width: 124px;} 
input.modoru[type="image"]:hover { opacity: 0.7;}
form p.modoru { display: inline-block;}
form p.modoru:hover {
	background: url("../images/bg_bt_modoru.png") no-repeat;
	background-size: 124px auto;
	-moz-background-size: 124px auto;
	-webkit-background-size: 124px auto;
}

/** 
 *Button Group - Book Select / Hondana
**/
.box-btn_group02 {
	min-width: 1024px;
	padding: 0 3.5%;
}
.box-btn_group02 .lt { 
	float: left;
	padding-top: 4px;
}
.box-btn_group02 .rt { float: right;}
.box-btn_group02 input { margin-right: 12px;}


/* Page:
* Kyoshitsu Login(class=login-room) 
* Seito Login(class=login-student) 
---------------------------------------------------------------*/
.login-room .container {
	min-height: 400px;
	background: url("../images/bg_login-room_form.png") center top no-repeat;
	background-size: 400px 400px;
	-moz-background-size: 400px 400px;
	-webkit-background-size: 400px 400px;
}

.login-room h2 img {
	display: block;
	width: 392px;
	margin: 47px auto 33px;
}
.login-student h2 img {
	display: block;
	width: 141px;
	margin: 0 auto 16px;
}

form#room,/** Page：Kyoshitsu Login **/
form#student/** Page：Seito Login **/
{
	position: relative;
	width: 310px;
	height: 208px;
	margin: 0 auto;
	border-radius: 10px;
	padding-top: 30px;
	background: #e3d9ca;
	box-shadow:
		0px 3px 3px rgba(000,000,000,0.3),
		0px -1px 1px rgba(255,255,255,1);
}
form#student {
	height: 220px;
	margin-top: 131px;
	padding-top: 25px;
	background-color: rgba(227,217,202,0.8);
}

form#room input,
form#student input {
	border-radius: 6px;
	box-shadow: inset 1px 1px 1px rgba(000,000,000,0.3);
	padding: 0px 10px;
	outline: 0;
	border: 0;
	width: 100%;
	height: 27px;
	font-family: helvetica, arial;
}

form#room dt {
	float: left;
	width: 109px;
	height: 27px;
	text-align: center;
	color: #140700;
	font-size: 1.5rem;
	padding-top: 6px;
	margin-bottom: 15px;
}
form#room dd {
	float: right;
	width: 176px;
	margin-right: 25px;
	margin-bottom: 15px;
}

form#student dt {
	float: left;
	width: 94px;
	height: 27px;
	border-radius: 14px;
	text-align: center;
	color: #140700;
	font-size: 1.5rem;
	padding-top: 8px;
	margin-left: 15px;
	margin-bottom: 15px;
	background: #fff9f0;
	box-shadow: inset 1px 1px 1px rgba(000,000,000,0.3);
}
form#student dd {
	float: right;
	width: 176px;
	margin-right: 15px;
	margin-bottom: 15px;
}
form#student dt:nth-last-of-type(1),
form#student dd:nth-last-of-type(1) {
	margin-bottom: 9px;	
}

form#room input[type="radio"]{
    display: none;
}
form#room label{
    display: inline-block;
    position: relative;
    cursor: pointer;
    margin-left: 109px;
    padding-left: 18px;
	font-size: 1.3rem;
}
form#room label:before{
    position: absolute;
    content: "";
    top: 50%;
    left: 0px;
    width: 14px;
    height: 14px;
    margin-top: -8px;
    background: #fff;
    border-radius: 50%;
	box-shadow: inset 0px 1px 1px rgba(000,000,000,0.5);
}

form#room input[type="radio"]:checked + label:after {
    position: absolute;
    content: "";
    top: 50%;
    left: 3px;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    background: #6b890e;
	background: -moz-linear-gradient(
		top,
		#718e17 0%,
		#6b890e);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#718e17),
		to(#6b890e));
	background: linear-gradient(
		to bottom,
		#718e17 0%,
		#6b890e);
	box-shadow: inset 0px 1px 1px rgba(255,255,255,0.5);
}
form#room input[type="button"],
form#student input[type="button"] {
	display: block;
	width: 90px;
	height: 30px;
	line-height: 28px;
	position: relative;
	border-radius: 5px;
	text-align: center;
	cursor: pointer;
	font-size: 1.5rem;
	font-weight: bold;
	box-shadow:
		0px 1px 2px 1px rgba(000,000,000,0.3),
		inset 0px 1px 0px rgba(255,255,255,0.4);
}
form#room input[type="button"].login,
form#student input[type="button"].login {
	color: #fff;
	border: 1px solid #6b890f;
	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: 1px 1px 1px rgba(000,000,000,0.4);
}
form#room input[type="button"].finish,
form#student input[type="button"].finish {
	color: #0f2d0f;
	border: 1px solid #7c9e13;
	background: -moz-linear-gradient(
		top,
		#ccde84 0%,
		#b4cf61);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#ccde84),
		to(#b4cf61));
	background: linear-gradient(
		to bottom,
		#ccde84 0%,
		#b4cf61);
	text-shadow: 1px 1px 1px rgba(255,255,255,0.4);
}
form#room input[type="button"]:hover,
form#student input[type="button"]:hover {
	opacity: 0.7;
}

form#room ul,
form#student ul {
	width: 198px;
	margin: 18px auto 0;
}
form#room ul li,
form#student ul li {
	float: left;
}
form#room ul li:nth-of-type(1) ,
form#student ul li:nth-of-type(1) {
	margin-right: 18px;
}

/* Page: Grade Sentaku
---------------------------------------------------------------*/
.grade-select h2 img {
	position: absolute;
	display: block;
	width: 504px;
	top: 115px;
	left: 0;
	right: 0;
	margin: 0 auto;
}
.grade-select ul {
	position: relative;
	margin: 70px auto 0;
	width: 968px;
}
.grade-select li { float: left;}
.grade-select li.grade01,
.grade-select li.grade02,
.grade-select li.grade03,
.grade-select li.grade04 {
	width: 196px;
	margin-right: 40px;
	margin-bottom: 40px;
}
.grade-select li.grade01 img,
.grade-select li.grade02 img,
.grade-select li.grade03 img,
.grade-select li.grade04 img { /** Chromeでグレート1〜４の画像をhoverした時に、画像がずれるのを防ぐ対策 **/
	display: inline-block;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.grade-select li.grade01 { margin-left: 32px;}
.grade-select li.grade04 { margin-right: 32px;}
/*
.grade-select li.hanazono-bunko { 
	width: 245px;
	margin-left: 97px;
} 
.grade-select li.witch-room {
	width: 254px;
	margin-left: 50px;
	padding-top: 9px;
}
*/
.grade-select li.bt_form {
	padding-top: 62px;
} 
.grade-select form#button_group input {
	display: block;
	border: 0;
}
.grade-select input.hondana[type="image"] { margin-bottom: 25px;}
.grade-select ul img { width: 100%;}
.grade-select ul li a:hover img { opacity: 0.7;}
.grade-select li.grade01 a:hover,
.grade-select li.grade02 a:hover,
.grade-select li.grade03 a:hover,
.grade-select li.grade04 a:hover {
	display: inline-block;
	width: 196px;
	height: 234px;
	background: url("../images/bg_bt_grade.png") no-repeat;
	background-size: 196px auto;
	-moz-background-size: 196px auto;
	-webkit-background-size: 196px auto;
}
/*
.grade-select li.hanazono-bunko a:hover {
	display: inline-block;
	width: 245px;
	height: 219px;
	background: url("../images/bg_bt_hanazono-bunko.png") no-repeat;
	background-size: 245px auto;
	-moz-background-size: 245px auto;
	-webkit-background-size: 245px auto;
}
.grade-select li.witch-room a:hover {
	display: inline-block;
	width: 254px;
	height: 200px;
	background: url("../images/bg_bt_witch-room.png") no-repeat;
	background-size: 254px auto;
	-moz-background-size: 254px auto;
	-webkit-background-size: 254px auto;
}
*/
.grade-select li.hanazono-bunko { 
	width: 196px;
	margin-left: 410px;
} 
.grade-select li.hanazono-bunko a:hover {
	display: inline-block;
	width: 196px;
	background: url("../images/bg_bt_hanazono-bunko.png") no-repeat;
	background-size: 196px auto;
	-moz-background-size: 196px auto;
	-webkit-background-size: 196px auto;
}


/* Page: Reading Finish
---------------------------------------------------------------*/
.reading-finish h1 img {
	display: block;
	width: 685px;
	margin: 40px auto 0;
}
.box_reading {
	display: table;
	width: 685px;
	margin: 0 auto;
	padding-left: 114px;
}
.box_reading .lt {
	display: table-cell;
	width: 369px;
	padding-top: 20px;
	padding-bottom: 15px;
	font-size: 2.0rem;
	text-align: center;
}
.box_reading .lt img { 
	width: 319px;
	margin-bottom: 8px;
}
.box_reading .rt {
	display: table-cell;
	vertical-align: bottom;
}
.box_reading span.page,
.box_reading span.hour,
.box_reading span.minute{
	margin-right: 10px;
}
.box_reading span.minute{ margin-left: 20px;}

.box_reading .rt img {
	max-width: 128px;
	max-height: 164px;
}

form#reading{
	width: 685px;
	margin: 5px auto 0;
	text-align: center;
}
form#reading textarea {
	width: 386px;
	height: 148px;
	border-radius: 8px;
	padding: 15px;
	border: 2px solid #cada91;
	outline: 0;
	box-shadow: inset 0 0 1px rgba(000,000,000,0.3);
	color: #777;
	line-height: 1.5;
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 2.1rem;
	margin-bottom: 15px;
}

form#reading input[type="submit"] {
	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);
}

form#reading dl {
	width: 395px;
	height: 40px;
	border-radius: 8px;
	border: 2px solid #b89610;
	background: #b89610;
	margin: 34px auto 60px;
}
form#reading dt {
	float: left;
	width: 192px;
	height: 40px;
	padding-top: 9px;
	text-align: center;
	color: #fff;
	font-size: 2.1rem;
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
}
form#reading dd {
	float: left;
	width: 198px;
	height: 36px;
	padding-top: 6px;
	padding-left: 53px;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
	background: #fff;
}
form#reading dd span {
	display: block;
	float: left;
	margin-right: 12px;
	width: 22px;
	height: 23px;
	background: url("../images/star.png") center center;
	background-size: 22px 23px;
	-moz-background-size: 22px 23px;
	-webkit-background-size: 22px 23px;
}
form#reading dd span:hover,
form#reading dd span.select {
	background: url("../images/star_hover.png") center center;
	background-size: 22px 23px;
	-moz-background-size: 22px 23px;
	-webkit-background-size: 22px 23px;
	cursor: pointer;
}

/* Page: Kotoba Quiz / Arasuji Quiz
---------------------------------------------------------------*/
.kotoba-quiz_col3-img h1,
.kotoba-quiz_col3-txt h1,
.kotoba-quiz_row3 h1 {
	width: 914px;
	min-height: 54px;
	border-radius: 12px;
	border: 1px solid #c9c9c9;
	background: url("../images/bg_tit_kotoba-quiz.png") 15px 9px no-repeat #fff;;
	background-size: 204px 35px;
	-moz-background-size: 204px 35px;
	-webkit-background-size: 204px 35px;
	box-shadow:
		inset 0px 0px 1px rgba(0,0,0,0.4);
	color: #000;
	font-size: 2.4rem;
	padding: 12px 10px 5px 236px;
	margin: 33px auto 26px;
}

.arasuji-quiz_col3-img h1,
.arasuji-quiz_col3-txt h1,
.arasuji-quiz_row3 h1 {
	width: 914px;
	min-height: 54px;
	border-radius: 12px;
	border: 1px solid #c9c9c9;
	background: url("../images/bg_tit_arasuji-quiz.png") 15px 9px no-repeat #fff;;
	background-size: 212px 36px;
	-moz-background-size: 212px 36px;
	-webkit-background-size: 212px 36px;
	box-shadow:
		inset 0px 0px 1px rgba(0,0,0,0.4);
	color: #000;
	font-size: 2.4rem;
	padding: 12px 10px 5px 253px;
	margin: 33px auto 26px;
}

p.intro { 
	width: 914px;
	padding: 0 25px;
	margin: 0 auto;
}

dl.kotoba-quiz,
dl.arasuji-quiz {
	width: 864px;
	margin: 30px auto 0;
}
dl.kotoba-quiz dt,
dl.arasuji-quiz dt {
	float: left;
	width: 76px;
	height: 37px;
	border-radius: 7px;
	background: #24c2b4;
	font-size: 2.2rem;
	text-align: center;
	color: #fff;
	padding-top: 9px;
	box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
}
dl.arasuji-quiz dt { background: #2a7fd0;}

dl.kotoba-quiz dd,
dl.arasuji-quiz dd {
	float: left;
	width: 788px;
	height: 65px;
	font-size: 2.3rem;
	color: #015049;
	padding: 9px 0 0 20px;
}
dl.arasuji-quiz dd { color: #04315b;}

/** Layout： 3col **/
.box-col3 {
	width: 914px;
	margin: 170px auto 16px;
}
.box-col3 .col01,
.box-col3 .col02,
.box-col3 .col03 {
	float: left;
	display: table;
	width: 284px;
	height: 215px;
	margin-right: 31px;
	line-height: 1.5;
	border-radius: 7px;
	background: #fff;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.4);
}
.box-col3 div:last-child { margin-right: 0;}
.box-col3 .col01 p,
.box-col3 .col02 p,
.box-col3 .col03 p {
	display: table-cell;
	width: 100%;
	height: 100%;	
	text-align: center;
	vertical-align: middle;
	line-height: 1.5;
	font-size: 2.1rem;
	color: #000;
	text-shadow: 2px 2px 1px rgba(255,255,255,1.0);
}
.box-col3 p:hover { cursor: pointer;}

.box-col3 .green { border: 2px solid #24c0b3;}
.box-col3 .green:hover,
.box-col3 .col01.green.select,
.box-col3 .col02.green.select,
.box-col3 .col03.green.select { 
	background: #c9fff3;
}
body.kotoba-quiz_col3-img .box-col3 .green:hover,
body.kotoba-quiz_col3-img .box-col3 .col01.green.select,
body.kotoba-quiz_col3-img .box-col3 .col02.green.select,
body.kotoba-quiz_col3-img .box-col3 .col03.green.select { 
	background: #41fbd2;
}

.box-col3 .blue { border: 2px solid #2a7fd0;}
.box-col3 .blue:hover,
.box-col3 .col01.blue.select,
.box-col3 .col02.blue.select,
.box-col3 .col03.blue.select { 
	background: #c6e3ff;
}
body.arasuji-quiz_col3-img .box-col3 .blue:hover,
body.arasuji-quiz_col3-img .box-col3 .col01.blue.select,
body.arasuji-quiz_col3-img .box-col3 .col02.blue.select,
body.arasuji-quiz_col3-img .box-col3 .col03.blue.select { 
	background: #2892f9;
}

.box-col3 img { 
	display: block;
	width: 100%;
	border-radius: 7px;
}
.box-col3 img:hover,
.box-col3 .col01.select img,
.box-col3 .col02.select img,
.box-col3 .col03.select img { 
	opacity: 0.7;
}

/** Layout： 3row **/
.box-row3 {
	width: 864px;
	margin: 170px auto 16px;
}
.box-row3 .row01,
.box-row3 .row02,
.box-row3 .row03 {
	display: table;
	width: 100%;
	height: 60px;
	margin-bottom: 20px;
	line-height: 1.5;
	border-radius: 7px;
	background: #fff;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.4);
}
.box-row3 div:last-child { margin-bottom: 0;}
.box-row3 .row01 p,
.box-row3 .row02 p,
.box-row3 .row03 p {
	display: table-cell;
	width: 100%;
	height: 100%;	
	padding: 10px 20px 6px;
	vertical-align: middle;
	line-height: 1.5;
	font-size: 2.1rem;
	color: #000;
	text-shadow: 2px 2px 1px rgba(255,255,255,1.0);
}
.box-row3 p:hover { cursor: pointer;}

.box-row3 .green { border: 2px solid #24c0b3;}
.box-row3 .green:hover,
.box-row3 .row01.green.select,
.box-row3 .row02.green.select,
.box-row3 .row03.green.select { 
	background: #c9fff3;
}

.box-row3 .blue { border: 2px solid #2a7fd0;}
.box-row3 .blue:hover,
.box-row3 .row01.blue.select,
.box-row3 .row02.blue.select,
.box-row3 .row03.blue.select { 
	background: #c6e3ff;
}
#id-answer-list .correct {
	border:2px solid #ff7f50;
}
#id-answer-list .correct > p,
#id-answer-list .correct > span {
	color: #ff7f50;
}
#answer-head-msg {
	position: absolute;
/*	font-size: 14px;*/
	display: none;
}

/** Button **/
button.next_btn {
	display: block;
	width: 228px;
	height: 54px;
	position: relative;
	border-radius: 27px;
	font-size: 2.0rem;
	text-align: center;
	margin: 0 auto;
	box-shadow:
		1px 1px 1px 1px rgba(000,000,000,0.3);
	border: 1px solid #e0dcdb;
	outline: 0;
	background: -moz-linear-gradient(
		top,
		#fff 0%,
		#efedee);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#fff),
		to(#efedee));
	background: linear-gradient(
		to bottom,
		#fff 0%,
		#efedee);
}
button.next_btn .text {
	display: inline-block;
	font-weight: bold;
	padding-top: 2px;
	margin-right: 4px;
}
button.next_btn .icon {
	position: relative;
	display: inline-block;
	width: 71px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	top: 3px;
	margin-left: 4px;
}
button.next_btn .icon:before {
	position: absolute;
	top: 4px;
	left: 8px;
	content: ' ';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 0 6px 7px;
	border-color: transparent transparent transparent #f5f5f5;
	z-index: 10;
}
button.next_btn .text.green { color: #1c9d92;}
button.next_btn .icon.green { background: #1a9c90;}

button.next_btn .text.blue { color: #126abc;}
button.next_btn .icon.blue { background: #2a7fd0;}

/* Page: Kotoba Quiz Result / Arasuji Quiz Result
---------------------------------------------------------------*/
.kotoba-quiz_result h1 img,
.arasuji-quiz_result h1 img {
	display: block;
	width: 685px;
	margin: 40px auto 20px;
}
.kotoba-quiz_result h2,
.arasuji-quiz_result h2 {
	text-align: center;
	font-size: 2.5rem;
	font-weight: bold;
	margin-bottom: 25px;
}
.box_result {
	width: 685px;
	margin: 0 auto 30px;
}
.box_result .lt {
	float: left;
	width: 214px;
	text-align: right;
}
.box_result .lt img { width: 78px;}

.box_result .rt {
	float: left;
	width: 471px;
	padding-left: 13px;
	font-size: 2.1rem;
}
p.result { 
	font-size: 1.9rem;
	margin-bottom: 3px;
}
p.result .number,
span.question.number {
	font-family: helvetica, arial;
}
span.question.number { margin: 0 7px;}
span.answer {
	font-size: 3.0rem;
	margin-right: 7px;
}
span.answer.green { color: #06b9a9;}
span.answer.blue { color: #2a7fd0;}
span.answer .number { margin-right: 14px;}

.box_result p.comment { padding-left: 3px;}

.kotoba-quiz_result .teacher,
.arasuji-quiz_result .teacher {
	text-align: center;
}
.kotoba-quiz_result .teacher img,
.arasuji-quiz_result .teacher img {
	width: 89px;
}

/* Page: Book Select / Hondana
---------------------------------------------------------------*/
ul.book-select,
ul.hondana {
	min-width: 1024px;
	height: 303px;
	display: -webkit-flex;
	display: flex;
	justify-content : space-between;
	-webkit-justify-content : space-between;
	align-items: flex-end;
	-webkit-align-items: flex-end;
	padding: 0 7% 92px;
	background: url("../images/shelf_tana_brown.png") center 186px no-repeat;
	background-size: 100% 105px;
	-moz-background-size: 100% 105px;
	-webkit-background-size: 100% 105px;
	margin: 0 auto;
}
ul.hondana {
	height: 307px;
	background: url("../images/shelf_tana_white.png") center 190px no-repeat;
	background-size: 100% 105px;
	-moz-background-size: 100% 105px;
	-webkit-background-size: 100% 105px;
	margin: 0 auto;
}

ul.book-select img,
ul.hondana img {
	display: block;
	max-height: 190px;
	max-width: 154px;
	border: 1px solid #aea470;
	box-shadow: 
		3px 0 1px 1px rgba(000,000,000,0.3),
		0 3px 2px 1px rgba(000,000,000,0.2);
}

ul.book-select li,
ul.hondana li {
	position: relative;
	cursor: pointer;
}
ul.hondana li > img:hover { 
	opacity: 0.8;
}

ul.book-select li.new:before {
    position: absolute;
    content: "";
	background: url("../images/ribbon1_new_book.png") right top no-repeat;
	background-size: 55px 63px;
	-moz-background-size: 55px 63px;
	-webkit-background-size: 55px 63px;
    top: 0;
	right: 0;
	width: 55px;
	height: 63px;
	z-index: 10;
	cursor: pointer;
}
ul.book-select li.new:after {
    position: absolute;
    content: "";
	background: url("../images/ribbon2_new_book.png") right top no-repeat;
	background-size: 55px 63px;
	-moz-background-size: 55px 63px;
	-webkit-background-size: 55px 63px;
    bottom: 0;
	left: 0;
	width: 55px;
	height: 63px;
	z-index: 10;
	cursor: pointer;
}

ul.hondana li.bookmark:before {
    position: absolute;
    content: "";
	background: url("../images/ribbon_bookmark.png") right top no-repeat;
	background-size: 28px 48px;
	-moz-background-size: 28px 48px;
	-webkit-background-size: 28px 48px;
    top: 0;
	right: 10px;
	width: 28px;
	height: 48px;
	z-index: 10;
	cursor: pointer;
}

ul.hondana .status {
	width: 100%;
	min-width: 135px;
	position: absolute;
	display: -webkit-flex;
	display: flex;
	align-items: flex-end;
	margin-top: 13px;
	-webkit-align-items: flex-end;
	cursor: default;
}
.status span.number {
	display: inline-block;
	width: 33px;
	height: 33px;
	background: url("../images/medal_clover.png") center top no-repeat;
	background-size: 33px 33px;
	-moz-background-size: 33px 33px;
	-webkit-background-size: 33px 33px;
	text-align: center;
	font-size: 1.9rem;
	font-family: helvetica, arial;
	color: #0f5300;
	padding-top: 4px;
	margin-right: auto;
	margin-bottom: 1px;
}
ul.hondana .status img {
	width: 32px;
    box-shadow: none;
	border: none;
	padding-top: 1px;
}
.empty {
	width: 150px;
	height: 0;
}

/**
 * Pop Up Window 
**/
.popup-wrapper {
	position: fixed;
	max-width: 236px;
	background-color: rgba(41,52,37,0.9); 
	border-radius: 15px;
	padding: 15px 20px;
  	display: none;
	z-index: 500;
	cursor: pointer;
}
.popup-wrapper h4 {
	color: #fff;
	font-size: 2.0rem;
	margin-bottom: 10px;
}
.contents-wrapper { padding: 0 15px;}

.book-image img {
	display: block;
	border: 1px solid #ccc;
	border-radius: 2px;
	margin: 0 auto 5px;
	max-height: 205px;
	max-width: 166px;
}
.popup-wrapper ul.star { margin: 0 auto;}
.popup-wrapper ul.star li { 
	float: left;
	width: 18px;
	margin-right: 5px;
}
.popup-wrapper ul.star li img { width: 100%;}
.popup-wrapper .page {
	color: #fff;
	text-align: center;
	font-size: 1.4rem;
}
.popup-wrapper .page span {
	font-size: 1.2rem;
	font-family: 'Crimson';
	margin-right: 8px;
}

.gauge-wrapper {
    position: relative;
    width: 100%;
    height: 19px;
    border: 1px solid #b89774;
	border-radius: 2px;
    background: #d2e4f9;
	padding: 1px;
	margin: 0 auto 8px;
}
.popup-wrapper .gauge {
    position: relative;
	width: 70%;
    height: 15px;
	line-height: 17px;
	text-align: center;
	font-size: 1.4rem;
	font-family: helvetica, arial;
	color: #fff;
	font-weight: bold;
	background-image: linear-gradient( -45deg, #ffa200 25%, #ff7100 25%, #ff7100 50%, #ffa200 50%, #ffa200 75%, #ff7100 75%, #ff7100 );
	background-size: 4px 4px;
	-moz-background-size: 4px 4px;
	-webkit-background-size: 4px 4px;
	z-index: 1;
}
.popup-wrapper .gauge span { 
    position: relative;
	z-index: 5;
}
.popup-wrapper .gauge:after {
	position: absolute;
	top: 0;
	left: 0;
    content: "";
	width: 100%;
	height: 15px;
	background: -moz-linear-gradient(
		bottom,
		rgba(255, 111, 2,0.8) 0%,
		rgba(255, 111, 2,0.5) 40%,
		rgba(255, 111, 2,0.2) 60%,
		rgba(255, 111, 2,0) 100%);
	background: -webkit-gradient(
		linear, left bottom, left top,
		from(rgba(255, 111, 2,0.8)),
		color-stop(0.4, rgba(255, 111, 2,0.5)), 
		color-stop(0.6, rgba(255, 111, 2,0.2)), 
		to(rgba(255, 111, 2,0)));
	background: linear-gradient(
		to top,
		rgba(255, 111, 2,0.8) 0%,
		rgba(255, 111, 2,0.5) 40%,
		rgba(255, 111, 2,0.2) 60%,
		rgba(255, 111, 2,0) 100%);
	z-index: 2;	
}

#popup-overlay {
	z-index: 200;
	display: none ;
	position: fixed ;
	top: 0 ;
	left: 0 ;
	width: 100% ;
	height: 120% ;
	background-color: rgba( 255,255,255, 0);
	cursor: pointer;
}

/* Page: Reading
---------------------------------------------------------------*/
.box-reading .lt {
	position: relative;
	width: 50%;
	float: left;
	padding-left: 18px;
	padding-top: 94px;
}
.box-reading .rt {
	position: relative;
	width: 50%;
	float: right;
	padding-right: 18px;
	padding-top: 50px;
}
.box-reading h1 {
	text-align: center;
	font-size: 5.0rem;
	letter-spacing: 2px;
	line-height: 1.1;
	margin-bottom: 6px;
}
.profile-wrapper { 
	position: relative;
	text-align: center;
	margin-bottom: 65px;
}
.profile-wrapper h2 { font-size: 2.0rem;}

button.profile_btn {
	position: absolute;
	top: 0;
	right: 42px;
	width: 116px;
	height: 26px;
	border-radius: 13px;
	border: 1px solid #008fd5;
	line-height: 25px;
	text-align: center;
	color: #fff;
	font-size: 1.4rem;
	box-shadow:
		0 1px 1px rgba(000,000,000,0.4),
		inset 0 1px 1px rgba(255,255,255,0.4);
	background: -moz-linear-gradient(
		top,
		#00bfe9 0%,
		#0090d9);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#00bfe9),
		to(#0090d9));
	background: linear-gradient(
		to bottom,
		#00bfe9 0%,
		#0090d9);
		text-shadow: inset 1px 1px 0 rgba(000,000,000,1.0);
}

.reading_status-wrapper {
	position: relative;
}
.reading_status-wrapper .box-book {
	display: table;
	margin: 0 auto 13px;
}
.reading .book {
	display: table-cell;
	width: 156px;
	height: 116px;
	padding: 0;
}
.box-book .book img { 
	width: 100%;
	display: block;
}
.box-book .btn {
	display: table-cell;
	vertical-align: middle;
}

.box-book button.next_btn,
.box-book button.back_btn {
	position: relative;
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 27px;
	margin-left: 4px;
	box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
	border: 1px solid #ddd;
	background: -moz-linear-gradient(
		top,
		#fff 0%,
		#efefef);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#fff),
		to(#efefef));
	background: linear-gradient(
		to bottom,
		#fff 0%,
		#efefef);
}
.box-book button.back_btn { margin-right: 4px;}
.box-book button.next_btn:before {
	position: absolute;
	top: 11px;
	left: 16px;
	content: ' ';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 0 8px 10px;
	border-color: transparent transparent transparent #266218;
	z-index: 10;
}
.box-book button.back_btn:before {
	position: absolute;
	top: 11px;
	right: 15px;
	content: ' ';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 10px 8px 0;
	border-color: transparent #266218 transparent transparent;
	z-index: 10;
}

.box-book button.next_btn:hover,
.box-book button.back_btn:hover {
	opacity: 1.0;
}

.box-book button.next_btn:hover:before {
	border-color: transparent transparent transparent #5de31b;
}
.box-book button.back_btn:hover:before {
	border-color: transparent #5de31b transparent transparent;
}

.reading_status-wrapper .box-page-number { 
	margin: 0 auto 62px;
	padding-left: 187px;
}
.box-page-number span.number {
	display: inline-block;
	width: 100px;
	height: 30px;
	line-height: 30px;
	border-radius: 15px;
	font-size: 2.0rem;
	font-family: 'Crimson';
	text-align: center;
	margin-right: 7px;
	box-shadow: 0 0 1px rgba(000,000,000,0.3);
	border: 1px solid #d2d2d2;
	background: -moz-linear-gradient(
		top,
		#fbfbfb 5%,
		#e8e8e8 50%,
		#eaeaea);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#fbfbfb),
		color-stop(0.05, #fbfbfb),
		color-stop(0.5, #e8e8e8),
		to(#eaeaea));
	background: linear-gradient(
		to bottom,
		#fbfbfb 5%,
		#e8e8e8 50%,
		#eaeaea);
}
.box-page-number span.total-number {
	font-size: 1.5rem;
	font-family: 'Crimson';
	margin-right: 5px;
	font-weight: bold;
}

/** 
 * Seek Bar
**/
.reading_gauge-wrapper,
.sound_gauge-wrapper {
    position: relative;
    width: 220px;
    height: 9px;
    border: 1px solid #b1b1b1;
	border-radius: 5px;
	background: -moz-linear-gradient(
		top,
		#dfdfdf 0%,
		#e0e0e0);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#dfdfdf),
		to(#e0e0e0));
	background: linear-gradient(
		to bottom,
		#dfdfdf 0%,
		#e0e0e0);
	margin: 0 auto;
}
.reading_gauge-wrapper .gauge {
    position: relative;
	width: 0;
    height: 9px;
	margin-top: -1px;
	border-radius: 5px;
	background-image: linear-gradient( -45deg, #c8e9be 25%, #7ccf57 25%, #7ccf57 50%, #c8e9be 50%, #c8e9be 75%, #7ccf57 75%, #7ccf57 );
	background-size: 3px 3px;
	-moz-background-size: 3px 3px;
	-webkit-background-size: 3px 3px;
	z-index: 1;
}
.sound_gauge-wrapper .gauge {
    position: relative;
	width: 0;
    height: 9px;
	margin-top: -1px;
	border-radius: 5px;
	background-image: linear-gradient( -45deg, #b5d4ef 25%, #3c91d6 25%, #3c91d6 50%, #b5d4ef 50%, #b5d4ef 75%, #3c91d6 75%, #3c91d6 );
	background-size: 3px 3px;
	-moz-background-size: 3px 3px;
	-webkit-background-size: 3px 3px;
	z-index: 1;
}

.reading_gauge-wrapper .gauge span,
.sound_gauge-wrapper .gauge span { 
    position: relative;
	z-index: 5;
}
.reading_gauge-wrapper .gauge:after,
.sound_gauge-wrapper .gauge:after {
	position: absolute;
	top: 0;
	left: 0;
    content: "";
	width: 100%;
	height: 7px;
	border: 1px solid #7eb969;
	border-radius: 5px;
	background: -moz-linear-gradient(
		bottom,
		rgba(000, 000, 000,0.3) 0%,
		rgba(000, 000, 000,0.1) 50%,
		rgba(000, 000, 000,0) 100%);
	background: -webkit-gradient(
		linear, left bottom, left top,
		from(rgba(000, 000, 000,0.3)),
		color-stop(0.5, rgba(000, 000, 000,0.1)), 
		to(rgba(000, 000, 000,0)));
	background: linear-gradient(
		to top,
		rgba(000, 000, 000,0.3) 0%,
		rgba(000, 000, 000,0.1) 50%,
		rgba(000, 000, 000,0) 100%);
	box-shadow: 0 1px rgba(000,000,000,0.2);
	z-index: 2;	
}
.sound_gauge-wrapper .gauge:after { border: 1px solid #3072c9;}

.reading_gauge-wrapper a.handle,
.sound_gauge-wrapper a.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;	
}
a.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;
}
a.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;
}
a.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;
}

/** Sound Bar**/
.sound-bar {
	width: 255px;
	margin-left: 74px;
}
.sound-bar .icon-volume {
	float: left;
	width: 26px;
}
.sound-bar .sound_gauge-wrapper { 
	float: right;
	margin-top: 7px;
}

.icon-volume button:hover { opacity: 1;}
.icon-volume button.volume_btn {
	width: 26px;
	height: 23px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	background: url("../images/ico_volume.png") center center no-repeat;
	background-size: 26px 23px;
	-moz-background-size: 26px 23px;
	-webkit-background-size: 26px 23px;
}
.icon-volume button.volume_btn.active {
	background: url("../images/ico_volume_off.png") center center no-repeat;
	background-size: 26px 23px;
	-moz-background-size: 26px 23px;
	-webkit-background-size: 26px 23px;
}


/**
 * Speed Sentaku
**/
.speed_select-wrapper { position: relative;}
.speed_select-wrapper .title {
	float: left;
	width: 67px;
	padding: 15px 0 0 9px;
	color: #013851;
	font-size: 1.3rem;
}
.speed_select-wrapper .box-gauge {
	float: left;
	width: 408px;
	padding: 0;
}
.box-gauge dt {
	float: left;
	clear:left;
	width: 39px;
	height: 39px;
	border-radius: 50%;
	margin-right: 5px;
	margin-bottom: 3px;
}
.box-gauge dt,
.other-speed_panel ul li {
	box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
	background: -moz-linear-gradient(
		top,
		#53adeb 0%,
		#3ca4e3 30%,
		#339cde 50%,
		#f5f5f5);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#53adeb),
		color-stop(0.3, #3ca4e3),
		color-stop(0.5, #339cde),
		to(#f5f5f5));
	background: linear-gradient(
		to bottom,
		#53adeb 0%,
		#3ca4e3 30%,
		#339cde 50%,
		#2289d4);
}

.box-gauge dd {
	float: left;
	width: 364px;
	height: 28px;
	line-height: 28px;
	color: #8d8d8d;
	font-size: 2.3rem;
	margin-top: 6px;
	padding-left: 7px;
	border: 1px solid #d6d6d6;
	box-shadow:
		1px 1px 1px rgba(0,0,0,0.5),
		inset 0 -1px 1px rgba(255,255,255,0.5);
	background: -moz-linear-gradient(
		top,
		#f7f7f7 5%,
		#f0f0f0 30%,
		#e0e0e0 50%,
		#bfbfc1);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#f7f7f7),
		color-stop(0.05, #f7f7f7),
		color-stop(0.3, #f0f0f0),
		color-stop(0.5, #e0e0e0),
		to(#bfbfc1));
	background: linear-gradient(
		to bottom,
		#f7f7f7 5%,
		#f0f0f0 30%,
		#e0e0e0 50%,
		#bfbfc1);
}

.box-gauge dt.select,
.box-gauge dt:hover,
.other-speed_panel ul li.select,
.other-speed_panel ul li:hover {
	position: relative;
	box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
	background: -moz-linear-gradient(
		top,
		#ffa300 0%,
		#fa9700 50%,
		#f07500);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#ffa300),
		color-stop(0.5, #fa9700),
		to(#f07500));
	background: linear-gradient(
		to bottom,
		#ffa300 0%,
		#fa9700 50%,
		#f07500);
	z-index: 1;
}
.box-gauge dt.select span.heightlight,
.box-gauge dt:hover span.heightlight,
.other-speed_panel ul li.select span.heightlight,
.other-speed_panel ul li:hover span.heightlight {
	display: block;
	position: absolute;
	top: 1px;
	left: 1px;
	width: 37px;
	height: 37px;
	border-radius: 50%;
	background: -moz-linear-gradient(
		top,
		rgba(255, 255, 255,0.6) 0%,
		rgba(255, 255, 255,0.4) 30%,
		rgba(255, 255, 255,0.1) 40%,
		rgba(255, 255, 255,0) 100%);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(rgba(255, 255, 255,0.6)),
		color-stop(0.3, rgba(255, 255, 255,0.4)), 
		color-stop(0.4, rgba(255, 255, 255,0.1)), 
		to(rgba(255, 255, 255,0)));
	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255,0.6) 0%,
		rgba(255, 255, 255,0.4) 30%,
		rgba(255, 255, 255,0.1) 40%,
		rgba(255, 255, 255,0) 100%);
	z-index: 10;
}
.other-speed_panel ul li.select span.heightlight,
.other-speed_panel ul li:hover span.heightlight {
	width: 48px;
	height: 48px;
}

.box-gauge dd.select {
	color: #fff;
	border: 1px solid #ff7c00;
	box-shadow:
		1px 1px 1px rgba(0,0,0,0.5),
		inset 0 -1px 1px rgba(255,217,0,0.8);
	background: -moz-linear-gradient(
		top,
		#ffdc01 5%,
		#fabe0c 40%,
		#fab00c 60%,
		#fe9b02);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#ffdc01),
		color-stop(0.05, #ffdc01),
		color-stop(0.4, #fabe0c),
		color-stop(0.6, #fab00c),
		to(#fe9b02));
	background: linear-gradient(
		to bottom,
		#ffdc01 5%,
		#fabe0c 40%,
		#fab00c 60%,
		#fe9b02);
}

.box-gauge dd span {
	font-family: helvetica, arial;
	font-size: 2.4rem;
	margin-right: 2px;
}
.box-gauge dt:hover {
	cursor: pointer;
}

dt.num1 { padding: 5px 0 0 11px;}
dt.num1 img { width: 13px;}
dd.num1 { width: 341px;}

dt.num1-5 { padding: 9px 0 0 4px;}
dt.num1-5 img { width: 32px;}
dd.num1-5 { width: 263px;}

dt.num2 { padding: 5px 0 0 11px;}
dt.num2 img { width: 18px;}
dd.num2 { width: 212px;}

dt.num2-5 { padding: 9px 0 0 4px;}
dt.num2-5 img { width: 33px;}
dd.num2-5 { width: 148px;}

dt.num3 { padding: 5px 0 0 11px;}
dt.num3 img { width: 18px;}
dd.num3 { width: 134px;}

dt.num3-5 { padding: 9px 0 0 4px;}
dt.num3-5 img { width: 33px;}
dd.num3-5 { width: 118px;}

dt.num4 { padding: 6px 0 0 9px;}
dt.num4 img { width: 19px;}
dd.num4 { width: 101px;}


/** Select Speed Hyoji **/
.slect-speed {
	position: absolute;
	margin: 0 auto;
	right: 20px;
	bottom: 0;
	font-size: 2.1rem;
	color: #013851;
}
.slect-speed span.number {
	display: inline-block;
	width: 95px;
	height: 35px;
	line-height: 35px;
	border-radius: 18px;
	font-size: 2.5rem;
	font-family: helvetica, arial;
	color: #333;
	text-align: center;
	margin-right: 7px;
	box-shadow: 0 0 1px rgba(000,000,000,0.3);
	border: 1px solid #d2d2d2;
	background: -moz-linear-gradient(
		top,
		#fbfbfb 5%,
		#e8e8e8 50%,
		#eaeaea);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#fbfbfb),
		color-stop(0.05, #fbfbfb),
		color-stop(0.5, #e8e8e8),
		to(#eaeaea));
	background: linear-gradient(
		to bottom,
		#fbfbfb 5%,
		#e8e8e8 50%,
		#eaeaea);
}

/** Sonota no Sokudo **/
.other-speed_select-wrapper {
	position: relative;
	width: 448px;
	margin: 25px 0 0 25px;
}
button.other-speed {
	position: relative;
	width: 135px;
	height: 30px;
	border-radius: 15px;
	border: 1px solid #0080c5;
	line-height: 30px;
	color: #005c8e;
	text-align: left;
	font-size: 1.3rem;
	font-family: "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	padding-left: 15px;
	background: -moz-linear-gradient(
		top,
		#effaff 0%,
		#eaf9ff 50%,
		#e3f6ff);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#effaff),
		color-stop(0.5, #eaf9ff),
		to(#e3f6ff));
	background: linear-gradient(
		to bottom,
		#effaff 0%,
		#eaf9ff 50%,
		#e3f6ff);
	box-shadow: 0 1px 1px rgba(000,000,000,0.5);
}
button.other-speed span.btn_arrow,
button.panel_close {
	position: absolute;
	display: block;
	width: 30px;
	height: 30px;
	top: -1px;
	right: -1px;
	border-radius: 50%;
	background: -moz-linear-gradient(
		top,
		#0076b6 0%,
		#006ba4);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#0076b6),
		to(#006ba4));
	background: linear-gradient(
		to bottom,
		#0076b6 0%,
		#006ba4);
}
button.panel_close { right: -10px;}

button.other-speed span.btn_arrow:before {
	position: absolute;
	top: 9px;
	left: 13px;
	content: ' ';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 0 6px 8px;
	border-color: transparent transparent transparent #fff;
	z-index: 10;
}
button.panel_close:before {
	position: absolute;
	top: 9px;
	left: 10px;
	content: ' ';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 8px 6px 0;
	border-color: transparent #fff transparent transparent;
	z-index: 10;
}

button.other-speed:hover,
button.panel_close:hover {
	opacity: 1.0;
	border: 1px solid #1abaff;
}
button.panel_close:hover { border: none;}
button.other-speed:hover span.btn_arrow,
button.panel_close:hover {
	background: -moz-linear-gradient(
		top,
		#15bdfe 0%,
		#0db3ff);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#15bdfe),
		to(#0db3ff));
	background: linear-gradient(
		to bottom,
		#15bdfe 0%,
		#0db3ff);
}
.other-speed_panel {
	position: absolute;
	top: 0;
	display: none;
	width: 439px;
	min-height: 170px;
	border-radius: 8px;
	border: 1px solid #0080c5;
	background: -moz-linear-gradient(
		top,
		#f0fbff 5%,
		#effaff 30%,
		#ebfaff 50%,
		#def8f9);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#f0fbff),
		color-stop(0.05, #eaf9ff),
		color-stop(0.3, #effaff),
		color-stop(0.5, #ebfaff),
		to(#def8f9));
	background: linear-gradient(
		to bottom,
		#f0fbff 5%,
		#effaff 30%,
		#ebfaff 50%,
		#def8f9);
	box-shadow: 0 1px 1px rgba(000,000,000,0.5);
	z-index: 500;
}
.other-speed_panel p.title {
	color: #005c8e;
	font-size: 1.3rem;
	padding: 5px 0 8px 10px;
}
.other-speed_panel ul { padding: 0 0 14px 31px;}
.other-speed_panel ul li {
	float: left;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	margin-right: 5px;
	margin-bottom: 11px;
	box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
.other-speed_panel ul li:hover { cursor: pointer;}

li.num0-5 { padding: 12px 0 0 5px;}
li.num0-5 img { width: 40px;}

li.num0-8 { padding: 12px 0 0 5px;}
li.num0-8 img { width: 40px;}

li.num4-5 { padding: 13px 0 0 5px;}
li.num4-5 img { width: 40px;}

li.num5 { padding: 8px 0 0 15px;}
li.num5 img { width: 22px;}

li.num5-5 { padding: 13px 0 0 6px;}
li.num5-5 img { width: 40px;}

li.num6 { padding: 8px 0 0 13px;}
li.num6 img { width: 23px;}

li.num6-5 { padding: 13px 0 0 6px;}
li.num6-5 img { width: 40px;}

li.num7 { padding: 9px 0 0 14px;}
li.num7 img { width: 23px;}

li.num7-5 { padding: 13px 0 0 6px;}
li.num7-5 img { width: 40px;}

li.num8 { padding: 7px 0 0 14px;}
li.num8 img { width: 23px;}

li.num8-5 { padding: 13px 0 0 6px;}
li.num8-5 img { width: 40px;}

li.num9 { padding: 7px 0 0 14px;}
li.num9 img { width: 23px;}

li.num9-5 { padding: 12px 0 0 6px;}
li.num9-5 img { width: 40px;}

li.num10 { padding: 8px 0 0 4px;}
li.num10 img { width: 41px;}


/**
 * Player
**/
/** Plaer Button**/
.plaer_button-wrapper { margin: 126px 0 48px 146px;}
.plaer_button-wrapper button:hover { opacity: 1;}
.plaer_button-wrapper button.play_btn {
	width: 66px;
	height: 59px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	background: url("../images/btn_play_off.png") center center no-repeat;
	background-size: 66px 59px;
	-moz-background-size: 66px 59px;
	-webkit-background-size: 66px 59px;
	margin-right: 4px;
}
.plaer_button-wrapper button.play_btn.active {
	background: url("../images/btn_play_on.png") center center no-repeat;
	background-size: 66px 59px;
	-moz-background-size: 66px 59px;
	-webkit-background-size: 66px 59px;
}

.plaer_button-wrapper button.pause_btn {
	width: 66px;
	height: 59px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	background: url("../images/btn_stop_off.png") center center no-repeat;
	background-size: 66px 59px;
	-moz-background-size: 66px 59px;
	-webkit-background-size: 66px 59px;
}
.plaer_button-wrapper button.pause_btn.active {
	background: url("../images/btn_stop_on.png") center center no-repeat;
	background-size: 66px 59px;
	-moz-background-size: 66px 59px;
	-webkit-background-size: 66px 59px;
}

/**
 * Button Layout（Button:Book Select、My Hondana、Reading、Quiz、Movie）
**/
.button-box_lt {
	position: absolute;
	left: 62px;
	top: 560px;
	z-index: 300;
}
.button-box_lt button {
	display: block;
	margin-top: 9px;
}
.button-box_lt button.book-select,
.box-btn_group02 button.book-select { 
	width: 158px;
}
.my-hondana p.book-select { display: inline-block;}
.my-hondana p.book-select:hover,
.reading p.book-select:hover {
	background: url("../images/bg_bt_book-select.png") no-repeat;
	background-size: 158px auto;
	-moz-background-size: 158px auto;
	-webkit-background-size: 158px auto;
}
.my-hondana button.book-select:hover,
.reading button.book-select:hover { 
	opacity: 0.7;
}

.button-box_rt {
	position: absolute;
	right: 53px;
	top: 472px;
	z-index: 300;
}
.button-box_rt button {
	display: block;
	margin-top: 5px;
}
.button-box_rt button.movie,
.button-box_rt button.arasuji-quiz,
.button-box_rt button.kotoba-quiz {
	width: 67px;
}

/* Page: Movie
---------------------------------------------------------------*/
.movie h1 {
	width: 914px;
	min-height: 54px;
	border-radius: 12px;
	border: 1px solid #c9c9c9;
	background: url("../images/bg_tit_movie.png") 15px 14px no-repeat #fff;;
	background-size: 161px 27px;
	-moz-background-size: 161px 27px;
	-webkit-background-size: 161px 27px;
	box-shadow:
		inset 0px 0px 1px rgba(0,0,0,0.4);
	color: #000;
	font-size: 2.4rem;
	padding: 12px 10px 5px 196px;
	margin: 33px auto 26px;
}

/**
 * Movie Plaer
**/
.video-player-frame {
	width: 904px;
	margin: 0 auto;
	border: 2px solid #bfbdb0;
}
.video-wrapper { 
	height: 506px;
	background: #fff;
}
.video-player-frame video {
	width: 100%;
	height: 100%;
}

.movie-bar {
	height: 34px;
	border-radius: 2px;
	background: -moz-linear-gradient(
		top,
		#484b4c 0%,
		#393b3c 50%,
		#2c2d2e);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#484b4c),
		color-stop(0.5, #393b3c),
		to(#2c2d2e));
	background: linear-gradient(
		to bottom,
		#484b4c 0%,
		#393b3c 50%,
		#2c2d2e);
	margin: 0 auto;
	border-top: 1px solid #bfbdb0;
}
.icon-play {
	float: left;
	width: 36px;
	height: 33px;
	border-right: 1px solid #37383a;
}
.play_gauge-box {
	float: left;
/*	width: 690px;*/
	width: 625px;
	height: 33px;
	border-left: 1px solid #404143;
/*	border-right: 1px solid #353938;*/
/*	padding: 13px 24px 0 15px;*/
	padding: 13px 12px 0 15px;
}
.play-total-duration {
	float: left;
	width: 65px;
	height: 33px;
	font-size: 12px;
	color: #fff;
	border-right: 1px solid #353938;
	padding: 10.5px 0 0 0;
}
.icon-onsei {
	float: left;
	width: 37px;
	height: 33px;
	border-left: 1px solid #494a4c;
}
.onsei_gauge-box {
	float: left;
	width: 137px;
	height: 33px;
	padding: 13px 18px 0 0; 
}

/** Plaer Button**/
.movie-bar button:hover { opacity: 1;}
.movie-bar button.play_btn {
	width: 100%;
	height: 100%;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	background: url("../images/ico_movie-play.png") center center no-repeat;
	background-size: 9px 11px;
	-moz-background-size: 9px 11px;
	-webkit-background-size: 9px 11px;
}
.movie-bar button.play_btn.active {
	background: url("../images/ico_movie-stop.png") center center no-repeat;
	background-size: 9px 11px;
	-moz-background-size: 9px 11px;
	-webkit-background-size: 9px 11px;
}

/** Volume Button **/
.movie-bar button.volume_btn {
	width: 100%;
	height: 100%;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	background: url("../images/ico_movie-volume.png") 21px center no-repeat;
	background-size: 8px 10px;
	-moz-background-size: 8px 10px;
	-webkit-background-size: 8px 10px;
}
.movie-bar button.volume_btn.active {
	background: url("../images/ico_movie-volume_off.png") 21px center no-repeat;
	background-size: 8px 10px;
	-moz-background-size: 8px 10px;
	-webkit-background-size: 8px 10px;
}

/** Seek Bar **/
.play_gauge-wrapper,
.onsei_gauge-wrapper {
    position: relative;
    height: 7px;
    border: 1px solid #262929;
	border-radius: 2px;
	background: #464849;
	margin: 0 auto;
}
.play_gauge-wrapper .gauge,
.onsei_gauge-wrapper .gauge {
    position: relative;
	width: 60%;
    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;
}

.play_gauge-wrapper .gauge:after,
.onsei_gauge-wrapper .gauge:after {
	position: absolute;
	top: 0;
	left: 0;
    content: "";
	width: 100%;
	height: 5px;
	border-radius: 2px;
	background: -moz-linear-gradient(
		bottom,
		rgba(000, 000, 000,0.2) 0%,
		rgba(000, 000, 000,0.1) 50%,
		rgba(000, 000, 000,0) 100%);
	background: -webkit-gradient(
		linear, left bottom, left top,
		from(rgba(000, 000, 000,0.2)),
		color-stop(0.5, rgba(000, 000, 000,0.1)), 
		to(rgba(000, 000, 000,0)));
	background: linear-gradient(
		to top,
		rgba(000, 000, 000,0.2) 0%,
		rgba(000, 000, 000,0.1) 50%,
		rgba(000, 000, 000,0) 100%);
	z-index: 2;	
}

.play_gauge-wrapper a.handle,
.onsei_gauge-wrapper a.handle {
	position: relative;
	display: block;
	top: -16px;
	left: 60%;
	width: 23px;
	height: 23px;
	border-radius: 50%;
	background: transparent;
	z-index: 10;
}

.movie-bar a.handle span.tooltip { bottom: 18px;}
.play_gauge-wrapper a.handle span.tooltip {
	width: 75px;
	left: -38px;
}
.onsei_gauge-wrapper a.handle span.tooltip { left: -22px;}