@charset "utf-8";

/*==================================
	Ethna
==================================*/
.hidden {
	display:none;
}
.error {
	color:#f00;
	font-weight:bold;
}
.left {
	text-align:left;
}
.right {
	text-align:right;
}
.gray {
	color:#999;
}
.ultragray {
	color:#ccc;
}
.small {
	font-size:80%;
}
.white {
	color:#fff !important;
}
.yellow {
	color:#f90;
}
.pointer {
	cursor:pointer;
}
.hide{
	display:none;
}

/*==================================
	Base
==================================*/
/* Clearfix */
.cf:before,
.cf:after {
	content:"";
	display:table;
}
.cf:after {
	clear:both;
}
.cf {
	zoom:1;
}

body.bg{
	background-image:url(../images/bg.png);
	background-repeat:repeat;
}
body.nologo .navbar-brand{
	display:none;
}
*{
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.text-lg,
.text-lg *,
.text-lg .btn{
	font-size:18px;
}
html.x-scroll-none,
html.x-scroll-none body{
	overflow-x:hidden;
}

/*==================================
	Font color & BG color
==================================*/
.text-warning{
	color:#FAEE00;
}
.text-danger{
	color:#E9006B;
}
.text-success{
	color:#019F52;
}
.bg-warning{
	background-color:#FEFBC6 !important;
}
.bg-primary{
	background-color:#C8DFEE !important;
}
.bg-success{
	background-color:#019F52 !important;
}
.alert-info {
	background-color: #b9d5ea;
	border-color: transparent;
	color: #227EC4;
}

/*==================================
	Alert
==================================*/
.alert-danger {
	background-color: #ffe2f0;
	border-color: transparent;
	color: #e8006d;
}
.alert-warning {
	background-color: #fefbc6;
	border-color: transparent;
	color: #a06c3f;
}
.alert-outline-warning,
.alert-outline-danger,
.alert-outline-info{
	background-color:#fff;
	padding:3px;
}
.alert-outline-warning{
	border: 3px solid #faee00;
	color: #a06c3f;
}
.alert-outline-danger{
	border: 3px solid #ffe2f0;
	color: #e8006d;
}
.alert-outline-info{
	border: 3px solid #56a5e2;
	color: #56a5e2;
}

/*==================================
	Container
==================================*/
html, body{
	height:100%;
	margin:0;
	padding:0;
	text-align:center;
}
.v2-container{
	min-height:100%;
	height:auto !important;
	height:100%;
	position: relative;
}
.v2-screen{
	width:100%;
	margin:0 auto;
	text-align: left;
	padding-bottom:40px;
}
.hirotan-container{
	margin: 0 10px;
}

/*==================================
	Login
==================================*/
.login{
	margin-top:60px;
}
.login .logo{
	height:140px;
}
.login .col-login{
	width:360px;
	margin:0 auto;
}

/*==================================
	Panel
==================================*/
.panel{
	border-radius:0;
	box-shadow:none;
}
.panel-warning{
	border-color: #FAEE00;
	background-color:#FAEE00;
}
.panel-warning>.panel-heading {
	color: #E8006D;
	background-color: #FAEE00;
	border-color: #FAEE00;
}
.panel-bold{
	border-width:7px;
	border-top-width:0;
	border-bottom-width:0;
}
.panel-bold:first-child{
	border-top-width:7px;
}
.panel-bold:last-child{
	border-bottom-width:7px;
}
.panel-login .panel-heading{
	border-radius:0;
}
.panel-outline-success{
	border: 3px dotted #019f52;
	background-color: #d6fbe9;
}
.panel-outline-danger{
	border: 3px dotted #e8006d;
	background-color: #ffeaf4;
}

/*==================================
	Header
==================================*/
header .navbar-default{
	background-color:transparent;
	background-image:url(../images/bg.png);
	background-repeat:repeat;
	border:none;
}
.bg header .navbar-default{
	background-image:none;
}
header .navbar{
	height:70px;
}
header .logo{
	height:50px;
}
header .navbar-brand{
	float:none;
	line-height:70px;
	padding:0;
}
header .navbar-nav>li>a{
	color:#fff !important;
	font-weight:900;
	padding-top:0;
	padding-bottom:0;
	line-height:70px;
}
.navbar-default .navbar-toggle{
	background-color:#eee;
}

/*==================================
	Footer
==================================*/
footer{
	height:40px;
	line-height:40px;
	width:100%;
	position: absolute;
	bottom: 0;
	margin:0 auto;
	text-align:center;
	color:#444;
}
.bg footer{
	color:#fff;
}

/*==================================
	Form
==================================*/
label{
	font-weight:100;
}
input[type="checkbox"],
input[type="radio"]{
	position:relative;
	top:2px;
}
.form-control{
	border-radius:0;
	border:2px solid #428bca;
	padding:6px;
}

/*iOSズームイン対応*/
.form-control[name="login_name"],
.form-control[name="password"]{
	font-size:16px;
}


/*==================================
	Button
==================================*/
.btn{
	border:none;
	font-weight:900;
}
.btn-success{
	background-color:#019F52;
}
.btn-success:hover,
.btn-success:active,
.btn-success:focus{
	background-color:#0BAB5D;
}

.btn-primary{
	background-color:#227FC4;
}

.btn-danger{
	background-color:#E8006D;
}
.btn-danger:hover,
.btn-danger:active,
.btn-danger:focus{
	background-color:#D42577;
}
.btn-warning{
	color: #333;
	background-color: #faee01;
}
.btn-warning:hover,
.btn-warning:active,
.btn-warning:focus{
	color: #333;
	background-color:#fbf353;
}

.no-btn {
	cursor: default;
	pointer-events: none;
}

#file_upload,
#file_upload object,
#file_upload #file_upload-button{
	width:200px !important;
}
.uploadify-button{
	padding:6px 12px;
	width:auto;
	line-height: 1.3 !important;
}

/*==================================
	Nav-tabs
==================================*/
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus{
	border:1px solid #fff !important;
}
.nav-tabs>li>a{
	border:1px solid #fff;
	color:#fff;
	border-radius:0 !important;
}
.nav-tabs>li>a:hover,
.nav-tabs>li>a:focus,
.nav-tabs>li>a:active{
	background-color:#227FC4;
	color:#fff;
}

/*==================================
	Table
==================================*/
.table-default{
	width:100%;
}
.table-default th,
.table-default td{
	border:1px solid #ccc;
	padding:7px;
}
.table-default th{
	background-color:#f9f9f9;
	font-weight:100;
	vertical-align:top;
}
.table-primary th{
	background-color: #227fc4;
	color:#fff;
}
.table-default th,
.table-default td {
	border: 1px solid #c6e1f5;
}

/*==================================
	Modal
==================================*/
.modal-header{
	background-image:url(../images/bg.png);
	background-repeat:repeat;
	color:#fff;
}
.modal-content{
	border-radius:1px;
}
.modal-footer{
	margin-top:0;
	border-top:none;
}
.modal .close{
	color:#fff;
	opacity:0.8;
}
.modal .close:hover{
	opacity:1;
}

/*==================================
	Well
==================================*/
.well-skeleton{
	background-color:transparent;
	border-radius:0;
	box-shadow:none;
	border:2px solid #fff;
}

/*==================================
	Contents
==================================*/
.logo-common img{
	width:320px;
	height:auto;
}
.div-lesson{
	background-color:#fff;
	padding:7px;
	border:2px solid #FAEE00;
}
.div-section-class{
	margin-bottom:25px;
	padding-bottom:20px;
	border-bottom:1px solid #fff;
}
.div-section-class:last-child{
	border-bottom:none;
}

/*==================================
	Lesson
==================================*/
#h2-question {
	font-weight:bold;
	font-size: 200%;
}
.margin-unit2 {
	margin: 50px;
}
.p-intro {
	margin: 50px;
}
.blue-bold {
	font-weight:bold;
	color:#227FC4;
}
.red-bold {
	font-weight:bold;
	color:#e8006d;
}
.ul-words,
.ul-words li{
	margin:0;
	padding:0;
	list-style-type:none;
}
.ul-words li{
	color:#428bca;
	font-weight:900;
}
.ul-words li.word-bold,
.ul-words li:hover{
	font-weight: bold;
	color:#E8006D;
}
.div-word-drops{
	border-bottom:1px solid #333;
	min-height: 2em;
	height:2em;
}
.li-word {
	min-height: 2em;
}
.li-bg-on .li-word{
	color: #428bca;
	font-weight: 900;
	background-color: #E1EFF9;
	padding-left: 10px;
	margin-right: -27px;
}

.ul-voice-words,
.ul-voice-words li{
	margin:0;
	padding:0;
	list-style-type:none;
}
.li-voice-on .li-word{
	color: #428bca;
	font-weight: 900;
	background-color: #E1EFF9;
	padding-left: 10px;
	margin-right: -27px;
}
.div-word-drags {
	min-height: 2em;
}
.result{
	display: inline-block;
	padding: 2px 6px;
	background-color: #FAEE00;
	font-weight: 900;
	color: #E8006D;
	border-radius: 100px;
	z-index:1;
	font-size: 22px;
}
.li-word,
.div-word-drops,
.div-word-drags{
	padding-top: 5px !important;
	white-space: nowrap;
	margin-bottom: 3px !important;
	box-sizing:border-box;
}
.li-word.li-word-break {
	white-space: normal;
	word-break: break-word;
}
.step2 .li-word{
	display: inline-block;
	vertical-align: middle;
	font-weight: bold;
	color:#428bca;
	position:relative;
}
.step2 .div-word-drops{
	display: inline-block;
	min-width: 12em;
	vertical-align: middle;
	min-height: 2em;
	box-sizing: border-box;
	position:absolute;
	left:0;
	top:0;
	background-color: #f9f9f9;
	border: 1px dotted #A7A7A7;

}
.step2 .div-word-drags{
	position: relative;
	cursor: move;
	display: inline-block;
	text-align: right;
	float: right;
	z-index:3;
}
.ui-droppable{
	padding-left:1em;
	/*padding-right:5px;*/
	text-align:left;
}
.word-name{
	display:inline-block;
	z-index:1;
	position:relative;
	padding-left:5px;
}
.td-success{
	background-color: #227FC4;
	color: #fff;
}

/*==================================
	Col
==================================*/
.col-max-10{
	margin:0;
}
/*@media (min-width: 768px) {
	.col-max-10 .col-sm-1 {
		width:10%;
	}
}*/
.col-max-10{
	display: flex;
	flex-direction:row;
	flex-wrap:wrap;
}
.col-max-10 [class^="col-"]{
	flex-grow:1;
}
@media (min-width: 768px){
	.col-max-10 [class^="col-"]{
		flex-basis:25%;
	}
	.col-max-10 [class^="col-"] .btn.size5{
		width:100% !important;
	}
}
@media (min-width: 992px){
	.col-max-10 [class^="col-"]{
		flex-basis:20%;
	}
}

/*==================================
	Flex Graph
==================================*/
.flex-graph{
	background-color:#fff;
	padding:5px;
	border-radius:3px;
	white-space:nowrap;
	min-width: 250px;
	padding-left:50px;
}
.flex-wrapper{
	display:flex;
	flex-wrap:nowrap;
	flex-direction:column-reverse;
}
.flex-wrapper .rect{
	flex-grow:1;
	flex-basis:10px;
	height:10px;
	margin:2px;
	background-color:#ebedf0;
}
.flex-wrapper .rect-green{
	background-color:#c6e48b;
}
.table-flex-table{
	width:100%;
}
.table-flex-table td{
	white-space:nowrap;
	width:1%;
}
.sp-scroll{
	position:relative;
}
.sp-scroll > .horizontal{
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	width:50px;
	padding:5px 5px 25px 5px;
}
.flex-axis{
	display:flex;
	flex-wrap:nowrap;
	flex-direction:column;
	height:100%;
}
.flex-axis .axis{
	flex-grow:1;
	font-size:10px;
}
.tr-data td{
	font-size:10px;
	word-wrap:break-word;
	word-break:break-all;
	white-space:normal;
}
.mine.flex-wrapper .rect-green{
	background-color:#196127;
}

/*==================================
	Testing
==================================*/
.container-teating .row{
	margin-left:0;
	margin-right:0;
}
.container-teating .p-intro{
	margin:0;
}
.section-info{
	margin:0 -15px 10px -15px;
	padding:15px;
	background-color:#ebf6ff;
}

/*==================================
	Adjust
==================================*/
.div-flex-num{
	display:flex;
	flex-wrap:wrap;
}
.div-flex-num .div-num{
	flex-basis:16.666666666%;
}
.div-flex-num .div-num .div-move-question{
	margin: 2px;
	min-height: 30px;
	line-height: 30px;
	text-align: center;
}
.fixed_page header .navbar{
	margin-bottom:0;
}
@media screen and (max-width: 767px) {
	.sp-scroll{
		overflow-x:auto;
	}
}
@media screen and (min-width: 768px) {
	header .navbar{
		padding:0 10px;
	}
	.fixed_page header{
		position: fixed;
		z-index: 2;
		width: 100%;
		top: 0;
		left: 0;
		right: 0;
	}
	.fixed_page footer{
		width:66.66666666666666%;
		display:none;
	}
	.fixed_page footer .container{
		width:100%;
	}
	.fixed_page .fixed-section{
		position: fixed;
		z-index: 2;
		width: 100%;
		left: 0;
		right: 0;
		box-sizing:border-box;
		padding:0 15px 5px 15px;
		background-color:#ebf6ff;
		border-bottom: 1px solid #dedede;
	}
	.fixed_page .fixed-right{
		position:fixed;
		z-index:2;
		right:0;
		bottom:0;
		width:450px;
		padding-right:0;
		border-left: 1px solid #dedede;
		box-shadow: -1px 0px 7px #00000017;
	}
	.fixed_page .fixed-left{
		width: 100%;
		padding-right: 450px;
		z-index:1;
	}
	.fixed_page .fixed-right .fixed-scroll-area{
		overflow-y:auto;
		height: 100%;
	}
	.div-flex-num{
		padding-top:10px;
	}
	.left-only .col-left{
		width:100%;
		display:flex;
		flex-wrap:wrap;
	}
	.left-only .col-left > .div-panel-flex{
		flex-basis:33.33333%;
		width:33.33333%;
		margin-bottom:20px;
	}
	.left-only .col-left > .div-panel-flex > .panel{
		margin:0 10px;
		height:100%;
	}
	.fixed-right-inner{
		height:100%;
		position:relative;
		box-sizing:border-box;
	}
	.div-fixed-form-buttons{
		position:absolute;
		z-index:3;
		top:0;
		left:0;
		right:0;
		padding:10px 10px 10px 10px;
		margin-left:-15px;
		border-bottom: 1px solid #ddd;
		text-align: center;
	}
	.div-fixed-form-buttons .btn{
		padding-left:0;
		padding-right:0;
		min-width: 20.5rem;
	}
}

/*==================================
	SmartPhone
==================================*/
@media screen and (max-width: 767px) {
	.table-responsive > table > thead > tr > th,
	.table-responsive > table > tbody > tr > th,
	.table-responsive > table > tfoot > tr > th,
	.table-responsive > table > thead > tr > td,
	.table-responsive > table > tbody > tr > td,
	.table-responsive > table > tfoot > tr > td {
		white-space:nowrap;
	}
	.table-responsive > table{
		margin-top:0;
	}
	header .logo{
		height:35px;
	}
	header .navbar{
		height:55px;
	}
	header .navbar-brand{
		line-height:55px;
		margin-left:10px;
	}
	.text-lg,
	.text-lg *,
	.text-lg .btn{
		font-size:16px;
	}
	.login .logo{
		height:auto;
		width:80%;
	}
	.login .col-login{
		width:100%;
	}
	header .navbar-collapse.navbar-header-nav{
		background-color:#f9f9f9;
	}
	header .navbar-collapse.navbar-header-nav ul{
		margin-top:0 !important;
		margin-bottom:0 !important;
	}
	header .navbar-collapse.navbar-header-nav a{
		line-height:1.3;
		padding:16px;
		color:#227FC4 !important;
	}
	header .navbar-collapse.navbar-header-nav a:hover{
		background-color:#eee;
	}
	.logo-common img{
		width:55%;
	}
	.step1.text-lg,
	.step1.text-lg *,
	.step2.text-lg,
	.step2.text-lg *{
		font-size:15px !important;
	}
	.div-word-drops{
		padding-top:2px !important;
	}
	.step2 .div-word-drops{
		min-width:7em;
	}
	.sp-words-left,
	.sp-words-center,
	.sp-words-right{
		width:33.33333%;
		float:left;
	}
	.sp-words-left *,
	.sp-words-center *,
	.sp-words-right *{
		font-size:14px !important;
	}
	.area-grade{
		clear: both;
		margin-top:10px;
	}
	.area-grade *{
		font-size:14px !important;
	}
	.li-bg-on .li-word{
		margin-right:0;
		padding-left:5px;
		padding-right:5px;
		box-sizing:border-box;
		margin-bottom: 0 !important;
		border-bottom: 1px solid #b2daff;
	}
	.div-word-drops{
		padding-left:4px;
	}
	.fixed-section{
		margin:0 -15px 10px -15px;
		padding:15px;
		background-color:#ebf6ff;
	}
	.div-fixed-form-buttons{
		margin-top:20px;
		margin-bottom:20px;
	}
	.div-fixed-form-buttons .btn{
		padding:10px 0;
		width:100%;
		margin-bottom:5px;
	}
}