@charset "utf-8";
/*================================================================

init

=================================================================*/
/* ----------------------------------
  reset
---------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
 /* font-size: 100%;
  font: inherit;*/
  v/*ertical-align: text-bottom;*/
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
/*blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}*/
table {
  border-collapse: collapse;
  border-spacing: 0;
}
img {
  vertical-align: top;
}
a:active,
a:hover {
  outline: 0;
}
button, input, optgroup, select, textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}
button,
select {
  text-transform: none;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
input {
  line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
}
input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
/* ----------------------------------
  Site base
---------------------------------- */
html{
	font-size: 62.5%; 
}

body {
	position: relative;
	/*font-family: "メイリオ", meiryo, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;*/
	font-family: "Helvetica Neue",
	Arial,
	"Hiragino Kaku Gothic ProN",
	"Hiragino Sans",
	Meiryo,
	sans-serif;
	line-height: 1.7;
	color: #222;
	/*background-color: #fff;*/
	overflow: hidden;
	background: linear-gradient(#efefee, #d7d9d9);
    margin: 0;
	padding: 0;
	min-height: 100vh;
	height: -webkit-fill-available;
}
body,
html {
  overflow: hidden;
}
a,
a:link,
a:visited {
  text-decoration: none;
  color: $a-color;
  text-decoration: none;
}
button {
  display: inline-block;
  border: none;
  border-radius: 0;
}
p {
  margin-top: 10px;
}
h1,
h2,
h3,
h4,
h5 {
  font-weight: normal;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.g-mt-0 {
  margin-top: 0 !important;
}
.eng-font{
	font-family: 'Mulish', sans-serif;
}
.pai-font{
	font-family: 'Contrail One', cursive;
}
/*追加*/

/*=============================
#container
=============================*/
#container{
	position: relative;
	width: 100vw;
	min-height: 100vh;
	overflow: hidden;
	height: auto;
}

#cover{
	position: fixed;
	width:100%;
	height: 100%;
	z-index: 2000;
	background: #fff;
	background: linear-gradient(#efefee, #d7d9d9);
	top:0;
	left:0;
}
/*=============================
#aplModal
=============================*/
#aplModal{
	position: fixed;
	top:100vh;
	left: 0;
	width:100%;
	height: 100%;
	z-index: 1500;
	background: #555;
	transition: all .5s;
}
#aplModal.on{
	top:0;
}
/*=============================
#header
=============================*/
#header{
	position: fixed;
    width: 100vw;
    transition: 1.0s;
    z-index: 100;
    overflow: hidden;
    top: 0;
    height: 70px;
    top: 0;
}

#header .header-menu{
	position: fixed;
	width: 80%;
	height:100%;
	left: -80%;
	transition: 0.5s;
}
#header .header-menu.on{
	left: 0;
}
#header .header-menu.off{
	left: -100%;
}
#header .header-menu .header-menu-inner{
	position: absolute;
	width: 100%;
	height:100%;
	background: #fff;
	transition: 0.5s;
}
#header .header-menu.on .header-menu-inner{
	box-shadow: 6px 0px 8px -6px rgba(0,0,0,0.6);
	text-align: center;
}


.header-cnt {
    position: absolute;
    text-align: center;
    top: 10px;
    left: 60px;
	width: calc(100% - 120px);
	display: none;
}
.header-cnt span{
	display: inline-block;
    width: auto;
    height: 18px;
    font-size: 1.2rem;
    line-height: 18px;
    overflow: hidden;
    font-weight: bold;
    box-sizing: border-box;
    padding: 0 5px;
    background: #fff;
    border-bottom: 1px solid #000;
    border-radius: 15px;
}
.header-menu .header-cnt {
    left: 10%;
    width: 80%;
}
.header-menu .header-cnt span {
    display: block;
    width: auto;
    height: auto;
    font-size: 1.4rem;
    line-height: 18px;
    overflow: hidden;
    font-weight: bold;
    box-sizing: border-box;
    padding: 5px;
    background: #eee;
    border-bottom: 1px solid #000;
    border-radius: 15px;
}
#bookPhoto{
	width: 65%;
	margin-top: 60px;
	box-shadow: 0px 0px 12px -6px rgb(0 0 0 / 80%);
}

    
.header-ttl {
    position: absolute;
    text-align: center;
    top: 30px;
	left: 60px;
	width: calc(100% - 120px);
    height: 30px;
    font-size: 1.4rem;
    line-height: 30px;
    overflow: hidden;
    font-weight: bold;
    box-sizing: border-box;
}
.header-ttl span{
	border-bottom: 2px solid #000;
    padding: 2px 4px;
}

/*#header.on .header-ttl{
	display: none;
}*/
.header-score{
    position: absolute;
    text-align: right;
    top: 0;
    right: 0;
    /*width: 60px;*/
    height: 18px;
    font-size: 1.1rem;
    line-height: 18px;
    overflow: hidden;
    font-weight: bold;
    box-sizing: border-box;
    padding: 0 4px 0 0;
	color: #666;
}
.total-num{
	color: #000;
	margin: 0 2px;
}
.current-num{
	color: #000;
	margin: 0 2px;
}
.correct-num{
	color: #e4007f;
	margin: 0 2px;
}
.header-time-btn {
    position: absolute;
	top: 18px;
    right: 12px;
    width: 26px;
    height: 26px;
    border-radius: 100%;
    overflow: hidden;
}
.header-time-btn-round{
	position: absolute;
	width: 100%;
	height: 100%;
	background: #fff;
	z-index: -1;
	transition: 0.5s;
}
.header-time-text{
    position: absolute;
    text-align: center;
    top: 43px;
    right: 10px;
    width: 30px;
    height: 18px;
    font-size: 1.1rem;
    line-height: 18px;
    overflow: hidden;
    font-weight: bold;
    box-sizing: border-box;
    padding: 0 4px 0 0;
}
/*=============================
.btn-trigger
=============================*/
.btn-trigger {
	position: absolute;
	top:10px;
    right: -50px;
    width: 50px;
    height: 40px;
	cursor: pointer;
	z-index: 200;
	border-radius: 0 20px 20px 0;
	background: #fff;
	box-shadow: 6px 0px 10px -6px rgba(0,0,0,0.6);
}

.btn-trigger span {
  position: absolute;
  left: 10px;
  width: 25px;
  height: 2px;
  background-color: #000;
 /* border-radius: 4px;*/
}
.btn-trigger, .btn-trigger span {
  display: inline-block;
  transition: all .5s;
  box-sizing: border-box;
}
.btn-trigger span:nth-of-type(1) {
  top: 10px;
}
.btn-trigger span:nth-of-type(2) {
  top: calc(20px - 1px);
}
.btn-trigger span:nth-of-type(3) {
  bottom: 10px;
}
.btn-trigger.on  span:nth-of-type(1) {
  -webkit-transform: translateY(calc(9px)) rotate(-45deg);
  transform: translateY(calc(9px)) rotate(-45deg);
}
.btn-trigger.on  span:nth-of-type(2) {
  opacity: 0;
}
.btn-trigger.on  span:nth-of-type(3) {
  -webkit-transform: translateY(calc(-9px)) rotate(45deg);
  transform: translateY(calc(-9px)) rotate(45deg);
}
#videoArea .btn-trigger ,
#aplModal .btn-trigger {
	position: absolute;
	left: auto;
    right: 0;
    background: none;
    width: 40px;
	box-shadow: none;
}
#videoArea .btn-trigger span,
#aplModal .btn-trigger span {
	left: 0;
	background-color: #fff;
}
/*=============================
ボタン
=============================*/
.btn-check {
	position: relative;
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-weight: bold;
    line-height: 1.2;
    background: #fff;
    border: 1px solid #999;
    padding: 20px 3px 3px;
    border-radius: 5px;
    font-size: 1.2rem;
    width: auto;
    margin: 4px 0;
    box-sizing: border-box;
    box-shadow: 0px 0px 12px -6px rgb(0 0 0 / 80%);
}
.btn-check::after{
    position: absolute;
    content: '';
    width: 10px;
    height: 10px;
    border: 2px solid #000;
    top: 4px;
    left: 50%;
    margin-left: -6px;
}
.btn-check::before{
    position: absolute;
    content: '';
    width: 10px;
    height: 10px;
    text-align: center;
    top: -3px;
    left: 50%;
    font-size: 2.0rem;
    /* font-weight: bold; */
    margin-left: -8px;
}
.btn-check.on::before{
	content: '✓';
}

.btn-navi {
	position: relative;
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-weight: bold;
    line-height: 1.2;
    background: #fff;
	border: 3px solid #000;
    padding: 3px 6px;
    border-radius: 10px;
    font-size: 2.2rem;
	letter-spacing: 0.1em;
    width: 100%;
	height: 40px;
	line-height: 30px;
    margin: 4px 0;
    box-sizing: border-box;
	box-shadow: 0px 0px 12px -6px rgb(0 0 0 / 80%);
}
.btn-naviC{
	width: 120px;
	margin: 20px auto 0;
	left:0;
	transition: 0.5s;
}
.ans-area .btn-naviC{
	position: absolute;
	margin-top: 20px;
	margin-left: -60px;
	left: 50%;
	/*transition: 0s;*/
}
/*.btn-naviC.off{
	margin-left: 100vw;
}*/
.btn-naviR{
	width: 120px;
	position: absolute;
	right: 0;
	margin: 20px 0 0;
	transition: 0.5s;
}
.btn-naviL{
	width: 120px;
	margin: 20px 0 0 0;
	transition: 0.5s;
}
/*.btn-go.off{
	right: 100vw;
}*/
.btn-naviR.off{
	right: 100vw;
}
.btn-naviL.off{
	margin-left: -100vw;
}
.btn-naviC.off{
	left: -100vw;
}
/*.btn-naviR.off{
	margin-left: 100vw;
}*/
.btn-WR,
.btn-CR{
	width: 60px;
	height: 60px;
}
.btn-CR::before{
	content: '';
    position: absolute;
    top: 50%;
    margin-top: -15px;
	margin-left: -15px;
    left: 50%;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    box-sizing: border-box;
    border: 4px solid #e4007f;
    z-index: 100;
}
.btn-WR::before{
	content: '';
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -3px;
    margin-left: -14px;
    left: 50%;
    width: 30px;
    height: 4px;
	background: #e4007f;
    transform: rotate(45deg);
	transform-origin: center;
    z-index: 10;
}
.btn-WR::after{
	content: '';
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -3px;
    margin-left: -14px;
    left: 50%;
    width: 30px;
    height: 4px;
	background: #e4007f;
    transform: rotate(-45deg);
	transform-origin: center;
    z-index: 10;
}
.btn-go2{
    position: absolute;
    /*bottom: 0;*/
    bottom: -80px;
	transition: 0.5s;
}
.btn-naviR.btn-go2{
	right:-100vw;
}
.btn-naviL.btn-go2{
	left:100vw;
}
.btn-naviR.btn-go2.on{
	right:0;
}
.btn-naviL.btn-go2.on{
	left:0;
}
.btn-guide {
	position: relative;
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-weight: bold;
    line-height: 1.2;
    /*background: #f2f2f2;
	border: 1px dotted #000;*/
	background: #555;
    /*border: 1px dotted #fff;*/
    color: #fff;
    padding: 3px 6px;
    border-radius: 5px;
    font-size: 2.4rem;
	letter-spacing: 0.1em;
    width: 100%;
    margin: 4px 0;
    box-sizing: border-box;
	box-shadow: 0px 0px 12px -6px rgb(0 0 0 / 80%);
}
.btn-guide-s2{
    display: inline-block;
    font-size: 1.3rem;
    width: auto;
}
.btn-answer{
	position: relative;
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-weight: bold;
    line-height: 1.2;
    background: #fff;
	padding: 2px 4px;
	border: 3px solid #fff;
    border-radius: 10px;
    font-size: 1.6rem;
	letter-spacing: 0.1em;
    width: 100%;
    margin: 0 0 10px;
    box-sizing: border-box;
	box-shadow: 0px 0px 12px -6px rgb(0 0 0 / 80%);
}
.btn-answerFS{
	font-size: 1.4rem;
}
.btn-answerFM{
	font-size: 1.8rem;
}
.btn-answerFL{
	font-size: 2.4rem;
}
.btn-answer.select{
/*	border: 3px solid #f8e462;*/
	border-color: #e4007f;
}
.btn-answer-tbl {
    display: table;
    margin: 0 auto;
}
.btn-answer.correct::before{
	content: '';
    position: absolute;
    top: 50%;
    margin-top: -15px;
    left: -37px;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    box-sizing: border-box;
    border: 4px solid #e4007f;
    opacity: 0.5;
    z-index: 100;
}
.btn-answer.wrong::before{
	content: '';
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -5px;
    left: -37px;
    width: 30px;
    height: 4px;
	background: #e4007f;
    transform: rotate(45deg);
	transform-origin: center;
    opacity: 0.5;
    z-index: 10;
}
.btn-answer.wrong::after{
	content: '';
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -5px;
    left: -37px;
    width: 30px;
    height: 4px;
	background: #e4007f;
    transform: rotate(-45deg);
	transform-origin: center;
    opacity: 0.5;
    z-index: 10;
}
.btn-checkbox .btn-answer-tbl{
	padding-left: 25px;
	padding-right: 25px;
}
.btn-checkbox .btn-answer-tbl::after{
    position: absolute;
    content: '';
    width: 10px;
    height: 10px;
    border: 2px solid #000;
    top: 50%;
    margin-top: -8px;
    left: 12px;
    margin-left: -6px;
}
.btn-checkbox .btn-answer-tbl::before{
    position: absolute;
    content: '';
    width: 10px;
    height: 10px;
    text-align: center;
    top: 50%;
    margin-top: -16px;
    left: 12px;
    margin-left: -9px;
    font-size: 2.0rem;
    z-index: 2;
}
.btn-checkbox.on .btn-answer-tbl::before{
	content: '✓';
}
.btn-tasuki .btn-barCorrect,
.btn-tasuki .btn-bar{
    display: block;
    position: absolute;
    top: 50%;
    margin-top: 0;
    right: -30px;
    width: 0;
    height: 2px;
    background: #e4007f;
    transform: rotate(0); 
    transform-origin:0 0;
    z-index: -1;
}
.btn-tasuki .btn-barCorrect,
.btn-tasuki.correct .btn-bar{
	margin-top: -2px;
	height: 4px;
}
.btn-tasuki.wrong .btn-bar{
	background: #999;
}
.btn-tasuki.on{
	border-color:#e4007f;
}
.btn-sort{
	width: auto;
	margin: 0 5px 10px 0;
    padding: 2px;
	display: inline-block;
}
.btn-sort.off{
	pointer-events: none;
	opacity: 0.6;
}
.btn-disabled{
	pointer-events: none;
	opacity: 0.4;
}
#btnTopBack{
	text-align: center;
}
.btn-sso{
    display: none;
}
/*-----------------------------------------------
	scrollbar
-----------------------------------------------*/
.scrollarea::-webkit-scrollbar {
	width: 8px;
	height: 8px;
	/*left: 8px;*/
	position: absolute;
}
.scrollarea::-webkit-scrollbar-thumb {
	background: linear-gradient(0deg,rgba(220,220,220,0.7),rgba(180,180,180,0.7));
	/*background: linear-gradient(0deg,#ccc,#aaa);*/
	border-radius: 6px;
}
.scrollarea::-webkit-scrollbar-track {
	background: rgba(255,255,255, 0.7);
	border-radius: 6px;
}
/*-----------------------------------------------
	container-set
-----------------------------------------------*/
#container-set{
	position: fixed;
	top:70px;
	width:100vw;
	height: calc(100% - 70px);
	overflow-x:hidden;
	overflow-y: auto;
	padding-top: 5px;
}
.container-inner{
	/*padding-bottom: 65px;*/
	padding-bottom: 155px;
	padding-left: 20px;
	padding-right: 20px;
	z-index: 10;
	/*min-height: 100vh;*/
    box-sizing: border-box;
	position: fixed;
	left: 0;
	top: 70px;
    width: 100%;
	/*transition: 0.5s;*/
}
.container-inner.right{
	left: 100vw;
	/*left: 100%;*/
}
.container-inner.left{
	left: -100vw;
	/*left: -100%;*/
}
.container-inner.current{
	z-index: 20;
	display: block;
	margin-top: 100vh;
}
.container-inner.current2{
	margin-top: 0;
}
#container-question{
	padding-left: 0;
	padding-right: 0;
}
.container-inner h2{
    background: #000;
    color: #fff;
    border-radius: 5px;
    text-align: center;
    padding: 0;
    font-size: 1.6rem;
    font-weight: bold;
    /*margin-top: 10px;*/
}
.container-inner h3{
    color: #000;
    /*border-top: 2px solid #000;
	border-bottom: 2px solid #000;
    text-align: center;*/
    padding: 0;
    /*font-size: 1.6rem;
    font-weight: bold;
    margin-top: 35px;*/
}
.container-inner h3.cntTitle {
    text-align: center;
    font-weight: bold;
    color: #00a0e9;
    text-shadow: 1px 1px 1px #ffffff, -1px 1px 1px #ffffff, 1px -1px 1px #ffffff, -1px -1px 1px #ffffff, 1px 0px 1px #ffffff, 0px 1px 1px #ffffff, -1px 0px 1px #ffffff, 0px -1px 1px #ffffff;
}
.container-inner .frame{
    padding: 0 20px;
    box-sizing: border-box;
}
#answer-area{
	padding: 5px 40px 80px;
	/*height: calc(100vh - 70px - 263px);*/
	height: auto;
}
#answer-area.disableArea{
	pointer-events: none;
}
#question-area1.disableArea{
	pointer-events: none;
}
#question-area2.disableArea{
	pointer-events: none;
}
#a-title1{
	text-align: center;
    font-size: 1.2rem;
    margin-bottom: 10px;
    letter-spacing: 0.1em;
	position: relative;
}
#a-title1::before{
	z-index: -1;
    content: '';
    position: absolute;
    top: 50%;
    left: -20px;
    width: calc(100% + 40px);
    height: 1px;
    border-bottom: 1px #444 dashed;
}
#a-title1 span{
    box-sizing: border-box;
    padding: 2px 10px;
    background: #fff;
    border-bottom: 1px solid #000;
    border-radius: 15px;
}
#a-title2{
	font-size: 1.3rem;
	font-weight: bold;
	margin-bottom: 15px;
}
.ans-area{
	position: relative;
}
#setAswerArea{
	/*padding-bottom: 30px;*/
	/*min-height: 155px;*/
}
.ans-areaflex{
	display: flex;
	justify-content: space-between;
}
.ans-areaflexitem{
	width: 42%;
}
    
.answerText{
	font-size: 1.6rem;
	width: 100%;
	border: 1px dotted #333;
	padding: 15px 10px;
	border-radius: 5px;
	box-sizing: border-box;
	font-weight: bold;
	position: relative;
	transition: 0.5s;
	margin-left: 100vw;
	margin-top: 20px;
	margin-bottom: 20px;
	color: #e4007f;
	background: #f2f2f2;
	/*float: left;*/
	/*position: absolute;*/
	/*top:0;*/
	left: 0;
	height: 0;
	overflow: hidden;
}
.answerText.on{
	margin-left: 0;
	height: auto;
	overflow:visible;
}
.answerText.on>span{
	display: block;
	width: 100%;
	overflow-x: auto;
}
.answerText::before{
	position: absolute;
    top: -10px;
    left: -22px;
    content: '正解';
    letter-spacing: 0.1em;
    line-height: 1.2;
    box-sizing: border-box;
    padding: 2px 10px;
    background: #fff;
    border-bottom: 1px solid #000;
    border-radius: 15px;
    font-weight: normal;
    font-size: 1.2rem;
	color: #000;
}
.answerTextS{
	font-size: 1.2rem;
}
.answerTextL{
	text-align: center;
    font-size: 3.2rem;
	padding: 8px 0;
}
.ans-sortCandidate{
	/*margin: 10px -10px;*/
}
.ans-sortSelected{
	margin: 10px -10px;
	border: 1px dashed #444;
	border-radius: 10px;
	min-height: 43px;
	padding: 10px 10px 0;
}
.answerText img{
	width: 100%;
	max-height: 35vh;
	object-fit: contain;
	border-radius: 5px;
}
#answerNotice{
	background: #999;
    border-radius: 8px;
    padding: 5px 5px 32px;
    margin: 0 10px;
	font-size: 1.1rem;
	line-height: 1.3;
	position: relative;
}
#answerNotice p{
	color: #fff;
	margin: 0;
}
#answerNotice .btn-answer{
	font-size: 1.0rem;
	letter-spacing: 0;
    margin-bottom: 0;
    margin-bottom: 0;
    float: right;
	padding: 1px;
}

.container-inner .frame-menu{
	/*height: calc(100% - 45px);*/
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
	/*transition: 0.5s;*/
}
.container-inner .frame-menu.next{
	margin-left: 100vw;
}
input[type='text']:not(.firebaseui-input) {
    box-sizing: border-box;
    width: 100%;
    font-size: 1.6rem;
    padding: 0 5px;
    height: 30px;
    border: 0;
    border-bottom: 1px solid #333;
    margin-right: 10px;
    margin-bottom: 4px;
    transition: all .5s;
	border-radius: 5px 5px 0 0;
}
textarea {
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    font-size: 1.4rem;
    padding: 0 4px;
    border: 0;
    border-bottom: 1px solid #333;
    transition: all .5s;
}
textarea.unit,
input[type='text'].unit{
	width: calc(80% - 10px);
}
textarea.unitP,
input[type='text'].unitP{
	width: calc(60% - 10px);
}
.unitText{
	width: 20%;
	display: inline-block;
	font-size: 1.4rem;
	padding: 5px;
	box-sizing: border-box;
}
.unitTextPre{
	width: 20%;
	display: inline-block;
	font-size: 1.4rem;
	text-align: right;
	padding: 5px;
	box-sizing: border-box;
}
#container-reach.container-inner{
	padding-bottom: 20px;
}
#container-setting.container-inner .frame-menu,
#container-reach.container-inner .frame-menu{
	position: relative;
	background-size: auto auto;
	background-color: rgba(255, 255, 255, 1);
	background-image: repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(238, 238, 238, 1) 4px, rgba(238, 238, 238, 1) 8px );
	/*height: calc(71vh - 60px);*/
	/*height: 80%;*/
	height: calc(100% - 45px);
    overflow-x: hidden;
    overflow-y: auto;
}
#container-setting.container-inner .frame-menu{
	height: calc(100% - 45px);
}
#container-s_entry{
	overflow-x: hidden;
    overflow-y: auto;
}
/*=============================
問題文
=============================*/
#q-title1,
#q-title2{
	font-size: 1.4rem;
}
#q-title2{
	margin-top: 5px;
}
#q-title1 span.qText,
#q-title2 span.qText{
	/*border-bottom: 1px dotted #000;*/
	padding-bottom: 2px;
}
#q-title1 span.qNum,
#q-title2 span.qNum{
	font-weight: bold;
	margin-right: 5px;
}
#q-text1,
#q-text2{
	font-size: 1.3rem;
    border: 1px dotted #000;
    border-radius: 5px;
    padding: 3px 5px;
    background: #f2f2f2;
    line-height: 1.8;
}
#setQ2SentenceCont,
#setQ1SentenceCont{
	margin: 5px 0;
	font-size: 1.4rem;
    background: #f2f2f2;
    padding: 10px;
    border-radius: 5px;
}
#setQ2SentenceCont.taCenter,
#setQ1SentenceCont.taCenter{
	text-align: center;
	background: none;
}
#question-area1 img,
#setQ1SentenceCont img{
    width: 100%;
    max-height: 35vh;
    object-fit: contain;
	border-radius: 5px;
}
#question-area2 img,
#setQ2SentenceCont img{
	width: 100%;
   /* max-height: 25vh;*/
	max-height: 35vh;
    object-fit: contain;
	border-radius: 5px;
}
#q-title1 img{
    width: 100%;
    max-height: 50vh;
    object-fit: contain;
	border-radius: 5px;
}
.borderB{
	border-bottom: 1px solid #000;
	position: relative;
}
.borderBL{
	border-bottom: 3px solid #000;
	position: relative;
}
.borderDouble{
	border-bottom: double #000;
	position: relative;
}
.borderWavy{
	text-decoration:underline wavy #000;
	position: relative;
}
.maru9::after,
.maru8::after,
.maru7::after,
.maru6::after,
.maru5::after,
.maru4::after,
.maru3::after,
.maru2::after,		
.maru1::after{
	position: absolute;
    content: '1';
    width: 20px;
    height: 20px;
    top: 9px;
    left: -13px;
    background: #333;
    color: #fff;
    border-radius: 10px;
    text-align: center;
    line-height: 20px;
    font-size: 1.4rem;
    transform: scale(0.65);
}
.maru2::after{
    content: '2';
}
.maru3::after{
    content: '3';
}
.maru4::after{
    content: '4';
}
.maru5::after{
    content: '5';
}
.maru6::after{
    content: '6';
}
.maru7::after{
    content: '7';
}
.maru8::after{
    content: '8';
}
.maru9::after{
    content: '9';
}
.kanaO::after,
.kanaE::after,
.kanaU::after,
.kanaI::after,
.kanaA::after{
	position: absolute;
    content: 'ア';
    width: 20px;
    height: 20px;
    top: 9px;
    left: -13px;
    background: #333;
    color: #fff;
    border-radius: 10px;
    text-align: center;
    line-height: 20px;
    font-size: 1.4rem;
    transform: scale(0.65);
}
.kanaI::after{
    content: 'イ';
}
.kanaU::after{
    content: 'ウ';
}
.kanaE::after{
    content: 'エ';
}
.kanaO::after{
    content: 'オ';
}
.alpE::after,
.alpD::after,
.alpC::after,
.alpB::after,
.alpA::after{
	position: absolute;
    content: 'A';
    width: 20px;
    height: 20px;
    top: 9px;
    left: -13px;
    background: #333;
    color: #fff;
    border-radius: 10px;
    text-align: center;
    line-height: 20px;
    font-size: 1.4rem;
    transform: scale(0.65);
}
.alpB::after{
    content: 'B';
}
.alpC::after{
    content: 'C';
}
.alpD::after{
    content: 'D';
}
.alpE::after{
    content: 'E';
}
.frameSquareL,
.frameSquare{
	border: 1px solid #000;
	height: 1em;
	width: 1em;
	display: inline-block;
	/*display: inline-flex;*/
    margin: 0 2px;
	padding: 1px;
	line-height: 1em;
	text-align: center;
}
.frameSquareL{
	min-width: 3em;
	width:auto;
	min-height: 1em;
    height: auto;
	text-align: left;
}
.frameSquareChar{
	/*text-align: left;*/
    text-align: center;
    padding: 2px;
}
.backTypeA,
.backTypeB{
	background: #e00;
	padding: 2px;
	border-radius: 5px;
	color: #fff;
	margin-right: 5px;
}
.backTypeB{
	background: #00e;
}
.roundBack{
	background: #fff;
	color: #e00;
	color: 1em;
	border-radius: 100%;
	height: 1em;
	width: 1em;
	display: inline-block;
	/*display: inline-flex;*/
    margin: 0 2px 0 0;
	padding: 1px;
	line-height: 1em;
	text-align: center;
}
.backTypeB .roundBack{
	color: #00e;
}
.smallText{
	font-weight: normal;
	font-size: 90%;
}
.tpTate .borderB{
	border-bottom: none;
	border-right: 1px solid #fff;
}
.tpTate .borderBL{
	border-bottom: none;
	border-right: 3px solid #fff;
}
.tpTate .borderDouble{
	border-bottom: none;
	border-right: double #fff;
}
.tpTate .borderWavy{
	text-decoration:underline wavy #fff;
}
.tpTate .alpA::after,
.tpTate .alpB::after,
.tpTate .alpC::after,
.tpTate .alpD::after,
.tpTate .alpE::after,
.tpTate .kanaO::after,
.tpTate .kanaE::after,
.tpTate .kanaU::after,
.tpTate .kanaI::after,
.tpTate .kanaA::after,
.tpTate .maru9::after,
.tpTate .maru8::after,
.tpTate .maru7::after,
.tpTate .maru6::after,
.tpTate .maru5::after,
.tpTate .maru4::after,
.tpTate .maru3::after,
.tpTate .maru2::after,
.tpTate .maru1::after{
	top: -13px;
    left: auto;
	right:-15px;
	background: #fff;
    color: #333;
}
.tpTate .alpA::after,
.tpTate .alpB::after,
.tpTate .alpC::after,
.tpTate .alpD::after,
.tpTate .alpE::after,
.tpTate .maru9::after,
.tpTate .maru8::after,
.tpTate .maru7::after,
.tpTate .maru6::after,
.tpTate .maru5::after,
.tpTate .maru4::after,
.tpTate .maru3::after,
.tpTate .maru2::after,
.tpTate .maru1::after{
	transform: rotate(-90deg) scale(0.65);
}
#aplModalContents .borderB,
#aplModalContents .frameSquareL,
#aplModalContents .frameSquare{
	border-color: #fff;
}
.tpTate .frameSquareL{
	height: 3em;
	width: 1em;
}
.frameBox{
	border: 2px solid #ccc;
	border-radius: 5px;
	padding: 5px;
	margin: 5px 0;
}
.answerFeature{
	font-weight: bold;
	font-size: 115%;
	border-bottom: 1px dotted #000;
}
.notice{
	text-align: center;
	font-size: 1.2rem;
	margin: 5px 0;
	display: block;
}

#container-question h5{
	font-weight: bold;
	background: #333;
	color: #fff;
	border-radius: 3px;
	padding: 3px 10px;
	font-size: 1.6rem;
	display: inline-block;
	line-height: 1.2;
}
#container-question h6{
	font-weight: bold;
	border-bottom: 1px solid #000;
	font-size: 1.4rem;
	display: inline-block;
	line-height: 1.2;
}
#aplModalContentsText h5{
	font-weight: bold;
	background: #000;
	color: #eee;
	border-radius: 3px;
	padding: 3px;
	font-size: 1.6rem;
	display: inline-block;
	line-height: 1.2;
}
#aplModalContentsText h6{
	font-weight: bold;
	border-bottom: 1px solid #fff;
	font-size: 1.4rem;
	display: inline-block;
	line-height: 1.2;
}
#aplModalContentsText .answerFeature{
	border-bottom: 1px dotted #fff;
}



#container-setting,
#container-reach,
#container-result,
#container-question,
#container-select,
#container-menu {
    /*background:#ffdcd4;*/
	/*background: linear-gradient(#ffdcd4, #ffb5a6);*/
	/*height: 100%;*/
	padding-bottom: 0;
	box-sizing: border-box;
}
#container-setting,
#container-reach,
#container-result{
	overflow-y: auto;
}
/*=============================
問題結果表示
=============================*/
.container-bottom{
	position: fixed;
    bottom: -200px;
    left: 0;
    width: 100%;
	height: 75px;
    transition: 0.5s;
	/*transition-delay:0.75s;*/
    /*background: rgba(255,255,255,0.8);*/
	/*background: linear-gradient(rgba(215,217,217,0.8) ,rgba(239,239,238,0.8));*/
	background: linear-gradient(rgba(248,228,98,0.8) ,rgba(248,228,98,1.0));
    box-shadow: 0px 0px 12px -6px rgb(0 0 0 / 60%);
	z-index: 1000;
}
.container-bottom.on{
	bottom: 0;
}
.container-bottom::before,
.container-bottom::after{
	content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
	margin-left: -40vw;
	opacity: 0;
    transition: 0.5s;
	pointer-events: none;
	/*transition-delay: 0.75s;*/
}
.container-bottom.correct::after{
	margin-top: calc(-30vw - 50vh);
    width: 80vw;
    height: 80vw;
    border-radius: 100%;
    box-sizing: border-box;
    border: 20px solid #e4007f;
}
.container-bottom.correct::before{
	margin-top: 0;
    width: 0;
    height: 0;
}
.container-bottom.wrong::before{
	margin-top: calc(30px - 50vh);
    width: 80vw;
    height: 20px;
    background: #e4007f;
    transform: rotate(45deg);
    transform-origin: center;
    z-index: 10;
}
.container-bottom.wrong::after{
	margin-top: calc(30px - 50vh);
    width: 80vw;
    height: 20px;
    background: #e4007f;
    transform: rotate(-45deg);
    transform-origin: center;
    z-index: 10;
}
.container-bottom.on2::before,
.container-bottom.on2::after{
	opacity: 0.5;
}
.container-bottom-result{
	display: none;
}
.container-bottom-result-text{
	text-align: center;
    font-size: 1.4rem;
    font-weight: bold;
    margin-top: 3px;
}
.container-bottom-end{
	position: fixed;
    bottom: -100vh;
    left:0;
    width:100%;
	height:100vh;
    transition: 0.5s;
	background: rgba(0,0,0,0.2);
	z-index: 1300;
}
.container-bottom-end.on{
	bottom: 0;
}
.container-bottom-inner{
	position: absolute;
    bottom: calc(50vh - 150px);
    left: 10%;
    width: 80%;
	height:300px;
	border-radius: 10px;
    background: #fff;
    transition: 0.5s;
	background:rgba(255,255,255,0.9);
    box-shadow: 0px 0px 12px -6px rgb(0 0 0 / 60%);
	z-index: 1300;
	padding: 20px;
	box-sizing: border-box;
}
.container-bottom-end-text{
	font-size: 1.6rem;
	font-weight: 600;
	text-align: center;
	margin-bottom: 50px;
}
.container-bottom-end-extension{
	font-size: 1.3rem;
	text-align: center;
	margin-bottom: 10px;
}
.container-bottom-end-extension .testTime{
	margin-left: 5px;
}
#btn-result,
#btn-extension{
	text-align: center;
	margin-bottom: 60px;
}
#btn-commentary{
	position: absolute;
    left: 10px;
    bottom: 22px;
}
#btn-next{
    position: absolute;
    bottom: 14px;
    left: 50%;
    display: inline-block;
    width: 100px;
    margin-left: -50px;
    padding: 3px 0;
    text-align: center;
    font-size: 2.4rem;
}
#btn-check {
	position: absolute;
    right: 10px;
    bottom: 15px;
}
#btn-restart,
#btn-start{
    position: relative;
	margin: 11px auto 0;
    display: block;
    width: 100%;
    padding: 3px 0;
    text-align: center;
    font-size: 2.4rem;
}
#btn-restart{
	font-size: 2.0rem;
}
#btn-result2{
	text-align: center;
    width: 180px;
    margin: 0 auto;
}
.btn-clear,
#btn-retry{
	width: 80%;
    margin: 30px auto 10px;
    font-size: 1.8rem;
    height: auto;
	text-align: center;
}
.btn-clear{
	font-size: 1.8rem;
	padding: 0 6px;
}
.btn-navi-term{
	width: 65%;
	margin: 0 auto 5px;
	font-size: 1.3rem;
	height: auto;
	text-align: center;
	line-height: 16px;
	font-weight: normal;
	border: 1px solid #000;
}
#btn-term{
	margin-top: 30px;
}
#btn-reach{
	width: 80%;
    margin: 10px auto 10px;
    font-size: 1.8rem;
    height: auto;
}
#btn-clear{
	margin-bottom: 30px;
}
.btn-header{
	width: 80%!important;
    font-size: 1.4rem!important;
    text-align: center;
    line-height: 1.1;
    margin: 10px auto;
	height: auto;
	border-width: 2px;
}
.btn-header20{
	margin-bottom: 20px;
}
.btn-header30{
	margin-bottom: 30px;
}
.btn-header2{
	font-size: 1.3rem!important;
    border-width: 1px;
    font-weight:normal;
    box-shadow: 0px 0px 12px -6px rgb(0 0 0 / 40%);
}
/*=============================
モーダル
=============================*/
#aplModalContents{
	margin: 30px 10px 20px;
	color: #fff;
}
#aplModalContents  h3{
	text-align: center;
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 10px;
    height: 30px;
}
#aplModalContentsText{
	border: 1px dotted #fff;
	font-size: 1.6rem;
    line-height: 1.8;
	padding: 10px;
	border-radius: 5px;
	width: calc(100% - 20px);
	height: calc(100vh - 100px);
	overflow-y: auto;
}
.tpTate{
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
#aplModalContentsText img{
    margin: 0 auto;
    max-width: 100%;
    max-height: 100%;
	/*width: 100%;*/
	/*object-fit: contain;*/
	border-radius: 5px;
    display: block;
}
#aplModalContentsText.tpTate img{
	margin: 0 5px;
}
.kanbun{
	margin: 10px 20px;
    font-size: 2.4rem;
    line-height: 2.4;
}
.kb-base{
	position: relative;
	margin: 0.6rem 0;
	display: inline-block;
}
.kb-yomi{
	position: absolute;
    top: -25%;
    /*right: -1.5rem;*/
    font-size: 1.0rem;
    text-align: center;
    height: 150%;
}
.kb-okuri{
	position: absolute;
    bottom: -25%;
    /*right: -1.5rem;*/
    font-size: 1.0rem;
}
.kb-le{
	position: absolute;
    bottom: -25%;
    /*left: -1.3rem;*/
	left: 0.3rem;
    font-size: 1.0rem;
}
.tpChemistry{
    font-size: 1.8rem;
    margin: 5px;
}
audio{
	width: 100%;
    border-radius: 54px;
    box-shadow: 0px 0px 12px -6px rgb(0 0 0 / 80%);
}
/*=============================
目次
=============================*/
#container-menu-header{
	height: 36px;
	position: relative;
}
#container-menu-cont-yet,
#container-menu-cont{
	height:calc(100vh - 100px);
	overflow-y: auto;
	border-top: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
	padding: 5px 0 0;
	box-sizing: border-box;
	margin-bottom: 10px;
}
#container-menu-cont-yet{
	height:calc(100vh - 120px);
}
#container-menu-footer{
	
}
.container-menu-ul{
	/*margin: 0 10px;*/
}
.container-menu-ul li{
	padding: 5px 5px 3px 25px;
	margin-bottom: 5px;
	background: #fff;
	position: relative;
}
.menu-back{
	background: #e4007f;
	position: absolute;
	bottom:0;
	left: 0;
	height: 3px;
	width:0;
	z-index: 0;
	/*opacity: 0.7;*/
	transition: 1.5s;
}
.menu-back2{
	background: #ff82c8;
	/*opacity: 0.6;*/
}
.menu-back3{
	background: #bbb;
}
#container-menu-header .menu-back{
	height: 5px;
}
.menu-title{
	position: relative;
    font-size: 1.3rem;
	font-weight: 600;
	z-index: 1;
	line-height: 1.6rem;
}
.menu-num,
.menu-check{
	position: relative;
	display: inline-block;
    font-size: 1.0rem;
	margin-right: 2px;
	color: #444;
	z-index: 1;
}
.clearfix::after {
   content: "";
   display: block;
   clear: both;
}
.menu-time span,
.menu-check span{
	font-weight: 600;
	margin-left: 3px;
	font-size: 1.2rem;
	color: #000;
}
.menu-num span{
	font-weight: 600;
	font-size: 1.2rem;
}
.menu-time{
	position: relative;
	display: inline-block;
    font-size: 1.0rem;
	float: right;
	color: #333;
	z-index: 1;
}
.menu-page{
	position: relative;
	display: inline-block;
    font-size: 1.1rem;
	float: right;
	color: #333;
	z-index: 1;
	line-height: 1.6rem;
}
.menu-all::after,
.container-menu-ul li::after{
    position: absolute;
    content: '';
    width: 10px;
    height: 10px;
    border: 2px solid #000;
    top: 50%;
    left: 5px;
    margin-top: -6px;
	z-index: 1;
}
.menu-all::before,
.container-menu-ul li::before{
    position: absolute;
    content: '';
    width: 10px;
    height: 10px;
    text-align: center;
    top: 50%;
    left: 3px;
    font-size: 2.0rem;
    font-weight: bold; 
    margin-top: -18px;
    z-index: 10;
    color: #e4007f;
    
}
.menu-all.on::before,
.container-menu-ul li.on::before{
	content: '✓';
}
.menu-date{
	position: absolute;
    top: -2px;
    left: -5px;
    width: 60px;
    height: auto;
    line-height: 1.4;
    text-align: center;
    padding: 3px;
    box-sizing: border-box;
    border-radius: 5px;
	box-shadow: 2px 2px 3px -2px #777777;
}
.menu-date2{
    float: right;
    width: 82px;
	text-align:center;
    background: #e4007f;
    border-radius: 5px;
    padding: 0 3px;
    line-height: 1.2;
	margin-top: -7px;
    margin-right: -5px;
}
.menu-date-day{
	font-size: 1.5rem;
	font-weight: 600;
}
.menu-date-week{
	font-size: 0.9rem;
	margin-left: 1px;
}
.menu-date-time{
	font-size: 1.2rem;
	font-weight: 600;
}
.menu-date2 .menu-date-day{
	font-size: 1.3rem;
	font-weight: 600;
}
.menu-date2 .menu-date-week{
	font-size: 0.8rem;
	margin-right: 1px;
	margin-left: 1px;
}
.menu-date2 .menu-date-time{
	font-size: 1.0rem;
	font-weight: 600;
}
.menu-sche-future.menu-date2,
.menu-sche-future .menu-date{
	background: #ff82c8;
}
.menu-sche-today.menu-date2,
.menu-sche-today .menu-date{
	background: #e4007f;
	color: #fff;
}
.menu-sche-past.menu-date2,
.menu-sche-past .menu-date{
	background: #cfcfcf;
}


#container-menu-header .menu-num,
#container-menu-header .menu-check,
#container-menu-header .menu-time{
	text-align: center;
	line-height: 1.4;
}
#container-menu-header .menu-num span{
	margin-left: 0;
}
.menu-all{
	position: relative;
    font-size: 1.3rem;
    font-weight: 600;
	color: #000;
	z-index: 1;
	padding: 5px 5px 3px 25px;
	display: inline-block;
}
.menu-mode-title{
    position: relative;
    font-size: 1.2rem;
    font-weight: bold;
    z-index: 1;
    line-height: 1.6rem;
    margin-top: 5px;
    margin-left: 5px;
}
.menu-mode{
    margin: 0 0 5px;
    border: 1px dotted #000;
    border-radius: 5px;
    padding: 1px;
    background: #fff;
}
.btn-area-btn{
	position: relative;
	display: inline-block;
	font-weight: bold;
	font-size: 1.3rem;
	line-height: 1.6;
    border: 2px solid #fff;
    padding: 0 4px 0 24px;
    border-radius: 5px;
}
.btn-radio .btn-area-btn:before{
    content: '';
    position: absolute;
    width: 9px;
    height: 9px;
    top: 50%;
    margin-top: -6px;
    left: 6px;
    border: 2px solid #000;
	border-radius: 100%;
}
.btn-radio .btn-area-btn:after{
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    top: 50%;
    margin-top: -3px;
    left: 9px;
	background: #fff;
	border-radius: 100%;
}
.btn-radio .btn-area-btn.on{
	cursor: auto;
	pointer-events: none;
}
.btn-radio .btn-area-btn.on:after{
	background: #000;
}
.btn-checkBox .btn-area-btn:before{
    content: '';
    position: absolute;
    width: 9px;
    height: 9px;
    top: 50%;
    margin-top: -6px;
    left: 6px;
    border: 2px solid #000;
	border-radius: 0;
}
.btn-checkBox .btn-area-btn:after{
    position: absolute;
    content: '';
    width: 10px;
    height: 10px;
    text-align: center;
    top: 50%;
    left: 4px;
    font-size: 2.0rem;
    /* font-weight: bold; */
    margin-top: -18px;
	z-index: 10;
    color: #e4007f;
}
.btn-checkBox .btn-area-btn.on:after{
	content: '✓';
}
.q-num{
	font-weight: normal;
	font-size: 1.1rem;
	margin-left: 2px;
}
.default{
	/*font-size: 1.6rem;*/
	background: rgba(228,0,127,0.2);
	/*background: rgba(248, 228, 98,0.2);*/
	
}
.menu-mode2{
    margin: -5px 5px 10px;
    /*border-top: 1px solid #000;*/
    padding: 5px;
	display: flex;
	justify-content: space-between;
	
}
.menu-mode2-title{
    position: relative;
    font-size: 1.2rem;
    font-weight: bold;
    z-index: 1;
    line-height: 1.6rem;
    margin-top: 10px;
	text-align: center;
}
.menu-mode2-num,
.menu-mode2-time{
	position: relative;
	display: inline-flex;
    font-size: 1.1rem;
    line-height: 28px;
	height: 30px;
	border-bottom: 1px solid #000;
	color: #444;
}
.menu-mode2-time span,
.menu-mode2-num span{
	font-weight: 600;
	margin-left: 4px;
	font-size: 2.2rem;
	color: #000;
}
.menu-mode3{
    margin: 0 0 5px;
    /* border-top: 1px solid #000; */
    padding: 0;
	padding-bottom: 10px;
    text-align: center;
    font-size: 1.2rem;
	display: flex;
	justify-content: space-between;
}
.testTime {
    border-radius: 5px;
    font-size: 1.6rem;
    font-weight: 600;
    border: 2px solid #000;
    height: 30px;
    padding: 0 3px;
    color: #000;
    box-shadow: 0px 0px 12px -6px rgb(0 0 0 / 80%);
}
/*=============================
コンテンツ目次
=============================*/
#container-contents-cont3,
#container-contents-cont2,
#container-contents-cont{
	height: calc((100vh - 160px) / 3);
	overflow-y: auto;
	/*border-bottom: 1px solid #aaa;*/
	border-radius: 0 0 5px 5px;
    background: rgba(0,0,0,0.05);
	padding: 5px 0 0;
	box-sizing: border-box;
	margin-bottom: 10px;
}
#container-contents-cont2.container-contents-cont2{
	/*height: calc((100vh - 140px) / 3 * 2);*/
	height: calc((100vh - 120px) / 3 * 2);
}
#container-contents-cont.container-contents-cont3a{
	height: calc((100vh - 160px) / 2);
}
#container-contents-cont2.container-contents-cont3b,
#container-contents-cont3.container-contents-cont3b{
	height: calc((100vh - 160px) / 4);
}
.container-contents-title{
    font-size: 1.4rem;
	line-height: 1.2;
    background: #e4007f;
    padding: 2px 5px;
    border-radius: 5px 5px 0 0;
    color: #fff;
    font-weight: bold;
}

.container-contents-title2{
    background: #f8e462;
    color: #000;
	margin-top: 0;
}
.container-contents-title3{
    background: #e4007f;
	margin-top: 0;
}
.container-contents-ul li{
	padding-left: 35px;
	margin-left: 4px;
	margin-right: 4px;
}

.container-contents-ul li.temp{
	pointer-events: none;
	opacity: 0.7;
}
.container-menu-ul-sche li{
	padding-left: 60px;
	margin-left: 5px;
	
}
.container-menu-ul-sche li.menu-sche-past{
	background: #eee;
}
.container-menu-ul-daysche-ul>li{
	position: relative;
	margin-right: 4px;
	border-top: 1px solid #000;
	min-height: 30px;
	padding-bottom: 3px;
	box-sizing: border-box;
	background: #e3e3e3;
}
.container-menu-ul-daysche-ul>li.noDataNotice{
	text-align: center;
    border: none;
    background: none;
    font-size: 1.3rem;
}
.container-menu-ul-daysche{
	margin-left: 50px;
}
.container-menu-ul-daysche>li{
	padding-left: 4px;
	padding-right: 4px;
	margin: 3px 0 0;
}
.container-menu-ul-daysche-ul li .sche-date{
	position: absolute;
    background: none;
    box-shadow: none;
    top: 50%;
    left: auto;
    margin-top: -13px;
    height: 26px;
    width: 50px;
    text-align: center;
	line-height: 1;
}
.container-menu-ul-daysche .menu-time{
	float: none;
    text-align: right;
    display: block;
    line-height: 1;
}
.menu-sche-finished{
	background: #cfcfcf!important;
    /* border: 1px solid #000; */
    box-sizing: border-box;
    /* opacity: 0.5; */
    pointer-events: none;
}
.container-menu-ul-daysche-ul>li.menu-sche-past{
	/*background: #d8d8d8!important;*/
	background-size: auto auto;
	background-color: rgba(255, 255, 255, 0);
	background-image: repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(230, 230, 230, 1) 4px, rgba(230, 230, 230, 1) 8px );
}
.menu-sche-today{
	background: #eee!important;
	border-top: 1px solid #e4007f!important;
}
.sche-sat{
	color: #4c5b9d;
}
.sche-sun{
	color: #c00e0e;
}
.menu-sche-today .sche-date{
	color: #e4007f;
}
.menu-photo{
	position: absolute;
	top: -2px;
    left: -5px;
    /*height: 42px;*/
	max-width: 35px;
	max-height: 50px;
    box-shadow: 2px 2px 3px -2px #777777;
}
.menu-title span{
	font-size: 1.1rem;
	font-weight: normal;
	margin-left: 5px;
}
.container-contents-ul li::after,
.container-contents-ul li::before{
	display: none;
}



#footer-char-t{
	width: 95%;
}
#footer-char-s-t,
#footer-char-m-t,
#footer-char-r-t{
	width: 100%;
}

#container-menu.no-char{
	padding-bottom: 20px;
}
#container-listening-menu{
	/*background:linear-gradient(#fff, #ffdcd4);*/
}
#container-listening{
}
#container-animation{
	padding-top: calc(20vw + 60vw);
}
.index-item {
	position: relative;
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 3px solid #000;
    font-weight: bold;
    background: #fff;
    padding: 3px 6px;
    border-radius: 10px;
    font-size: 2.2rem;
	letter-spacing: 0.1em;
    width: 100%;
    margin: 0 auto;
	height: 40px;
	line-height: 30px;
	box-shadow: 0px 0px 12px -6px rgb(0 0 0 / 80%);
	
}
.index-item-l {
	font-size: 2.4rem;
}
.index-item-m {
	font-size: 2.0rem;
    text-align: center;
    margin-bottom: 15px;
}
.index-item-s {
	font-size: 1.6rem;
}
.index-item-s3{
	font-size: 1.8rem;
	margin: 10px 0;
}
.index-item-s2{
    display: inline-block;
    font-size: 1.4rem;
   /* margin: 20px 0 -10px -10px;*/
    width: auto;
	position: absolute;
    right: 10px;
    bottom: 10px;
}
.index-item-flex {
	font-size: 1.4rem;
	font-weight: normal;
    border-radius: 10px;
    padding: 5px 2px 2px 2px;
    letter-spacing: 0;
    line-height: 1.4em;
	color: #888;
}
.index-item-a{
    font-size: 2.4rem;
    margin-bottom: 5px;
    min-height: 42px;
}
.index-item-a .textS{
	font-size: 1.8rem;
	margin-top: 0.3rem;
}
.index-item-a .textSS{
	font-size: 1.4rem;
	margin-top: 0.5rem;
}
.index-item-a.enabled {
	pointer-events: none;
	cursor: auto;
}
.index-item-a.presound {
	pointer-events: none;
	cursor: auto;
	opacity: 0.8;
}
.index-item.select{
	pointer-events: none;
	background: #00a0e9;
	color: #fff;
}
.index-item-r {
	margin: 10px 0;
	font-size: 1.8rem;
    letter-spacing: 0.05em;
}
.index-item-r:first-child {
	margin-top: 20px;
}
.index-item-r.enabled {
	pointer-events: none;
	cursor: auto;
	opacity: 0.5;
}
.index-index {
    width: 80%;
    margin-top: 60px;
    font-size: 2.4rem;
    box-sizing: border-box;
}
.index-index-image{
    height: 90px;
    position: absolute;
    bottom: 5px;
    left: 5px;
}
a{
	color: #000;
}













/*=============================
ログイン
=============================*/
.container-login{
	padding-left: 40px;
	padding-right: 40px;
	padding-top: 20px;
	padding-bottom: 20px;
}
#container-login{
	height: calc(-110px + 100vh);
	padding-top: 0!important;
	padding-bottom: 0!important;
	padding-left: 20px;
	padding-right: 20px;
    /*margin-top: -40px;*/
}
.container-login h3{
	font-weight: bold;
	font-size: 1.8rem;
	letter-spacing: 0.1em;
}
#container-startDeliveryTest h3{
	text-align: center;
	margin-bottom: 40px;
	border-bottom: 2px solid #000;
}
.container-login .textInput{
    width: 100%;
    font-weight: bold;
    font-size: 2.0rem;
    margin: 10px 0;
    border-radius: 6px;
    border: none;
    padding: 4px 10px;
    /*box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.3) inset;*/
	letter-spacing: 0.1em;
	box-sizing: border-box;
}
#btn-login{
	margin: 10px 0 50px;
}
#btn-contact{
	position: absolute;
    bottom: 35px;
	left:50%;
	margin-left: -120px;
    width: 240px;
	font-size: 1.1rem;
}
#btn-first-term{
	position: absolute;
    bottom:5px;
	left:50%;
	margin-left: -120px;
    width: 240px;
	font-size: 1.1rem;
}
#btn-first-policy{
	position: absolute;
    bottom: 20px;
	left:50%;
	margin-left: -25%;
    width: 50%;
}
#btn-forget{
	display: none;
	bottom: auto;
    position: relative;
    left: auto;
    margin: 20px 40px;
	margin-top: -10px;
    font-size: 1.4rem;
    width: auto;
}
#navi-term-text{
	height: calc(100vh - 500px);
	overflow-y: auto;
	margin-top: 10px;
	padding: 10px;
    border-radius: 5px;
    box-sizing: border-box;
	background: #fff;
}
#btn-term-check{
	position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -120px;
    font-weight: bold;
    width: 240px;
    font-size: 1.3rem;
    text-align: center;
    border: 1px solid #000;
}
.btn-terms{
	display: none;
}
.firebaseui-textfield.mdl-textfield .firebaseui-label::after {
    bottom: 10px;
}
.container-login h4{
	text-align: center;
    font-size: 1.4rem;
}
.container-other h4{
    font-size: 2.2rem;
	font-weight: bold;
	margin-bottom: 5px;
	letter-spacing: 0;
}
.container-other h4 span{
	border-bottom: 2px #e4007f solid;
}
.container-other h3{
    font-size: 1.6rem;
	text-align: center;
	letter-spacing: 0;
}
.container-other h3 .deadLineTitle{
	margin-right: 10px;
    font-weight: normal;
}
.container-other .entryText{
	font-size: 1.3rem;
    margin: 10px 0 20px;
	color: #e4007f;
}
.afterMessage{
	font-size: 1.4rem;
	font-weight: bold;
    margin: 10px 0 20px;
	text-align: center;
	display: none;
}
.submisionSet{
	
}
.submisionSetInner{
	width: 100%;
	font-size: 1.4rem;
	text-align: center;
}
.submisionSet input[type='text']:not(.firebaseui-input){
	width: 75px;
	margin-right: 5px;
	margin-left: 5px;
}
.submisionMark{
    font-size: 1.8rem;
    color: #fff;
    border-radius: 5px;
    padding: 2px;
    background: #e4007f;
    min-width: 26px;
    height: 26px;
    line-height: 26px;
    margin: 0 5px;
    display: inline-block;
	text-align: center;
}
.submisionSetInnerL{
	width: 50%;
	display: inline-block;
	text-align: right;
}
.submisionSetInnerR{
	width: 50%;
	display: inline-block;
	text-align: left;
}
.menu-menuSub-title{
    display: inline-block;
    font-size: 2.0rem;
    font-weight: bold;
    background: #fff;
    padding: 5px;
    border-radius: 5px;
    line-height: 1;
}
.s_entry-area{
	margin: 40px 0 20px;
}
#container-menuSub #container-menu-header .menu-time{
	text-align: right;
}
#container-menuSub .menu-time span, .menu-check span {
    font-weight: 600;
    margin-left: 2px;
	margin-right: 2px;
    font-size: 1.2rem;
    color: #000;
}
#container-menuSub .menu-time span.menuSubNum1{
	color:#e4007f;
}
#container-menuSub .menu-time span.menuSubNum2{
	color:#ff82c8;
}
#container-menuSub .menu-time span.menuSubNum3{
	color:#888;
}
#container-menuSub .container-menu-ul li{
	padding-left: 5px;
}
#container-menuSub .container-menu-ul li:after,
#container-menuSub .container-menu-ul li:before{
	display: none;
}
#container-menuSub .submisionSet{
     position: absolute; 
     top: 0; 
    /* right: 3px; */
     right: 106px; 
    text-align: right;
    /* height: 95%; */
    /* overflow: hidden; */
    /* float: right; */
   /* margin-right: 102px;*/
    /*margin-top: -42px;*/
    /*margin-bottom: 3px;*/
}
.submisionSetSrollAnime {
  /*animation: move-y 2s infinite alternate ease-in-out;*/
  display: inline-block;
}
@keyframes move-y {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(calc(-100% + 35px));
  }
}
#container-menuSub .submisionSetInner{
    height: 20px;
    line-height: 20px;
	text-align: right;
}
#container-menuSub span.submisionTotal{
    font-size: 1.2rem;
    font-weight: normal;
	min-width: 2.4rem;
    display: inline-block;
    text-align: left;
}
#container-menuSub span.submisionMark{
	font-size: 1.3rem;
	width: 20px;
	min-width: 20px;
	height: 16px;
	line-height: 16px;
    vertical-align: top;
    margin-top: 3px;
	text-align: center;
	padding: 1px 0;
	margin-right: 0;
	margin-left: 0;
}
#container-menuSub span.submisionPoint{
	font-size: 1.6rem;
    font-weight: bold;
	margin-right: 2px;
	min-width: 3rem;
    display: inline-block;
}
#container-menuSub .btn-navi{
    width: 50px;
    position: absolute;
    top: 50%;
    margin-top: -17px;
    right: 2px;
    height: 33px;
    line-height: 23px;
    font-size: 1.3rem;
    padding: 0;
    padding-top: 2px;
    letter-spacing: 0;
}
.evaluationList{
    width: 35px;
    position: absolute;
    right: 2px;
    bottom: 0px;
    transition: 0.2s;
    cursor: pointer;
}
.evaluationList.on{
    transform: scale(2);
    transform-origin: right;
    z-index: 300;
}
.evaluationComment{
    width: 34px;
    position: absolute;
    right: 3px;
    top: 1px;
    cursor: pointer;
    z-index: 100;
}
.submisionSet.evaluationOn{
	right: 87px!important;
}
.btn-navi.evaluationOn{
    right: 40px!important;
}
.menu-time.evaluationOn {
    margin-right: 40px!important;
}
.evaluationCommentLarge {
    position: absolute;
    right: 34px;
    top: -4px;
    padding: 5px 8px;
    color: #000;
    background: #FFF;
    border: solid 3px #000;
    box-sizing: border-box;
    border-radius: 5px;
    font-weight: 600;
    font-size: 1.2rem;
    width: 180px;
    line-height: 1.2;
    display: none;
    z-index: 110;
}
.evaluationCommentLarge:before {
    content: "";
    position: absolute;
    top: 1px;
    right: -20px;
    border: 10px solid transparent;
    border-left: 12px solid #FFF;
    z-index: 2;
}
.evaluationCommentLarge:after {
    content: "";
    position: absolute;
    top: 1px;
    right: -26px;
    margin-top: -2px;
    border: 12px solid transparent;
    border-left: 14px solid #555;
    z-index: 1;
}
.evaluationCommentLarge p {
  margin: 0;
  padding: 0;
}
.evaluationCommentClose{
    position: absolute;
    left:-14px;
    top:-14px;
    width: 24px;
    cursor: pointer;
}


#container-menuSub .menu-title{
	width: calc(100% - 180px);
}
#container-menuSub .correct-num{
	color: #000;
	border-radius: 2px;
}
#container-menuSub .deadLineOver{
    background: #f8e462;
}
#container-menuSub .delay{
    background: #ef8ac5;
}

/*=============================
問題選択
=============================*/
.index-item-progress{
	position: absolute;
	right: 5px;
    bottom: 12px;
    font-size: 1.2rem;
    letter-spacing: 0.06em;
	font-weight: normal;
}
#btn-jpn,
#btn-eng,
#btn-listening{
	margin: 10px 0;
    font-size: 2.4rem;
}
#btn-jpn.enabled ,
#btn-eng.enabled ,
#btn-listening.enabled {
	pointer-events: none;
	cursor: auto;
	opacity: 0.5;
}
#btn-jpn{
	margin-top: 0;
}
#container-select.container-inner{
	padding-bottom: 20px;
}
#container-select.container-inner .frame-menu {
	height: auto;
	/*max-height: calc(71vh - 60px);*/
	max-height:calc(100% - 65px);
}
.btn-area{
	position: relative;
	margin: 20px 0 0;
}
.btn-area-ptn{
	margin-top: 15px;
}
.btn-area-ttl{
	font-weight: bold;
    font-size: 1.2rem;
    color: #00a0e9;
    text-align: left;
	margin-bottom: 3px;
}
.btn-area-set{
	display: flex;
    justify-content: space-between;
    /*width: calc(100% - 70px);*/
    /*position: absolute;*/
    /* margin-left: 80px; */
    /* margin-top: -50px; */
    /*left: 70px;
    top: -5px;*/
	width: 90%;
	margin-left: 10%;
}

.enabled{
	opacity: 0.3;
	pointer-events: none;
	/*background: #bbb;*/
}
/*=============================
単語
=============================*/
#container-question.container-inner{
	/*padding-bottom: 20px;*/
	overflow-x: hidden;
	overflow-y: auto;
    box-sizing: border-box;
}

.question-txt{
	font-size: 4.5rem;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    margin-bottom: 15px;
    margin-top: -10px;
	letter-spacing: 0.05em;
}
.question-txt.textS{
	font-size: 3.2rem;
}
.question-txt.textSS{
	font-size: 2.4rem;
}
.question-txt-jpn{
	font-size: 3rem;
    margin-top: -5px;
}
.question-txt-jpn.textS{
	font-size: 2.4rem;
}
.question-score{
	font-size: 1.6rem;
    text-align: right;
    margin: 10px 0 -10px;
}

#btn-q-result{
	position: absolute;
    bottom: 10px;
    right: 10px;
    display: inline-block;
    width: auto;
    padding: 5px 30px;
	font-size: 2.4rem;
}
#btn-q-result.off,
#btn-next.off{
	display: none;
}

.frame-menu.correct .ans-area::before {
    content: '';
    position: absolute;
    top: 50%;
    margin-top: -120px;
    left: 50%;
    margin-left: -100px;
    width: 200px;
    height: 200px;
    border-radius: 100%;
    box-sizing: border-box;
    border: 20px solid #ff9000;
    opacity: 0.6;
    z-index: 10;
}
.frame-menu.wrong .ans-area::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -30px;
    left: 50%;
    margin-left: -120px;
    width: 240px;
    height: 20px;
    background: #000;
    transform: rotate(45deg);
    transform-origin: center;
    opacity: 0.3;
    z-index: 10;
}
.frame-menu.wrong .ans-area::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -30px;
    left: 50%;
    margin-left: -120px;
    width: 240px;
    height: 20px;
    background: #000;
    transform: rotate(-45deg);
    transform-origin: center;
    opacity: 0.3;
    z-index: 10;
}
.index-item-a.correct::before{
	content: '';
    position: absolute;
    top: 50%;
    margin-top: -10px;
    left: 8px;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    box-sizing: border-box;
    border: 4px solid #00a0e9;
	background: #fff;
}
.index-item-a.select.correct::before{
	border: 4px solid #fff;
	background: #00a0e9;
}
.btn-play-btn{
	position: relative;
	width:70px;
	height: 70px;
	border-radius: 100%;
	background: #00a0e9;
	/*border: 2px solid #00a0e9;*/
	background-image: url(../img/icon-play-w.png);
	background-image: url(../img/icon-play-w.svg),none;
    background-size: 45px 45px;
    background-repeat: no-repeat;
    background-position: 40% center;
	overflow: hidden;
	margin: -10px auto 10px;
}
/*=============================
結果
=============================*/
#container-result-result{
	margin-top: 10px;
}   
.result-item{
    font-size: 1.6rem;
    position: relative;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    border-radius: 5px;
    padding: 3px 5px;
	height: 3.2rem;
    line-height: 3.2rem;
	overflow: hidden;
	background-color: rgba(255, 255, 255, 1);
	background-image: repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(204, 204, 204, 0.17) 4px, rgba(204, 204, 204, 0.17) 8px );
}
.result-item-ttl{
	font-weight: bold;
	position: relative;
}
.result-item .result-item-progress{
	position: absolute;
    right: 5px;
    bottom: 4px;
    line-height: 1;
}
.result-item-score {
    margin-right: 2px;
    color: #e4007f;
	font-size: 3.2rem;
	font-weight: bold;
}
.result-item-total {
    margin-left: 2px;
    /* color: #aaa; */
    /*width: 40px;*/
    display: inline-block;
    text-align: right;
}
#resultA,#resultB{
	margin-right: 20px;
}
#resultA .roundBack{
	background: #e00;
	color: #fff;
	margin-right: 5px;
	vertical-align: super;
}
#resultA .result-item-score{
	color: #e00;
}
#resultB .roundBack{
	background: #00e;
	color: #fff;
	margin-right: 5px;
	vertical-align: super;
}
#resultB .result-item-score{
	color: #00e;
}
#container-result.container-inner .frame-menu {
	height: auto;
    max-height: calc(100% - 65px);
}
#btn-result{
	position: relative;
	margin-top: 20px;
}
#container-result.container-inner h3,
#container-reach.container-inner h3{
    color: #000;
    border-top: 2px solid #000;
	border-bottom: 2px solid #000;
    text-align: center;
    padding: 0;
    font-size: 1.6rem;
    font-weight: bold;
    margin-top: 35px;
	background-size: auto auto;
    background-color: rgba(255, 255, 255, 1);
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(248, 228, 98, 0.5) 5px, rgba(248, 228, 98, 0.5) 10px );
}
/*=============================
学習履歴
=============================*/
#container-reach{
	/*margin: 10px 0;*/
}
#reach-chart{
	margin-top: 5px;
	width: calc(100vw - 40px);
	height: calc(100vw - 40px);
	pointer-events: none;
}
.container-reach-reach{
	margin-bottom: 15px;
}
.result-usage{
	font-size: 1.6rem;
    position: relative;
    letter-spacing: 0.05em;
    margin-bottom: 3px;
    padding: 3px 5px;
    height: 2.0rem;
    line-height: 2.0rem;
}
.result-usage-ttl{
	
	position: relative;
    font-size: 1.2rem;
    margin-left: 20px;
	line-height: 1;
	display: inline-block;
}
.result-usage-ttl span{
	font-size: 1.4rem;
	font-weight: bold;
	margin-right: 3px;
	background: #fff;
	color: #000;
	padding: 2px;
	border-radius: 5px;
	vertical-align: text-top;
}
.result-usage-disp{
	font-size: 1.2rem;
	position: relative;
	display: inline-block;
	margin-left: 10px;
	line-height: 1.3;
    width: calc(100% - 140px);
}
.result-usage .header-time-btn {
	top: 5px;
    right: auto;
    left: 0;
	width: 20px;
    height: 20px;
}
.result-usage .header-time-btn-round{
	background: rgba(255,255,255,0);
}
#container-reach h4{
	margin-top: 20px;
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
}
.result-total{
    font-size: 30vw;
    font-weight: bold;
    color: #00a0e9;
    text-align: center;
    line-height: 1.2;
}
.result-total span{
    font-size: 2.0rem;
    color: #000;
}

/*=============================
設定
=============================*/
#container-setting .container-reach-reach {
	padding: 0 5%;
}
.switch{
	position: relative;
	margin: 20px 0 40px;
}
.switch-text{
	font-size: 1.6rem;
    font-weight: bold;
}
.switch-box{
	position: absolute;
	top:0;
	right: 0;
	width:50px;
	height: 30px;
	border-radius: 30px;
	background: #bcbcbc;
	transition: 0.5s;
}
.switch-box:after{
	content: '';
	position: absolute;
	top:4px;
	left: 4px;
	right:auto;
	width:22px;
	height: 22px;
	border-radius: 22px;
	background: #fff;
	transition: 0.5s;
}
.switch-box.on{
	background: #e4007f;
}
.switch-box.on:after{
	right:4px;
	left: auto;
}
.header-copy-txt {
	margin-top: 20px;
	text-align: center;
	font-size: 1.2rem;
}

#index-item-2::after{
	right: auto;
	left: -20%;
	background-image: url(../images/icon-anime-w.svg);
}
#index-item-3::after{
	background-image: url(../images/icon-quest-w.svg);
}
#index-item-4::after{
	right: auto;
	left: -20%;
	background-image: url(../images/icon-word-w.svg);
}
#index-item-5::after{
	background-image: url(../images/icon-svoc-w.svg);
}
#index-item-6::after{
	right: auto;
	left: -20%;
	background-image: url(../images/icon-unit-w.svg);
}
#index-item-7::after{
	background-image: url(../images/icon-down-w.svg);
}
.index-item2{
	border: 2px solid #444444;
}
.index-item-tbl {
    /*display: table;*/
	text-align: center;
}
.index-item-num, .index-item-txt {
    /*display: table-cell;*/
}
.index-item-disp{
	margin: 5px 0 15px;
	text-align: center;
	font-size: 1.2rem;
}
.img-center{
	text-align: center;
    margin-top: 50px;
	padding: 0 20px;
}
.img-center img{
	width: 100%;
}
.header-menu ul.container-main-menu{
	align-content: space-between;
	height: 100%;
	padding:30px 10px 10px;
	box-sizing: border-box;
}
.header-menu ul.container-main-menu li {
	margin-bottom: 0;
}
.header-menu .index-item {
    position: relative;
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: none;
    font-weight: bold;
    background: none;
    color: #fff;
    /*padding: 5px 10px;*/
	padding: 0px 6px;
    border-radius: 0;
    /*font-size: 1.6rem;*/
	line-height: 1;
    width: 95%;
    height: 4vh;
    margin: 0 auto 0;
    background: #fff;
    border-radius: 5px;
    display: table;
}
.header-menu .index-item-tbl {
	text-align: center;
    display: table-cell;
    vertical-align: middle;
}
.header-menu .index-item-tbl .index-item-txt {
    font-size: 1.4rem;
}
.header-menu #index-item-2::after ,
.header-menu #index-item-4::after ,
.header-menu #index-item-6::after ,
.header-menu #index-item-8::after ,
.header-menu #index-item-10::after ,
.header-menu .index-item::after {
	right: auto;
	left: 0;
	top:0;
	height: 80%;
}
.index-time-txt{
	position: absolute;
    font-size: 1.2rem;
    right: 10px;
    bottom: 10px;
    font-weight: 400;
    color: #555;
}
.unit-menu .index-item::after{
	background: none;
}
.index-item-downLoad::after{
	content: '';
    position: absolute;
    top: 10%;
    left: 1%;
    width: 18%;
    height: 80%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
	background-image: url(../images/icon-down-b.svg);
}
.index-item-listening::after{
	background-image: url(../images/icon-listening-b.svg);
}
.index-item-anime::after{
	background-image: url(../images/icon-anime-b.svg);
}
.index-item-quest::after{
	background-image: url(../images/icon-quest-b.svg);
}
.index-item-word::after{
	background-image: url(../images/icon-word-b.svg);
}
.index-item-basic::after{
	background-image: url(../images/icon-svoc-b.svg);
}
/*=============================
listening
=============================*/
#container-listening{
	padding-bottom: 90px;
}
.listening{

}
.listening li{
	position: relative;
	margin-bottom: 30px;
}
.listening.unit-menu li{
	margin-bottom: 20px;
}
.unit-menu .index-item {
	font-size: 2.2rem;
}
.listening .listening-item-icon{
	position: absolute;
	top:50%;
	left: 0;
	width: 25px;
    height: 25px;
	margin-top: -12px;
    background-image: url(../images/icon-play-r.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.listening .listening-item-ppl{
	position: absolute;
	top:50%;
	left: 25px;
    width: 50px;
	margin-top: -22px;
	text-align: center;
	font-size: 0.9rem;
	line-height: 1.2em;
}
.listening .listening-item-ppl img{
	width:40px;
	height: 40px;
	border-radius: 100%;
	border: 2px solid #00a0e9;
}
.listening .listening-item-ppl span{
	font-weight: bold;
	color: #00a0e9;
}
.listening .listening-item-Text{
	margin-left: 80px;
	display: table-cell;
	vertical-align: middle;
}
.listening .listening-item-eng{
	margin-left: 80px;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.2em;
	border: 2px solid #fff;
    border-radius: 15px;
    display: table;
    pointer-events: none;
    padding: 5px;
    transition: 0.5s;
}
.listening .listening-item-jpn{
	margin-left: 80px;
	margin-top: 2px;
	font-size: 1.2rem;
	font-weight: bold;
	color: #888888;
	line-height: 1.2em;
	border: 2px solid #fff;
    border-radius: 15px;
    display: table;
    pointer-events: none;
    padding: 5px;
    transition: 0.5s;
}
.listening .current .listening-item-icon{
	background-image: url(../images/icon-play-bl.svg);
}
.listening .current .listening-item-eng{
	background: #c2e5ea;
}
.listening .current .listening-item-ppl img{
	border: 2px solid #33a8ff;
}
.listening .current .listening-item-ppl span{
	color: #33a8ff;
}
.listening.eng-off .listening-item-eng:not(.open){
	color: #fff;
    border: 2px solid #00a0e9;
    background: #fff;
    pointer-events: auto;
    position: relative;
}
.listening.eng-off .listening-item-eng:not(.open)::after{
	content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(../images/icon-open-r.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.listening.jpn-off .listening-item-jpn:not(.open){
	color: #fff;
    border: 2px solid #888888;
    background: #fff;
    pointer-events: auto;
    position: relative;
}
.listening.jpn-off .listening-item-jpn:not(.open)::after{
	content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(../images/icon-open-g.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}


.btn-play{
	position: absolute;
	top:8.5px;
	left:8.5px;
	text-align: center;
	font-weight: bold;
	font-size: 1.1rem;
}


/*.btn-play-btn-round::before{
	content:'';
	position: absolute;
	width: 100%;
	height: 100%;
    background: #1abc9c;
    background-image: linear-gradient(to right, transparent 50%, #fe8a01 0);
	z-index: -1;
	transform: rotate(72deg);
}*/
/*.btn-play-btn-round::after{
	content:'';
	position: absolute;
	width: 100%;
	height: 100%;
    background: #1abc9c;
    background-image: linear-gradient(to right, transparent 50%, #fe8a01 0);
	z-index: -1;
}*/

.animation-video{
    position: fixed;
    top: 0;
	padding-top: 25vw;
	padding-bottom: 3vw;
    left: 0;
	width: 100%;
    z-index: 10;
	background: #fff;
}
.animation-video img{
	width:100%;
}
.eqPlayerClass{
	width: 0;
    height: 0;
    overflow: hidden;

	/*display: none;*/
}
#eqPlayerAnime{
	display: block;
	height: auto;
	position: fixed;
    top: 0;
	padding-top: 20vw;
	padding-bottom: 0;
    left: 0;
	width: 100%;
    z-index: 10;
	background: #fff;
}
/*=============================
question
=============================*/
.question-qarea{
	position: relative;
	background: #ffb5a6;
    width: 100%;
    border-radius: 10px;
    padding: 10px;
	padding-bottom:30px;
    box-sizing: border-box;
    font-size: 1.3rem;
    font-weight: bold;
    z-index: 1;
}
.question-qarea p{
	margin-top: 0;
	margin-bottom: 5px;
}
.question-qarea .btn-play {
	position: relative;
    top: auto;
    left: auto;
}
.question-qarea .bar-play{
	width: calc(100% - 70px);
    height: 10px;
    background: #fff;
    margin-left: 60px;
    margin-top: -30px;
	position: relative;
}
.question-qarea .bar-play::after{
	content: '';
	position: absolute;
	top:0;
	left:0;
	width: 50px;
	height: 10px;
	background: #00a0e9;
}
.question-qarea .bar-play-btn{
	position: absolute;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 100%;
    top: -5px;
    left: 50px;
    border: 4px solid #00a0e9;
    box-sizing: border-box;
	margin-left: -10px;
    z-index: 1;
}
.question-qarea2{
	position: relative;
	min-height: 60px;
	padding-bottom: 5px;
    display: flex;
    align-items: center;
	margin-top: 10px;
}
.question-qarea2::after{
	content: '';
	position: absolute;
	width: 100%;
	height: 6px;
	left: 0;
	bottom: -6px;
	background-size: auto auto;
	background-color: rgba(255, 255, 255, 1);
	background-image: repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(255, 80, 39, 1) 2px, rgba(255, 80, 39, 1) 4px );
}
.question-qarea2 p{
	font-size: 1.8rem;
    line-height: 1.4em;
    font-weight: bold;
    margin-left: 80px;
	margin-top: 0;
    color: #00a0e9;
}
.question-qarea2 .listening-item-ppl{
	width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    left: 0;
}
 .question-qarea2 .listening-item-ppl img{
    width: 100%;
    border-radius: 100%;
}
.answer-list{
	margin-top: 30px;
}
.answer-list li{
	margin-bottom: 20px;
}
.answer-list .index-item {
	font-size: 2.6rem;
	border-width: 4px;
	position: relative;
	transition-duration:0.5s;
}
.answer-list .index-item::after{
	display: none;
}
.answer-list li.selcet .index-item{
	border: 4px solid #ffea00;
	background: #fffcdb;
}
.answer-list li.correct .index-item::before{
	content: '';
    position: absolute;
    top: 50%;
    margin-top: -20px;
    left: -50px;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    box-sizing: border-box;
    border: 4px solid #ffea00;
	background: #fffcdb;
}
.answer-list{
	position: relative;
}
.answer-list.correct::before{
	content: '';
    position: absolute;
    top: 50%;
    margin-top: -120px;
    left: 50%;
    margin-left: -120px;
    width: 240px;
    height: 240px;
    border-radius: 100%;
    box-sizing: border-box;
    border: 20px solid #00a0e9;
    opacity: 0.5;
    z-index: 10;
}
.answer-list.wrong::before{
	content: '';
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -10px;
    left: 50%;
    margin-left: -120px;
    width: 240px;
    height: 20px;
	background: #00a0e9;
    transform: rotate(45deg);
	transform-origin: center;
    opacity: 0.5;
    z-index: 10;
}
.answer-list.wrong::after{
	content: '';
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -10px;
    left: 50%;
    margin-left: -120px;
    width: 240px;
    height: 20px;
	background: #00a0e9;
    transform: rotate(-45deg);
	transform-origin: center;
    opacity: 0.5;
    z-index: 10;
}
.question-bottom{
	border: none;
    background: none;
	height: 100px;
}
.question-bottom.wrong{
	background: linear-gradient(rgba(200,200,200,0.8), rgba(240,240,240,0.8));
}
.question-bottom.correct{
	background: linear-gradient(rgba(255,80,39,0.8), rgba(255,181,166,0.8));
}
.index-item-next{
	width: 100px;
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -50px;
}
.index-item-next::after{
	display: none;
}
.question-bottom-text{
	text-align: center;
    font-size: 3.0rem;
    font-weight: bold;
    line-height: 1.0em;
    padding: 5px;
    margin-bottom: 10px;
}
.answer-list-image{
	display: flex;
	-webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.answer-list-image li{
	width: 50%;
}
.answer-list-image .index-item-image img{
	width:100%;
	border-radius: 10px;
	
}
.answer-list-image .index-item {
	padding: 5px;
	width: 90%;
	font-size: 2.0rem;
	margin-bottom: 15px;
}
.answer-list-image li.correct .index-item::before{
    top: -10px;
    margin-top: 0;
    left: -10px;
}
/*=============================
New Words
=============================*/
#container-words{
	min-height: calc(100vh - 90px);
	height: calc(100vh - 90px);
    position: relative;
}
#container-words .btn-area-lng,
#container-words-menu .btn-area-lng{
	top: 15px;
    left: 15px;
}
#container-words .btn-area-sort,
#container-words-menu .btn-area-sort{
	top: 50px;
    left: 15px;
}
#container-words .btn-area-set,
#container-words-menu .btn-area-set {
    width: calc(100vw - 110px);
    left: 60px;
}
#container-words .btn-play {
    position: relative;
    top: auto;
    left: auto;
    margin: 0 auto;
    display: table;
    transform: scale(1.5);
}
.words-list{
	margin-top: 5vh;
}
.words-list li{
	margin-bottom: 3vh;
}
.words-list .index-item{
	min-height: 90px;
	font-size: 2.6rem;
    display: table;
	border-width: 3px;
	width: 85%;
	padding: 10px;
}
.words-list .index-item-tbl{
	position: absolute;
    width: calc(100% - 20px);
	top: 50%;
    margin-top: -15px;
}
.words-list .index-item-tbl-back{
	position: relative;
    width: auto;
    top: auto;
    margin-top: 0;
    display: table-cell;
    vertical-align: middle;
}
.index-item-txt-back{
	opacity: 0;
	letter-spacing: 0.05em;
	transition-duration:0.5s;
}
.back .index-item{
	border-color: #e9e9e9;
	background: #e9e9e9;
}
.back .index-item-txt{
	opacity: 0;
}
.back .index-item-txt-back{
	opacity: 1;
}
.words-jpn{
	margin: 0 5px;
	font-size: 2.2rem;
}
.words-jpn li{
	margin: 5px 0;
}
.words-jpn span{
	float: left;
    border: 2px solid #000;
    border-radius: 5px;
    padding: 2px;
    width: 26px;
    height: 26px;
    text-align: center;
}
.words-jpn div{
    text-align: left;
    margin-left: 50px;
	padding-top: 4px;
}
#container-words .index-item-next{
	width: 150px;
	margin-left: -75px;
	bottom: auto;
}
.index-item-back{
	position: absolute;
    left: 10px;
    bottom: 5px;
    width: 50px;
    font-size: 1.6rem;
    padding: 3px;
}
.index-item-back::after{
	display: none;
}
.words-num{
	position: absolute;
    left: 5px;
    bottom: 32px;
    width: 60px;
	text-align: center;
	font-size: 1.3rem;
	font-weight: bold;
}
#container-words .index-item::after{
	display: none;
}
/*=============================
基本文
=============================*/
.basic .listening-item-jpn{
	margin-left: 40px;
}
.basic .listening-item-eng{
	margin-left: 40px;
    border: 2px solid #fff;
    border-radius: 15px;
    display: table;
	pointer-events: none;
	padding: 5px;
	transition: 0.5s;
}
.basic .listening-item-eng.close{
	color: #fff;
    border: 2px solid #00a0e9;
    background: #fff;
	pointer-events: auto;
	position: relative;
}
.basic .listening-item-eng.close::after{
	content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(../images/icon-open-r.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.basic .listening-item-jpn{
	margin-left: 40px;
    border: 2px solid #fff;
    border-radius: 15px;
    display: table;
	pointer-events: none;
	padding: 5px;
}
.basic .listening-item-jpn.close{
	color: #fff;
    border: 2px solid #888888;
    background: #fff;
	pointer-events: auto;
	position: relative;
}
.basic .listening-item-jpn.close::after{
	content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(../images/icon-open-g.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
/*=============================
Unit別索引
=============================*/
#container-unit .index-item-disp {
	font-size: 2.8rem;
    font-weight: bold;
}
/*=============================
ダウンロード
=============================*/
#container-download-menu .index-item-disp {
	text-align: left;
}
#container-download-menu .listening.unit-menu li {
	margin-bottom: 10px;
}
#container-download-menu .unit-menu .index-item{
	 width: 85%;
	font-size: 2.0rem;
	border-radius: 10px;
}
#container-download-menu .index-time-txt{
	font-size: 1.6rem;
    font-weight: bold;
    bottom: 8px;
}  
/*=============================
シリアルNo
=============================*/
#errMessage{
    margin-top: 20px;
    text-align: center;
    font-size: 1.4rem;
    font-weight: bold;
    color: #e4007f;
} 
.setting-notice{
	display: none;
	font-size: 1.2rem;
    line-height: 1.2;
    background: rgba(0,0,0,0.4);
    border-radius: 5px;
    padding: 5px;
    margin-top: -15px;
    width: 100%;
    margin-left: 0;
    box-sizing: border-box;
    color: #fff;
}
.setting-text{
    font-size: 1.4rem;
    font-weight: bold;
	text-align: center;
}
.setting-text2{
    font-size: 1.4rem;
	text-align: left;
	background: #d4d4d4;
	padding: 8px;
	border-radius: 8px;
	line-height: 1.6rem;
	widows: 110%;
	margin-left: -5%;
	margin-right: -5%;
}
.setting-text2 p{
	line-height: 2.4rem;
}
.setting-text2 img{
	height: 2.2rem;
	margin: 0 3px;
	border-radius: 4px;
}
#container-buy-contents{
	margin-bottom: 40px;
}
/*=============================
START
=============================*/
/*#container-start{
	position: relative;
}*/
#container-start .container-bottom{
	bottom: auto;
    margin: 0;
    top: 250px;
	left: 30px;
    position: absolute;
    margin-top: -400px;
    z-index: -1;
    width: calc(100% - 30px);
}
.container-bottom .footer-txtS {
    position: relative;
    display: inline-block;
    font-size: 2.0rem;
    font-weight: bold;
    background: #fa0064;
    /* width: auto; */
    margin-left: 130px;
    margin-right: 10px;
    margin-top: 15px;
    z-index: 10;
    padding: 5px;
    text-align: center;
    border-radius: 10px;
    color: #fff;
    line-height: 1.4;
    letter-spacing: 0.05em;
    box-shadow: 3px 3px 2px 2px rgb(255 255 255 / 60%);
}
/*=============================
container-startTest
=============================*/
#container-report,
#container-startDeliveryTest,
#container-startTest{
    height: calc(100vh - 140px);
	padding-bottom: 0;
    padding-top: 0;
}
#container-entry{
	height: auto;
}
#container-entry .startTest-area{
    position: relative;
    width: 100%;
    top: auto;
    transform: translate(-50%, 0);
    margin-top: 10px;
}
.startTest-area{
	width: 80%;
	position: absolute;
	padding-bottom: 0;
    padding-top: 0;
    top: 50%;
	left: 50%;
    transform: translate(-50%, -50%);
}
.startTest-area-title{
	font-size: 1.6rem;
    font-weight: bold;
    width: 40%;
    float: left;
    text-align: right;
    height: 30px;
    line-height: 30px;
    padding-right: 10px;
    box-sizing: border-box;
}
.startTest-area-input{
	width: 50%!important;
	margin: 0 0 10px 0!important;
}
.btn-startTest1{
	margin: 60px auto 0; 
	left: 0; 
	transition: 0.5s;
}
.btn-startTest11{
	margin: 20px auto 0; 
	left: 0; 
	transition: 0.5s;
	width: 75%;
	height: 36px;
    line-height: 26px;
    font-size: 1.6rem;
}
.btn-startTest2{
	/*margin: 50vh auto 0; 
	left: 0; 
	transition: 0.5s;*/
	position: absolute;
	margin: 0 12.5%;
	width: 75%;
	left: 0;
	bottom: 0;
	transition: 0.5s;
}
.submisionStundetComment{
    position: absolute;
    margin: 0 12.5%;
    width: 75%;
    left: 0;
    bottom: 50px;
    transition: 0.5s;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: left;
    display: none;
}
.submisionStundetComment.on{
    display: block;
}
#studentComment1{
    width: calc(100% - 10.7rem - 5px);
    margin-left: 5px;
}
#studentComment2{
    width: calc(100% - 10.7rem - 5px);
    margin-left: 5px;
}
#container-result .submisionStundetComment{
    position: relative;
    margin: 20px 10% 0;
    width: 80%;
    bottom: auto;
}
#btn-comment {
    width: 50%;
    margin: 2px auto 20px;
    font-size: 1.8rem;
    text-align: center;
    height: auto;
    display: none;
}
#btn-comment.on{
    display: block;
}

.btn-go-second{
	display: none;
	font-size: 1.8rem;
}
.btn-go-second23{
	margin-top: 20px;
}

#startFinishDatetime{
	height: 30px;
    border: none;
    border-bottom: 1px solid #333;
    width: 50%;
    font-size: 1.4rem;
}
.MathJax_SVG{
	font-size: 120%!important;
}
#answerText .MathJax_SVG{
    margin-left: 10px!important;
    margin-right: 10px!important;
}
/*=============================
firebase 
=============================*/
#firebaseui-auth-container{
	/*height: 450px;*/
}
.firebaseui-container{
	background: none;
	box-shadow: none;
	max-width: none;
}
.mdl-button{
	position: relative;
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 3px solid #000;
    line-height: 1.2;
    background: #fff;
    padding: 3px 6px;
    border-radius: 10px;
    font-size: 2.2rem;
	font-weight: bold;
    letter-spacing: 0.1em;
    width: 100%;
    margin: 4px 0;
    box-sizing: border-box;
	height: 40px;
	line-height: 30px;
    box-sizing: border-box;
	box-shadow: 0px 0px 12px -6px rgb(0 0 0 / 80%);
}

.mdl-button--raised.mdl-button--colored{
	background: #fff;
	color: #000;
}
.mdl-button--raised.mdl-button--colored:hover{
	background: #fff;
	color: #000;
}

.firebaseui-card-actions{
	padding-left: 0;
	padding-right: 0;
}
/*body.account .firebaseui-card-actions{
	position: absolute;
    bottom:-200px;
}*/
.firebaseui-form-links,
.firebaseui-id-secondary-link{
	display: none;
}
.firebaseui-card-header{
	padding: 0;
	border:none;
}
.firebaseui-title{
	font-size: 1.6rem;
    font-weight: bold;
    text-align: center;
	font-family: 'Mulish', sans-serif;
}
.mdl-textfield.is-invalid .mdl-textfield__input,
.firebaseui-textfield.mdl-textfield .firebaseui-input{
	border-bottom: 1px solid #333;
	font-family: 'Mulish', sans-serif;
	padding: 5px;
	box-sizing: border-box;
	color: #000;
	background: rgba(255,255,255,0.8);
	border-radius: 5px 5px 0 0;
}
#firebaseui-auth-container .message{
	text-align: center;
    font-size: 1.4rem;
    font-weight: bold;
}
.firebaseui-info-bar{
	display: none;
}
.mdl-textfield--floating-label .mdl-textfield__label{
	padding: 2px 5px;
    box-sizing: border-box;
    font-family: 'Mulish', sans-serif;
	font-size: 1.3rem;
}
.mdl-textfield--floating-label .mdl-textfield__label span{
	font-size: 1.1rem;
}
.mdl-textfield--floating-label.is-focused .mdl-textfield__label, .mdl-textfield--floating-label.is-dirty .mdl-textfield__label, .mdl-textfield--floating-label.has-placeholder .mdl-textfield__label {
	top:0;
}
.mdl-textfield{
	margin-top: -25px;
	padding-bottom: 10px;
}
.firebaseui-input-toggle-focus,
.firebaseui-input-toggle-blur {
    opacity: 0;
}
.demoenabled{
	pointer-events: none;
	opacity: 0.6;
}
.firebaseui-info-bar{
    display: none;
}
/*.firebaseui-textfield.mdl-textfield.is-focused .firebaseui-input{
	border-bottom: 2px solid #e4007f;
}
*/
.limitOff,
.importantDisabled{
	display: none!important;
}
.loader,
.loader:before,
.loader:after {
  background: #e4007f;
  -webkit-animation: load1 1s infinite ease-in-out;
  animation: load1 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
}
.loader {
	color: #e4007f;
	text-indent: -9999em;
	margin: calc(50% - 200px) auto;
	position: fixed;
	font-size: 11px;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
	top: 50%;
	left: 50%;
	margin-top: -45px;
}
.loader:before,
.loader:after {
  position: absolute;
  top: 0;
  content: '';
}
.loader:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 1.5em;
}
@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}
@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}
.loaderText {
    position: fixed;
    font-size: 11px;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
    top: 50%;
    left: 50%;
    margin-top: 70px;
    margin-left: -150px;
    width: 300px;
    text-align: center;
    color: #e4007f;
    font-size: 1.2rem;
    font-weight: bold;
}
/*-----------------------------------------------
	stbuy
-----------------------------------------------*/
#container-stbuy{
	left:0;
	padding: 0 15%;
}
#container-stbuy .stbuy-price{
	text-align: center;
	font-size: 1.6rem;
	border-bottom: 2px dotted #000;
	margin: 80px 0 30px;
}
#container-stbuy .stbuy-notice3,
#container-stbuy .stbuy-notice2,
#container-stbuy .stbuy-notice{
	font-size: 1.2rem;
	margin-top: calc(100vh - 450px);
	text-align: center;
	background: #bbb;
	color: #fff;
	border-radius: 10px;
	padding: 5px;
}
#container-stbuy .stbuy-notice2{
	margin-top: 50px;
	background: #c00;
	font-size: 1.3rem;
	text-align: left;
}
#container-stbuy .stbuy-notice3{
	margin-top: 50px;
	font-size: 1.3rem;
	text-align: left;
}
#container-stbuy .stbuy-notice a{
	color: #fff;
	border-bottom: 1px dotted #fff;
}
/*-----------------------------------------------
	video
-----------------------------------------------*/
#container-submission{
	height: calc(100vh - 120px);
	text-align: center;
    padding-top: 0;
    margin-top: -5px;
    padding-bottom: 0;
}
#videoArea{
	position: fixed;
	top:100vh;
	/*margin: 10px 0 0;*/
	margin: 0;
	width: 100vw;
	height: 100vh;
	z-index: 1000;
	background: rgba(0,0,0,0.8);
	left: 0;
	transition: 0.5s;
}
#videoArea.on{
	top:0;
}
/*video{
	max-height: 100%;
	max-width: 90%;
	height: auto;
	width: auto;
	top:50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	position: absolute;
	pointer-events: none;
	border-radius: 10px;
}*/
video{
	/*width: 100%;
	margin: 10px 0;*/
    /*width: calc(100% - 20px);
	margin: 50px 10px;*/
	width: 90%;
	max-height: calc(100vh - 200px);
    /*height: auto;*/
    aspect-ratio: 1 / 1;
	/*width: auto;*/
	top:50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	position: absolute;
    border-radius: 10px;
    box-shadow: 0px 0px 12px -6px rgb(0 0 0 / 80%);
}
canvas#picture{
	max-height: 100%;
	max-width: 90%;
	height: auto;
	width: auto;
	top:50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	position: absolute;
    border: 3px solid #fff;
	/*pointer-events: none;*/
	border-radius: 10px;
	/*transform: scale(0.5);
    transform-origin: top left;*/
	margin-bottom: 10px;
}
canvas#pictureCopy1,
canvas#pictureCopy2,
canvas#pictureCopy3{
	/*display: none;*/
	/*max-height: 100%;*/
	/*max-width: 90%;*/
	height: auto;
	width: 100%;
	/*margin: 10px;*/
	/*top:10px;
	left: 50%;
	transform: translateX(-50%) scale(0.5);*/
	position: relative;
	/*pointer-events: none;*/
	border-radius: 10px;
	transform-origin-x: center;
	transform-origin-y: top;
	/*transform: scale(0.5);
    transform-origin: top left;*/
}
.submissionSet{
	width: 100%;
	margin: 0;
	position: relative;
}
#submissionUrlImgArea{
	max-height: 50%;
	max-width: 90%;
	height: 40vh;
	width: auto;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	position: relative;
	/*pointer-events: none;*/
	border-radius: 10px;
	transform-origin-x: center;
	transform-origin-y: top;
	text-align: center;
	overflow-y: auto;
}
#submissionUrlImg{
	display: none;
	/*max-height: 50%;*/
	/*max-width: 90%;*/
	height: auto;
	width: 100%;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	position: relative;
	/*pointer-events: none;*/
	border-radius: 10px;
	transform-origin-x: center;
	transform-origin-y: top;
	text-align: center;
	margin-bottom: 10px;
}
#submissionUrlImg img{
	/*width:100%;*/
	/*max-width: 100%;
	max-height: 100%;*/
	height: auto;
	width: 100%;
	margin: 0;
	border-radius: 10px;
	margin-bottom: 10px;
}
.submissionSet .btn-trigger{
	position: absolute;
    top: 5px;
    right: 5px;
    box-shadow: none;
    border-radius: 100%;
    width: 40px;
}
.submissionSet .btn-trigger span {
    left: 8px;
}
#shutter{
	position: absolute;
	bottom:20px;
	z-index: 900;
	width:40px;
	height:40px;
	background: #fff;
	box-shadow: 0px 0px 8px 0px #555555 inset;
	border: 4px solid #000;
	border-radius: 100%;
	left:50%;
	margin-left: -25px;
	padding: 0;
}
#btn-ok{
	position: absolute;
	width: 120px;
	bottom:20px;
	left:50%;
	transform: translateX(-50%);
}
#btn-reShoot{
	position: absolute;
	width: 80px;
	bottom:20px;
	left:10px;
	font-size: 1.3rem;
}
#btn-photo.disabled{
	pointer-events: none;
	opacity: 0.5;
}

body.page-term {
	/*overflow: visible;
	height: auto;*/
}
.page-term #container{
	/*overflow: auto;
    height: 100vh;*/
}
.page-term #container-set{
	overflow: auto;
	top:0;
	height: 100vh;
	box-sizing: border-box;
}
.page-term #container-term{
    height: auto;
    margin-top: 30px;
	font-size: 1.2rem;
	padding-bottom: 80px;
	top: auto;
    left: auto;
    position: relative;
}
.page-term h2{
    margin-bottom: 30px;
	background: none;
    color: #000;
}
.page-term .copyright{
    text-align: center;
    margin-top: 30px;
}
.page-howto h3{
    margin-bottom: 30px;
	background: none;
    color: #000;
    border-bottom: 4px solid #008aff;
    margin-top: 30px;
    margin-bottom: 15px;
    font-size: 1.4rem;
    font-weight: bold;
}
.howtoImg{
	width: 100%;
    margin: 0 0 10px;
    border: 2px solid #fff;
    box-sizing: border-box;
    border-radius: 10px;
}
.howtoText{
	width: 100%;
    margin: 0;
}
.howtoMaru{
    color: #fff;
    background: #008aff;
    border-radius: 100%;
    text-align: center;
    font-weight: bold;
    width: 20px;
    height: 20px;
    display: inline-block;
    line-height: 20px;
    margin-right: 5px;
}
.howtoTitle{
	color: #008aff;
	font-weight: bold;
}
.howtoDisc{
	font-size: 1.1rem;
    line-height: 1.2;
    margin-bottom: 10px;
    margin-top: 2px;
}
.howtoClick{
	font-weight: bold;
	border-bottom: 2px dotted #008aff;
}
.textR{
    text-align: right;
}
.textC{
    text-align: center;
}
.textL{
    text-align: left;
}
@media screen and (min-width: 800px) {
	html{
		font-size: 80%;
	}
	body{
		background: linear-gradient(#d7d9d9, #c5cbcb);
	}
	#container{
		width: 80%;
		min-width: 768px;
		max-width: 1200px;
		margin: 0 auto;
		background: linear-gradient(#efefee, #d7d9d9);
		height: 100vh;
		overflow:hidden;
		box-shadow: 0px 0px 12px -6px rgb(0 0 0 / 80%);
	}
	.header-score {
		width: 80px;
		text-align: center;
		right: 0;
		top: 5px;
	}
	.header-time-btn {
		top: 25px;
		right: 27px;
		width: 32px;
		height: 32px;
	}
	.header-time-text{
		width: 80px;
		text-align: center;
		right: 0;
		top: 60px;
	}
	.header-cnt {
		width: calc(100% - 160px);
		left: 80px;
	}
	.header-cnt span {
		height: 22px;
		padding: 2px 5px;
	}
	.header-ttl {
		width: calc(100% - 160px);
		left: 80px;
		top: 40px;
	}
	#container-set {
		width: 80%;
		min-width: 768px;
		max-width: 1200px;
		top:100px;
		height: calc(100vh - 100px);
		overflow: hidden;
		position: relative;
		/*position: fixed;*/
		width: 100%;
		left:0;
	}
	#header{
		position: fixed;
		width: 80%;
		min-width: 768px;
		max-width: 1200px;
		margin: 0 auto;
		height: 100px;
	}
	#header .header-menu,
	#header .header-menu .header-menu-inner {
		width: 500px;
		/*width: 80%;
		min-width: 768px;
		max-width: 1200px;*/
		margin: 0 auto;
	}
	#header .header-menu {
		left: -500px;
	}
	.container-bottom{
		width: 80%;
		min-width: 768px;
		max-width: 1200px;
		
		left: auto;
		/*height: 100px;*/
	}
	.container-bottom .footer-char {
		left: 50px;
	}
	.container-bottom .footer-txt{
		margin-left: 180px;
		font-size: 1.8rem;
		line-height: 1.2;
	}
	.container-bottom.wrong::before,.container-bottom.wrong::after {
		width: 60%;
		height: 40px;
	}
	.container-bottom::before, .container-bottom::after{
		margin-left: -30%;
	}
	.container-bottom.correct::after {
		margin-top: calc(-20vw - 50vh);
		margin-left: -20vw;
		width: 40vw;
		height: 40vw;
		border-width: 40px;
	}
	#container-question.container-inner .frame-menu {
		height: auto;
		/*max-height: calc(100% - 250px);*/
	}
	.btn-checkbox .btn-answer-tbl::before {
		margin-top: -19px;
		margin-left: -11px;
	}
	.btn-check::before {
		top: -7px;
		margin-left: -10px;
	}
	.btn-naviC,
	.btn-naviL,
	.btn-naviR {
    	width: 200px;
	}
	.ans-area .btn-naviC{
		margin-left: -100px;
	}
	#btn-next {
		width: 150px;
		margin-left: -75px;
	}
	#aplModalContents {
    	margin: 30px;
	}
	#aplModalContentsText {
    	height: calc(100vh - 120px);
	}
	.testTime,
	.btn-check,
	.btn-guide,
	.btn-navi,
	.btn-answer{
		cursor: pointer;
		transition-duration:0.5s;
	}
	.testTime:hover,
	.btn-check:hover,
	.btn-navi:hover,
	.btn-answer:hover {
		color: #e4007f;
		background: #eee;
		/*border-color: #e4007f;*/
		/*background: linear-gradient(-90deg, rgba(228,0,1275,0) 0%, rgba(228,0,127,0.3) 100%);*/
	}
	.container-menu-ul-daysche-ul>li{
		min-height: 42px;
	}
	.container-menu-ul-daysche-ul li .sche-date {
		margin-top: -16px;
	}
	
	#container-menuSub .btn-navi {
		font-size: 1.8rem;
		line-height: 22px;
	}
	#container-menuSub .submisionSetInner{
		margin-top: 4px;
	}
	
	.btn-guide:hover {
		background: #eee;
		color: #e4007f;
	}
	
	#videoArea .btn-trigger:hover span,
	#aplModal .btn-trigger:hover span,
	.btn-trigger:hover span{
		background-color:#e4007f;
	}
	#btn-result2 {
		font-size: 2.0rem;
		height: 36px;
		line-height: 26px;
	}

	
	.btn-trigger::after {
		top: -65px;
		right: -65px;
		width: 140px;
		height: 140px;
	}
	.header-book {
		width: 80px;
		margin: 8px 0 0 8px;
	}
	
	.container-inner{
		min-height:auto;
		box-sizing: border-box;
		top:0;
		position: absolute;
        /*background:#dcffd4!important;*/
	}
	#container-menu-cont-yet {
		height: calc(100vh - 170px);
	}
	#container-contents-cont3, #container-contents-cont2, #container-contents-cont {
    	height: calc((100vh - 245px) / 3);
	}
	#container-contents-cont.container-contents-cont23 {
		height: calc((100vh - 190px) / 3 * 2);
	}

	#container-contents-cont.container-contents-cont3a{
		height: calc((100vh - 210px) / 2);
	}
	#container-contents-cont2.container-contents-cont3b,
	#container-contents-cont3.container-contents-cont3b{
		height: calc((100vh - 210px) / 4);
	}
	#container-menu.container-inner .frame-menu {
		max-height: calc(100% - 50px);
	}
	.container-inner .frame-menu {
		/*max-height: calc(100% - 75px);*/
		padding-left: 40px;
		padding-right: 40px;
	}
	#container-animation {
		padding-top: 680px;
	}
	.index-item{
		cursor: pointer;
		transition-duration:0.5s;
	}
	.index-item-l {
		font-size: 2.2rem;
	}
    .index-item-m {
		font-size: 2.0rem;
	}
	.index-item:hover{
		/*background: #00a0e9;
		color: #fff;*/
		color: #e4007f;
		background: #eee;
	}
	.index-item:hover .index-item-score,
	.index-item:hover .index-item-txt{
		/*color: #fff;*/
	}
	.index-item2:hover{
		/*background: #444444;*/
	}
	#btn-jpn, #btn-eng, #btn-listening {
		margin: 10px 0;
	}
	.mdl-button--raised.mdl-button--colored:hover{
		box-shadow: none;
		/*background: #00a0e9;
		color: #fff;*/
		color: #e4007f;
		background: #eee;
	}
	
	.index-item-a {
		font-size: 2.0em;
		margin-bottom: 5px;
	}
	.question-txt {
		font-size: 3.5rem;
		margin-bottom: 15px;
		margin-top: -5px;
	}
	.question-txt-jpn {
		font-size: 3.0rem;
	}
	.question-score {
		margin: 0px -60px -10px;
	}
	.result-total {
    	font-size: 200px;
		line-height: 1;
	}
    
    .answerText img,
	#question-area2 img,
    #setQ2SentenceCont img,
	#q-title1 img {
        width: 90%;
        margin: 5px 5%;
        max-height: 60vh;
    }
	
	
	.header-menu-txt {
		width: 100%;
		margin: 5vh 0;
		cursor: pointer;
		transition-duration:0.5s;
	}
	.header-menu-txt:hover{
		color: #000;
	}
	.header-copy-txt {
		left: 0;
	}
	.header-menu .index-item-tbl{
		margin-left: 80px;
	}
	.header-menu .index-item::after{
		width: 80px;
	}
	.header-menu .index-item:hover{
		color: #000;
		border-color: #000;
	}
	.header-menu .index-item2:hover{
		color: #000;
		border-color: #000;
		background: none;
	}
	.header-menu .index-item:hover::after {
		background-image: url(../images/icon-listening-b.svg);
	}
	.header-menu #index-item-2:hover::after{
		background-image: url(../images/icon-anime-b.svg);
	}
	.header-menu #index-item-3:hover::after{
		background-image: url(../images/icon-quest-b.svg);
	}
	.header-menu #index-item-4:hover::after{
		background-image: url(../images/icon-word-b.svg);
	}
	.header-menu #index-item-5:hover::after{
		background-image: url(../images/icon-svoc-b.svg);
	}
	.header-menu #index-item-6:hover::after{
		background-image: url(../images/icon-unit-b.svg);
	}
	.header-menu #index-item-7:hover::after{
		background-image: url(../images/icon-down-b.svg);
	}
	
	
	
	.menu-photo {
		/*height: 50px;*/
	}
	.container-menu-ul li ,
	.container-contents-ul li {
		padding-left: 45px;
		cursor: pointer;
		position: relative;
	}
    .container-menu-ul-daysche>li{
        padding-left: 4px;
    }
	#container-menuSub .container-menu-ul li.submissionli{
		cursor: auto;
	}

	.menu-date {
		width: 75px;
		line-height: 1.35;
	}
	.container-menu-ul-sche li {
		padding-left: 80px;
	}
	#container-menu-header {
		height: 50px;
	}
	.menu-date2 {
		width: 100px;
	}
	.menu-all::before, .container-menu-ul li::before {
		top: 38%;
		left: 1px;
	}
	.btn-checkBox .btn-area-btn:after{
		top: 33%;
		left: 1px;
	}
	.menu-mode2 {
		width: 45%;
		float: left;
		margin: 10px 0px 0 20px;
	}
	.menu-mode3 {
		width: 50%;
	}
	#btn-start {
		margin-top: 17px;
	}
	#reach-chart {
		max-width: 480px;
		max-height: 480px;
		margin: 0 auto;
	}
	#bookPhoto {
		width: auto; 
		/*max-height: 35vh;*/
        max-height: 30vh;
        max-width: 70%;
	}
	.menu-back-hover {
		background: linear-gradient(-90deg, rgba(228,0,1275,0) 0%, rgba(228,0,127,0.3) 100%);
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 0;
		z-index: 0;
		/* opacity: 0.7; */
		transition: 0.5s;
	}
	.container-menu-ul li:hover .menu-back-hover ,
	.container-contents-ul li:hover .menu-back-hover {
		width: 100%;
	}
	
	#submissionUrlImgArea{
		max-height: none;
		height: calc(100% - 300px);
	}
	#container-menuSub .menu-title {
		width: calc(100% - 220px);
	}
	/*=============================
	.btn-trigger
	=============================*/
	.btn-trigger {
		position: absolute;
		/*top:20px;
		right:calc(50% - 380px);
		width: 48px;
		height: 36px;*/
	}
	/*.btn-trigger span:nth-of-type(2) {
	  top: 16px;
	}
	.btn-trigger.on span:nth-of-type(1) {
	  -webkit-transform: translateY(16px) rotate(-45deg);
	  transform: translateY(16px) rotate(-45deg);
	}
	.btn-trigger.on span:nth-of-type(3) {
	  -webkit-transform: translateY(-16px) rotate(45deg);
	  transform: translateY(-16px) rotate(45deg);
	}*/
	
	/*=============================
	login
	=============================*/
	#container-login {
		padding-left: 80px;
		padding-right: 80px;
		padding-top: 10px;
		padding-bottom: 20px;
	}
	
	
	
	#container-select.container-inner .frame-menu {
		margin-bottom: 130px;
	}
	#footer-char-s-t,
	#footer-char-m-t,
	#footer-char-r-t,
	#footer-char-t {
		width: 60%;
	}
	.btn-area {
	    /*margin-top: 60px;*/
		
	}
	.btn-area-ttl {
		font-size: 1.4rem;
		margin-left: 50px;
		margin-top: 3px;
		float: left;
	}
	.btn-area-ptn {
		margin-top: 10px;
		margin-bottom: 20px;
	}
	.btn-area-set {
		width: 60%;
		margin-left: 25%;
	}
	.btn-area-btn {
		padding: 0 20px 0 40px;
		cursor: pointer;
		transition: 0.5s;
	}
	.btn-area-btn:hover {
		background: rgba(228,0,127,0.5);
		/*color: #fff;*/
	}
	.btn-radio .btn-area-btn:before {
		width: 14px;
		height: 14px;
		margin-top: -9px;
	}
    
	.btn-radio .btn-area-btn:after {
		width: 12px;
		height: 12px;
		margin-top: -6px;
	}
	.btn-check .btn-area-btn:before {
		width: 14px;
		height: 14px;
	}
	.btn-area-lng {
		top: 50px;
	}
	.btn-check .btn-area-btn:after {
		border-right: 4px solid #00a0e9;
		border-bottom: 4px solid #00a0e9;
		height: 15px;
		margin-top: -16px;
		width: 10px;
	}
	#btn-login {
		margin: 30px 0 30px;
	}
	
	.listening .listening-item-icon:hover{
		cursor: pointer;
		transition: 0.5s;
	}
	.listening .listening-item-icon:hover{
		background-image: url(../images/icon-play-bl.svg);
	}
	.listening.eng-off .listening-item-eng:hover::after{
		background-image: url(../images/icon-open-w.svg);
	}
	.listening.eng-off .listening-item-eng:hover{
		color: #00a0e9;
		background: #00a0e9;
		cursor: pointer;
	}
	.listening.jpn-off .listening-item-jpn:hover::after{
		background-image: url(../images/icon-open-w.svg);
	}
	.listening.jpn-off .listening-item-jpn:hover{
		color: #888888;
		background: #888888;
		cursor: pointer;
	}
	.btn-play-btn{
		margin: -5px auto 15px;
	}
	.btn-play-btn:hover{
		cursor: pointer;
		background-color:#fff;
		background-image: url(../img/icon-play-b.png);
		background-image: url(../img/icon-play-b.svg), none;
		/*transition: 0.5s;*/
	}
	
	.animation-video {
		position: fixed;
		width: 800px;
		min-width: 768px;
		margin: 0 -20px;
		height: auto;
		top: 0;
		left: auto;
		padding-top: 200px;
		padding-bottom: 20px;
	}
	.answer-list {
		margin-top: 20px;
	}
	.answer-list li {
		margin-bottom: 10px;
	}
	.answer-list .index-item {
		font-size: 2.0rem;
	}
	.question-qarea .bar-play{
		width: calc(100% - 90px);
		margin-left: 70px;
	}
	.question-bottom {
		height: 110px;
	}
	#container-words .back .index-item{
		pointer-events: none;
	}
	.words-jpn span {
		width: 30px;
		height: 30px;
	}
	.index-item-back {
		width: 70px;
	}
	.words-num {
		width: 80px;
		bottom: 40px;
	}
	
	#container-words .btn-area-lng, #container-words-menu .btn-area-lng{
		left: 120px;
	    top: 10px;
	}
	#container-words .btn-area-sort, #container-words-menu .btn-area-sort{
		left: 120px;
	}
	#container-words .btn-area-set, #container-words-menu .btn-area-set{
		width: calc(800px - 400px);
		left: 80px;
	}
	.basic .listening-item-eng.close:hover{
		color: #00a0e9;
		background: #00a0e9;
		cursor: pointer;
	}
	.basic .listening-item-eng.close:hover::after{
		background-image: url(../images/icon-open-w.svg);
	}
	.basic .listening-item-jpn.close:hover{
		color: #888888;
		background: #888888;
		cursor: pointer;
	}
	.basic .listening-item-jpn.close:hover::after{
		background-image: url(../images/icon-open-w.svg);
	}
	
	.howtoImg{
		width: 80%;
		margin: 0 10% 10px;
	}
	.howtoText{
		width: 90%;
		margin: 0 5%;
	}
	/*.eqPlayerClass{
		display: block;
		width: calc(100% + 40px);
		height: auto;
		margin-left: -20px;
	}*/
	#eqPlayerAnime {
		display: block;
		position: fixed;
		width: 800px;
		min-width: 768px;
		margin: 0 -20px;
		height: auto;
		top: 0;
		left: auto;
		padding-top: 200px;
		padding-bottom: 20px;
	}
	#btn-contact{
		/*width: auto;*/
		/*margin-left: -320px;*/
		/*margin: 80px auto;*/
	}
	#btn-forget{
		margin: 80px 0;
	}
	#shutter{
		cursor: pointer;
		transition: 0.5s;
	}
	#shutter:hover{
		background: #ccc;
	}
	
	.setting-text2{
		font-size: 1.2rem;
		width: 100%;
		box-sizing: border-box;
		margin-left: 0%;
		margin-right: 0%;
	}
    #container-menuSub .btn-navi {
        width: 100px;
        position: absolute;
        top: 50%;
        margin-top: -17px;
        right: 2px;
        height: 33px;
        line-height: 23px;
        font-size: 2.0rem;
    }
    .submisionSet.evaluationOn {
        right: 144px!important;
    }
    .evaluationList{
        bottom: 3px;
    }
    .submissionSet{
        width: 70%;
        margin: 0 15%;
        position: relative;
    }
}
/*Andorid*/

.Android .btn-checkBox .btn-area-btn.on:after,
.Android .menu-all::before, .Android .container-menu-ul li::before{
    font-size: 1.6rem;
    left: 8px;
    top:60%;
}
.Android .menu-all::before, .Android .container-menu-ul li::before{
    top:55%;
}
.Android .btn-check::before{
    font-size: 1.6rem;
    margin-left: -2px;
    top:0;
/*    left: 8px;
    top:60%;*/
}
#focusAlert{
    position: fixed; 
    font-size: 1.2rem;
    top:20px;
    color: #fff;
    width: 80%;
    left: 10%;
    background: rgba(0,0,0,0.5);
    padding: 10px;
    text-align:center;
    z-index: 999999;
    border-radius: 10px;
    box-sizing:border-box;
}