﻿@charset "utf-8";

@import url('reset.css');

* {
	font-family: ArialMT, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", メイリオ, sans-serif;
}

body, section, header, article, footer {
    -webkit-text-size-adjust: none;
    -webkit-touch-callout: none;
	color: #808080;
}

article {
    min-height: 400px;
}

a, .link_item, link_btn {
    -webkit-tap-highlight-color: rgba(255,82,0,0.40);
}

a img {
    border-style: none;
}

.spn_blue {
    color: #00A0E9;
}

.spn_red {
    color: #E62799;
}

.passed_color * {
    color: #00A0E9;
}

.failed_color * {
    color: #E62799;
}

.bar_caption {
    border-left: 2px solid #4C4C4C;
    padding-left: 5px;
}

.bar_caption.spn_red {
    border-left-color: #E62799;
}

.data_empty_box {
    margin: 10px 0 30px 5px;
}

.box_middle {
    height: 100%;
    display: -moz-box;
    display: -webkit-box;
    -moz-box-align: center;
    -webkit-box-align: center;
}

.box_center {
    height: 100%;
    display: -moz-box;
    display: -webkit-box;
    -moz-box-pack: center;
    -webkit-box-pack: center;
}

.box_center_middle {
    height: 100%;
    display: -moz-box;
    display: -webkit-box;
    -moz-box-align: center;
    -webkit-box-align: center;
    -moz-box-pack: center;
    -webkit-box-pack: center;
}

.error_page {
    background-image: url(common/error_bg.png);
    background-repeat: no-repeat;
    background-position: 0 50px;
    min-height: 200px;
}

.wordbreak {
    word-break: break-all;
    word-wrap: break-word;
}

.nowrap {
    white-space: nowrap;
}

.logo_area {
    height: 32px;
    padding-left: 20px;
    border-top: #A6D5FF solid 1px;
    border-bottom: #318EFF solid 1px;
    background-image: -webkit-gradient(linear, left top, left bottom,
         from(#8BC9FF),
         color-stop(0.5, #68B8FF),
         color-stop(0.5, #4CABFF),
         to(#4CABFF)
    );
}

.logo_area.wide {
    height: 42px;
}

.spn_copyright {
    color: #fff;
    font-size: 12px;
    font-weight: normal;
    text-align: center;
}

.page_header, .page_footer {
    position: relative;
    width: 100%;
    min-height: 32px;
    padding: 5px 0;
    border-top: #D8D8D8 solid 1px;
    border-bottom: #B7B7B7 solid 1px;
    background-image: -webkit-gradient(linear, left top, left bottom,
         from(white),
         color-stop(0.03, white),
         color-stop(0.03, #F0F0F0),
         color-stop(0.5, gainsboro),
         color-stop(0.5, #CCC),
         color-stop(0.97, #CCC),
         color-stop(0.97, white),
         to(white)
    );
}

footer {
    font-size: 12px;
    background-color: #005EAD;
    border-top: ##0082CE solid 1px;
    padding: 10px 5px;
}

.page_header h1 {
    font-weight: normal;
    font-size: 14px;
}

.page_header table, .page_header td {
    vertical-align: middle;
}

a.page_back_button {
    display: block;
    width: 32px;
    height: 42px;
    background: url(common/arrow_left_white.png) center no-repeat;
}

ul.link_item_box {
    position: relative;
    word-break: break-all;
    word-wrap: break-word;
}

ul.link_item_box.empty li {
    height: 44px;
    line-height: 44px;
    padding-left: 5px;
}

ul.link_item_box .link_item > *:not(.icon) {
    margin-bottom: 5px;
}

ul.link_item_box .link_item *:last-child {
    margin-bottom: 0;
}

ul.link_item_box * {
    color: #4c4c4c;
}

ul.link_item_box h3 {
    font-size: 14px;
}

ul.link_item_box p {
    color: #808080;
    font-size: 12px;
    line-height: 12px;
}

ul.link_item_box li {
    position: relative;
    border-bottom: #B8B8B8 solid 1px;
    /* background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#E7E7E7)); */
}

a.link_item {
    display: block;
    min-height: 42px;
    padding: 10px 30px 10px 40px;
    text-decoration: none;
    background-image: url(common/arrow_right_gray.png);
    background-repeat: no-repeat;
    background-position: right;
}

a.link_item .icon {
    position: absolute;
    top: 10px;
    left: 5px;
}

a.link_item.unselectable {
    background-image: none;
    background-color: #eee;
}

a.link_item.disabled {
    background-image: none;
    background-color: #eee;
}

a.link_item.disabled * {
    color: #999;
}

tr.link_item td:last-child {
    background-image: url(common/arrow_right_gray.png);
    background-repeat: no-repeat;
    background-position: right;
    padding-right: 30px;
}

tr.link_item th:last-child {
    padding-right: 25px;
}

.link_btn {
    color: #fff;
    border: solid 1px rgba(79, 79, 79, 0.5);
    text-decoration: none;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    -webkit-border-radius: 2px;
    padding: 0px 5px;
    white-space: nowrap;
}

.link_btn img {
    vertical-align: middle;
    margin-top: -2px;
}

.link_btn.icon_only {
    padding-left: 0px;
    padding-right: 0px;
}

.link_btn.left_icon {
    padding-left: 0px;
}

.link_btn.right_icon {
    padding-right: 0px;
}

.link_btn.round {
    -webkit-border-radius: 10px;
}

.link_btn.blue {
    background-image: -webkit-gradient(linear, left top, left bottom,
         from(#8CBEE8),
         color-stop(0.5, #318CD6),
         color-stop(0.5, #0070CC),
         to(#0070CC)
     );
}

.link_btn.blue2 {
    background-image: -webkit-gradient(linear, left top, left bottom,
         from(#8BC9FF),
         color-stop(0.5, #69B9FF),
         color-stop(0.5, #4CABFF),
         to(#4CABFF)
    );
}

.link_btn.blue3 {
    background-image: -webkit-gradient(linear, left top, left bottom,
         from(#5AC2F1),
         color-stop(0.5, #2AB0ED),
         color-stop(0.5, #00A0E9),
         to(#00A0E9)
    );
}

.link_btn.blue4 {
	background-image: -webkit-gradient(linear, left top, left bottom,
		from(#5A97CA),
		color-stop(0.5, #2A79BB),
		color-stop(0.5, #005EAD),
		to(#005EAD)
    );	
}

.link_btn.orange {
     background-image: -webkit-gradient(linear, left top, left bottom,
         from(#F18971),
         color-stop(0.5, #ED6748),
         color-stop(0.5, #E94924),
         to(#E94924)
    );
}

.link_btn.page_back {
    padding-left: 0px;
    padding-right: 0px;
    background-image: -webkit-gradient(linear, left top, left bottom,
         from(#8BC9FF),
         color-stop(0.5, #69B9FF),
         color-stop(0.5, #4CABFF),
         to(#4CABFF)
    );
}

.link_btn.study_start {
    font-size: 20px;
    height: 40px;
    line-height: 40px;
    -webkit-border-radius: 5px;
    padding-left: 20px;
    background-image: -webkit-gradient(linear, left top, left bottom,
         from(#F18971),
         color-stop(0.5, #ED6748),
         color-stop(0.5, #E94924),
         to(#E94924)
    );
}

.link_btn.study_start.restart {
    background-image: -webkit-gradient(linear, left top, left bottom,
         from(#5AC2F1),
         color-stop(0.5, #2AB0ED),
         color-stop(0.5, #00A0E9),
         to(#00A0E9)
    );
}

.link_btn.study_start.disabled {
    background-image: -webkit-gradient(linear, left top, left bottom,
         from(#E8E8E8),
         color-stop(0.5, #D6D6D6),
         color-stop(0.5, #CCC),
         to(#CCC)
    );
    color: rgba(102, 102, 102, 0.8);
    padding-right: 20px;
}

.link_btn.study_start.disabled img {
    display: none;
}

.link_btn.logout {
    height: 20px;
    line-height: 20px;
    -webkit-border-radius: 10px;  
    background-image: -webkit-gradient(linear, left top, left bottom,
         from(#C6C6C6),
         color-stop(0.5, #989898),
         color-stop(0.5, gray),
         to(gray)
    );
}

.link_btn.to_home {
    height: 20px;
    line-height: 20px;
    -webkit-border-radius: 10px;  
    background-image: -webkit-gradient(linear, left top, left bottom,
         from(#8CBEE8),
         color-stop(0.5, #318CD6),
         color-stop(0.5, #0070CC),
         to(#0070CC)
     );
}

dl.data_item {
    padding: 0 5px;
}

dl.data_item dt {
    display: block;
    color: #4c4c4c;
    font-weight: bold;
    border-left: 5px solid #74beff;
    padding-left: 5px;
    margin: 5px 0;
}

dl.data_item dd {
    display: block;
    font-size: 12px;
    border-bottom: 1px solid #ccc;
    line-height: 18px;
    padding-left: 10px;
}

.spn_table {
    width: 100%;
    margin-top: 5px;
}

.spn_table tr:nth-child(odd) {
    background-color: #EBF6FF;  
}

.spn_table tr:first-child {
    background-color: #fff;
    border-bottom: 1px solid #6B6B6B;
}

.spn_table th, .spn_table td {
    line-height: 20px;
    font-size: 12px;
}

.spn_table th {
    color: #4c4c4c;
    white-space: nowrap;
}

.spn_table th > div.bar_caption {
    padding-left: 5px;
    margin-left: 5px;
    padding-right: 5px;
    margin-rignt: 5px;
    text-align: left;
    margin-bottom: 3px;
}

.spn_table th > div.bar_caption > div.spn_table_left{
    text-align: left;
}

.spn_table th > div.bar_caption > div.spn_table_right{
    text-align: right;
}

.spn_table th > div.bar_caption > div.spn_table_center{
    text-align: center;
}

.spn_table td {
    padding: 3px 5px 3px 15px;
    text-align: right;
    vertical-align: middle;
}

.spn_table td > div {
    margin: 0 auto;
    text-align: left;
}

.spn_table td > div.spn_table_left {
    text-align: left;
}

.spn_table td > div.spn_table_center {
    text-align: center;
}

.spn_table td > div.spn_table_right {
    text-align: right;
}

ul.spn_select_tab li {
    width: 50%;
    display: inline-block;
}

ul.spn_select_tab li > a {
    display: block;
    text-decoration: none;
    text-align: center;
    padding: 10px 0;
    font-size: 12px;
    color: #aaa;
    background-color: #666;
    border-top: #5C5C5C solid 1px;
    border-bottom: #E5E5E5 solid 2px;
}

ul.spn_select_tab li > a.active {
    color: #4C4C4C;
    font-weight: bold;
    background-color: #fff;
    border-top: #E5E5E5 solid 1px;
    border-bottom: #fff solid 2px;
}

.continue {
    padding-left: 5px !important;
    min-height: 0 !important;
    color: #4C4C4C;
}

.continue .loading {
    background: none;
    vertical-align: middle;
    height: 33px;
    padding-left: 38px;
}

.continue.active .loading {
    background: url(common/loading.gif) no-repeat top left;
}

#divSubjectIndexBox .chapter {
    background-image: none;
    background-color: #4c4c4c;
    display: block;
    min-height: 35px;
    background-image: -webkit-gradient(linear, left top, left bottom,
         from(#ADADAD),
         color-stop(0.5, #7F7F7F),
         color-stop(0.5, #4E4E4E),
         to(#4E4E4E)
     );
}

#divSubjectIndexBox .chapter .icon {
    position: absolute;
    top: 2px;
}

#divSubjectIndexBox .chapter h3 {
    color: #fff;
    font-weight: normal;
    margin-left: 30px;
    padding: 9px 0;
}

#divSubjectIndexBox .progress_container {
    margin-top: 5px;
    border: #555 solid 1px;
    background-image: -webkit-gradient(linear, left top, left bottom,
         from(#333),
         to(#AAA)
    );
}

#divSubjectIndexBox .progress_bar {
    height: 5px;
    background-image: -webkit-gradient(linear, left top, left bottom,
         from(#CCE6AB),
         color-stop(0.6, #A8D46E),
         color-stop(0.6, #8CC63F),
         to(#8CC63F)
    );
    background-color: #0F9;
}

#divSubjectIndexBox .study_time {
    display: inline-block;
    position: absolute;
    top: 6px;
    right: 5px;
    border: solid 1px rgba(79, 79, 79, 0.75);
    background-color: #E6E6E6;
    color: #333;
    font-size: 12px;
    height: 18px;
    line-height: 18px;
    -webkit-border-radius: 6px;
    vertical-align: middle;
    padding: 0 5px;
}

.VSummary ul
{
	margin:10px;
	padding-left:20px;
	color:#808080;
}

.prelogin_error
{
    color: Red;
    margin-top: 1em;
    margin-bottom: 1em;
}