/*
 * 全ページ共通CSS
 * 
 * 最終更新日：20150922
 * 更新者　　：inui
 * 更新点　　：未選択ボタン修正
 * 
 */
/* Google Web Font : Noto Sans */
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
.NotoSans {
    font-family: 'Noto Sans Japanese', serif;
}


/*
 *  ヘッダー
 */
header {
    padding-top: 30px;
}
#header-top {
    padding: 0 10px;
    background: #555;
    width: 100%;
    font-size: 90%;
}
#header-main {
    padding:20px 0;
}
@media screen and (max-width:767px){   
    #header-main {
        padding: 10px 0 0;
    }
}

/* bootstrapのナビゲーションバー */
.navbar { min-height: 10px; }
.navbar-inverse { background:#555; }
.navbar-brand { padding:5px; height:30px; font-size:17px;}
.navbar-nav > li > a { padding-top:5px; padding-bottom:5px;}
.navbar-toggle { margin-top:3px; margin-bottom:3px; padding:5px 6px;}
/*.nav .right-in-gnav { position:relative; }*/
@media screen and (min-width:768px){ .nav .right-in-gnav { position:absolute; right:0; }}

/* ナビゲーションバーのXSサイズ時のオリジナルデザイン化 */
@media screen and (max-width:767px) {
    .navbar-inverse {background: #1e50a2;}
    .navbar-inverse .navbar-toggle {border-color: #ccc;}
    .navbar-inverse .navbar-brand {color: #f5f5f5;}
    .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {border-color: #aaa;}
    .navbar-inverse .navbar-nav > li > a {color: #ccc;}
    .navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {background-color: #0d264e;}    
}

/* サイトロゴ */
.site-title-box {
    color: #333;/*#1e50a2*/;
    display:inline-block;
    margin-left: 3px;
}
.site-title-img, .site-title-text {
    float:left;
    height:70px;
    box-sizing: border-box;
}
@media screen and (max-width:767px){ .site-title-img, .site-title-text {height:50px;} }
.site-title-img {
    margin-right:10px;
    padding-top: 10px;
}
.site-title-img img {
    width:100px;
}
@media screen and (max-width:767px){   
    .site-title-img img {
        width: 60px;
    }
}
.site-title {
    margin:0;
    font-size:48px;
    font-weight: 700;
}
@media screen and (max-width:767px){    
    .site-title {
        font-size: 30px;
    }
}
.sm-site-title-exam {
    margin: 0;
    font-size: 15px;
}

/*
 * Web解答トップページ
 */
img.img530_139 {
    width: 539px;
    max-height: 139px;
}

/*
 * ログイン画面
 */
.tab a{
    background: #9c9c9c;
    color: #5c5c5c;
    font-size: 120%;
    outline: none !important;
}
.tab.active a{
    background: transparent;
    font-size: 120%;
}

/* ログインフォームのパネル内 */
.panel-heading .show-date {
    margin: 0px -14px;
    font-size: 11px;
}

/*
 * パスワードの再発行
 */
.reminder-div {
    width: 95%;
    margin: 10px auto;
}

/*
 * サービス内メニューナビゲーション
 */
.course-menu{
    color:#f5f5f5;
    /*font-size: 120%;*/
    padding-top:3px;
}
.course-menu ul {
    margin-bottom:0;
}
.horizontal-list li{
    display:inline-block;
    /*padding:10px;*/
    padding: 8px 5px 10px 5px;
    color: #e5e5e5;
}
.horizontal-list li a {
    color: #e5e5e5;
    text-decoration: underline;
}
.horizontal-list li a:hover {
    color: #fff;
}

/* .horizontal-list li:hover { background: #74a2ee; }
.horizontal-list li a{ color: #ccc; }
 .horizontal-list li:hover a { color: #fff; }
.horizontal-list li#selected { background: #fff; }
.horizontal-list li#selected a { color: #1e50a2; }*/

.course-menu .breadcrumb {
    background: transparent none repeat scroll 0% 0%;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    font-weight: 200;
    font-size: 17px;
}
.breadcrumb li.active {
    color: #fff;
    font-weight: 500;
}



/*
 * メインコンテンツ部分
 */
.main-container{
    background: #fff;
    padding-top:10px;
    padding-bottom:100px;
    min-height: 640px;
}

/* こんにちは */
.hello {
    font-style: italic;
    color: #1e50a2;
    font-weight: bold;
    text-align: right;
    margin-bottom: -1.5em;
    box-sizing: border-box;
}
@media screen and (max-width:767px){
    .hello {
        text-align: left;
        margin-bottom: 5px;
    }  
}

/* ページタイトル */
.page-title-box {
    padding: 3px 0px 0px 8px;
    border-left: 5px solid #555;
    margin-bottom:15px;
}
.sm-page-title-exam{
    font-size:13px;
    margin:0 0 5px 0;
}
.page-title{
    margin:0;
    font-size: 32px;
    letter-spacing: 2px;
    font-weight: bold;
}
.page-title-solo{
    margin:0;
    font-size: 25px;/*34px;*/
    letter-spacing: -1px;
}

.info-box {
    margin: 0px;/* 0px 10px 10px;*/
    /*text-decoration: underline; */
    background: #fff;/*rgb(244, 248, 255) none repeat scroll 0% 0%;*/
    display: block;
    text-align: left;
    border-radius: 3px;
    /*border: 1px solid;*/
    padding-left: 1em;
}
li.info-box::before {
    content: "\0025B6";
    color: #1e50a2;
    margin-left: -1em;
}

.info-box-title {
    margin: 0px;
    padding: 5px;
    color: rgb(65, 138, 248);
    font-size: 16px;
    text-decoration: underline;
    display: inline;
}

.info-box pre.info-box-contents {
    background: transparent;
    border: none;
    border-top: 1px dashed #555;
    border-radius: 0px;
    padding-left: 20px;
    font-family: initial;
}
.info-box-close {
    border: 1px solid #aaa;
    display: inline-block;
    padding: 5px 10px;
    border-radius: 100px;
    color: #333;
    background: #ddd;
}

/*
 * ユーザ登録
 */
label.checked {
    font-weight: bold;
    color: blue;
}

/*
 * 集計データ管理
 */
.table-histgram {
    table-layout: fixed;
    display: table;
    font-size: 12px;
    width: 100%;
}
.table-histgram thead {
    border: none;
}
.table-histgram td,
.table-histgram th {
    margin: 0;
    padding-top: 2px;
    padding-bottom: 2px;
}
.table-histgram .divide-col {
    border-bottom: 1px dotted #aaa;
    text-align: right;
    border-right: solid 1px #ccc;
}
.divide-col {
    width: 4em;
    padding: 2px;
}
.divide-col.wide { width: 6em;}

.bar-col {
    width: 100%;
    padding-left: 3px;
}
.graph-bar {
    display: block;
    background: #FFC107 !important;/*#f8bbd0 !important;*/
    /*height: 17px;*/
    height: 24px;

    /*transition: 0.3s;*/
}
/* 実装済みだが表示OFF
.myPos .divide-col,
.myPos .graph-bar{
    background: #1191EF !important;
    color: #fff;
}*/

/*
 * 成績画面のタブ
 */
.my-tabs {
    margin-bottom: 20px;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
}
.valid-tab {
    width : 100%;
}
.valid-tab a {
    font-size : 100%;
    background : inherit;
    color : #999;
}
.my-tabs div {
    text-align: center;
    padding: 10px;
    border: 1px solid #ccc;
    border-bottom: 1px solid #1e50a2;
    box-sizing: border-box;
    border-radius: 3px 3px 0 0;
}
.my-tabs div.dummy-tab {
    border-width: 1px 0 1px 0;
    border-top: 1px solid #fff;
    width : 1px;
}
.my-tabs div .my-tab {
    display: block;
    width: 100%;
    height: 100%;
}
.my-tabs div.active {
    color: #1e50a2;
    border: 1px solid #1e50a2;
    border-bottom: none;
    font-weight: bold;
    /*border-bottom: 2px solid #1e50a2;*/
}
.my-tabs div.link {
    background: #eee;
}

.ashi-table,
.ashi-table th{
    text-align: center;
}
.ashi-table td .btn-link {
    padding: 0;
    text-decoration: underline;
    border: none;
    vertical-align: initial;
}
.ashi-table {
    /*table-layout: fixed;*/
    white-space: nowrap;
}
.ashi-table thead tr th {
    /*width: 5em;*/
}
.ashi-table thead tr th.dummy-td,
.ashi-table tbody tr td.dummy-td {
    overflow: hidden !important;
    width: 0px !important;
    padding-right: 0;
    padding-left: 0;
}

.ashi-chart-title {
    font-size: 18px;
    padding: 10px 0;
    margin: 20px 0;
    border-bottom: solid 1px #333;
}

.btn.stealth {
    text-decoration: none;
    color: transparent;
}
.btn.stealth:hover {cursor: auto;}

.writing-table {
    text-align: left;
}
.myWriting {
    word-break: break-all;
    white-space: normal !important;
}

.chart-container {
    max-width: 720px;
    margin: 0 auto;
}

/* アコーディオンライクな説明ボックス */
.btn-accordion {
    border-radius: 5px;
}
.btn-accordion.accordion-opening {
    border-radius: 10px 10px 0 0;
    border-width: 1px 1px 0 1px;
}
.btn-accordion.accordion-closed {

}
.accordion-box {
    border: 1px solid #ccc;
    padding: 15px;
}
.accordion-box p {
    margin-left: -5px;
    font-weight: bold;
}

/*
 * クロスメニューバー
 */
.xbar-wrapper {
    height: 90px;
    position: relative;
}
.xbar-wrapper .navi {
    height: 100%;
    width: 100%;
    padding: 0px;
}

.xbar-container {
    position: relative;
    /*width: 100%;*/
    height: 100%;
    overflow-x: hidden;
    margin: 0 25px;
}
.xbar-inbox {
    position: absolute;
    top: 0;
    left: 15px;
    width:150px;
    box-sizing: border-box;
    transition: 0.2s;
}
.scroll-nav-btn {
    padding: 5px;
    width: 25px;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
}
.nav-btn-left { left: 0; }
.nav-btn-right { right: 0;}

.card-panel {
    text-align: center;
    display: block;
    line-height: 45px;
    padding: 10px;
    border: solid 1px #ccc;
    height: 70px;
    margin: 10px 0;
    font-size: 18px;
    box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.3);
}
.card-panel.active {
    border-color: #1e50a2;
    color: #1e50a2;
    box-shadow: 1px 2px 5px rgba(30,80,162,0.5);
}

.xbar-child-list {
    margin: 0 35px 10px;
}
.xbar-child-list a.list-group-item {
    border-radius: 0px;
    border-color: #1e50a2;
    color: #1e50a2;
}
.xbar-child-list a.list-group-item.active{
    color: #fff;
}


@media screen and (max-width:767px){
    .text-left-xs {
        text-align: left;  
    }
}

.score-type-nav-list {
    font-size: 1.2em;
}
.score-type-nav-list li {
    padding: 0;
    border-radius: 0px !important;
    border-color: #1e50a2;
    color: #1e50a2;
    border : none;
    margin-bottom: 0;
}
.score-type-nav-list li button.accordion {
    width: 50px;
    min-height: 50px;
    box-sizing: border-box;
    padding: 0;
    background: transparent;    
}
.score-type-nav-list li button.score-type {
    height: 50px;
    padding: 10px 15px;
    width: calc(100% - 50px);
    box-shadow: none;
    background: transparent;
    border: none;
    text-align: left;
}
.score-type-nav-list li .active button.score-type {
    font-weight: bold;
}
.score-type-nav-list li button:hover {
    background : #e8ecf4;
}
.score-type-nav-list li ul {
    padding-left: 30px;
}
.score-type-nav-list li ul li {
    margin-left: 0 !important;
    border-color: #333;
    /*color: #333;*/
    border-right: none;
}
.score-board {
    font-size: 20px;
}
.score-board .child {
    font-size: 14px;
}
.histgram-container {
    min-height: 360px;
}
.ashi-page-selector {
    display: flex;
    justify-content : space-between;
    margin: 6px 0;
}
/*
.ashi-table-wrapper {
    max-height: 600px;
}
*/
@media screen and (max-width:767px){
    .ashi-table-wrapper {
        max-height: 420px;
        overflow-y: scroll;
    }
}


@media screen and (max-width:767px){
    .btn-liquid {
        padding: 1px 5px;
        font-size: 12px;
        line-height: 1.5;
        border-radius: 3px;
    }
}
@media screen and (min-width:768px) {
    .btn-liquid {
        padding: 5px 10px;
        font-size: 12px;
        line-height: 1.5;
        border-radius: 3px;
    }
}
@media screen and (min-width:1120px){
    .btn-liquid {
        padding: 10px 16px;
        font-size: 18px;
        line-height: 1.3333333;
        border-radius: 6px;
    }
}
.loading-area {
    position: relative;/*fixed;*/
    bottom: 12px;
    right: 0;
    width: 100%;
    height: 62px;
    z-index: 10;
    text-align: right;
    margin-bottom: -62px;
}
.loading-icon {
    display: inline-block;
    padding: 6px 18px;
    font-size: 18px;
    background: #fff;
    border: solid 1px #eee;
    border-radius: 5px;
    box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
.panel-ttmlight {
    border-color : #e8ecf4;
}
.panel-ttmlight > .panel-heading {
    color: #1e50a2;
    background-color : #e8ecf4;
    border-color : #e8ecf4;
}
.sumedNum-text {
    color: #555;
}
.sumedNum-text .sumedNum {
    font-size: 24px;
    font-weight: bold;
    color: #1e50a2;/*#F95656;*/
    font-style: italic;
}
.mgn-b12 {
    margin-bottom: 12px;
}
.mgn-t12 {
    margin-top: 12px;
}
.wmax {
    width: 100%;
}

/*
 * 成績切り替え(短答→憲→民→･･･などの表示)
 */
#score_type-title-box {
    display: block;
    margin-right: auto;
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -149px;
    margin-top: -25px;
    background: rgb(255, 255, 255) none repeat scroll 0% 0%;
    padding: 5px;
}

#score_type-title {
    width: 10em;
    display: inline-block;
}
#data-by-score_type {
    padding: 30px 2px 2px;
    border: 1px solid rgb(170, 170, 170);
    border-radius: 5px;
    position: relative;
    margin-top:40px;
}
@media screen and (max-width:767px){    
    #data-by-score_type {
        border-width: 1px 0;
        border-radius: 0;
        padding: 30px 0 0 0;
    }
}

/*
 * グラフ
 */
#graph-wrapper {
    margin: 10px auto;
}
#graph {
    width: 300px;/* 300 */
    height: 250px;/* 250 */
    margin: 0 auto;
    font-size: 16px;
}
.tickLabel,.flotr-grid-label {
    /*font-size:20px !important;*/
}

/*
 * 成績ページのサイドバー
 */
.score-sidebar .list-group {
    margin-top:30px;
}
.score-sidebar .list-group-item {
    width: 100%;
    border-radius: 0 !important;
}

/*
 * 肢別解答率
 */
.piechart {
    height: 350px;
}
.pointer:hover {
    cursor: pointer;

}

/*
 * WS Product
 */
.ws-product {
    /*padding: 20px;*/
}
.ws-product .description {
    font-size: 16px;
    font-weight: bold;
}
.ws-product .itemBox {
    padding: 10px;
    border: solid 1px #aaa;
    border-radius: 5px;
    color: #555;
}
.ws-product .itemBox:hover {
    background: #f9fdff;
}
.ws-product .itemBox h4 {
    color: rgb(65, 138, 248);
}
@media screen and (max-width:640px){
    .ws-product .itemBox h4 { font-size:16px;}
}
.ws-product .itemBox img {
    max-width: 100px;
    width: 100%;
}
.ws-product .price {
    border: solid 1px #999;
    padding: 5px;
    border-radius: 2px;
    background: #f5f5f5;
    color: #fb6565;
    font-weight: bold;
    text-align: center;
}


/*
 * フッター
 */
/* snsエリア */
.sns-area {
    /*background: rgb(85, 85, 85) none repeat scroll 0% 0%;*/
    padding: 5px;
}
.fb-area {
    display: inline-block;
    vertical-align: middle;
    overflow:hidden;
}
.twitter-share-button {
    vertical-align: middle;
}
.btn-fb {
    background: #2b529b;
    color: #eee;
    border-color: #666;
}
.btn-fb:hover {
    background: #3c63ac;
    color: #fff;
}
footer .copyright {
    padding: 15px;
}
footer .copyright{
    text-align: center;
    margin:0;
    font-size:90%;
}

/*
 * 暫定トップページ
 */
.btn-simple {
    border: 1px solid;
    border-radius: 3px;
}

.btn-mainMenu {
    font-size:30px;
    font-weight:100;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
}
.btn-mainMenu:hover {
    background: #337ab7;
    color: #fff;
}
@media screen and (max-width:767px){    
    .btn-mainMenu{
        font-size: 30px;
    }
}

.btn-mainMenu span {
    margin-right: 5px;
}

/* <div class="row"> の中の col-クラスに設定するpadding */
.pad10-inRow {
    box-sizing: border-box;
    padding: 10px;
}

/*漢字1文字をアイコンぽく利用 NoToSansとセットで利用を想定 */
.myIcon-1moji {
    display: inline-block;
    font-size: 25px;
    font-weight: 700;
    color: #FFF;
    background: #337AB7 none repeat scroll 0% 0%;
    width: 35px;
    height: 35px;
    text-align: center;
    border-radius: 50%;
    line-height: 1.4;
}

/* 反転アニメーション */
.turnOver {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .2s;
    transition: all .2s;
}


/*
 * 汎用的に使うもの
 */
/* 背景色 */
.bgc-main {
    background:#1e50a2;
    color:#fff;
}
.bgc-pdf {
    background: #D12c2c;
    color: #f5f5f5;
}
.bgc-primary {
    background: #55D0D8;
    color: #f5f5f5;
}
.bgc-danger {
    background: #D84D4D;
    color: #f5f5f5;
}
.bgc-back {
    background: #999;
    color: #fff;
}
.bgc-shiho{
    background:#84a8e3;
    color:#fff;
}
.bgc-yobi{
    background:#6ecf9c;
    color:#fff;
}
.bgc-shihoshoshi{
    background:#a2cf76;
    color:#fff;
}
.bgc-gyoseishoshi{
    background:#e3ba84;
    color:#fff;
}
.bgc-disable{
    background: #999;
    color:#000;
}

/* 枠線色 */
.border-main {
    border:1px solid #1e50a2;
    color: #1e50a2;
}

/* 文字色 */
.fcolor-main {
    color: #1e50a2;
}
.white { color:#eee; }
.white:hover, .white:active{ color:#fff; }

/* フォント */
.mincho{
    font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "メイリオ", Meiryo, serif;
}

/* 質感 */
.material {
    box-shadow: 1px 2px 1px rgba(0,0,0,0.15);
}
.material#header {
    box-shadow: 0px 2px 3px rgba(0,0,0,0.3);
}
.disabled {
    box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.3) inset;
    color: #DBDBDB !important;
}

/* クリック要素 */
label{
    cursor: pointer;
}
.clickableOLD:hover {
    cursor: pointer;
    opacity: 0.7;
}
.clickable:hover{
    opacity: 1.0;
    cursor: pointer;
    border-color:rgba(0,0,0,0.5);
}
.no-deco,
.no-deco:hover,
.no-deco:focus{
    text-decoration:none !important;
}
.no-liststyle {
    list-style: none;
    padding: 0;
}

/* 配置 */
.maxw640 {
    max-width: 640px;
}

/* ボタン */
.button{
    display: block;
    text-align:center;
    outline:none;
    color:#F5F5F5;
    border-style:none;
    font-size: 200%;
    border-radius: 3px;
    padding:10px;
    text-shadow: -1px -1px 0px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}
.button::before,
.button::after {
    position: absolute;
    z-index: -1;
    display: block;
    content: '';
}

.button,
.button::before,
.button::after{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}




.turnOverD,
.turnOverB,
.turnOverG{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.to-primary {border:solid 2px #55D0D8;}
.to-primary:hover {
    background:#FFFFFF;
    color:#55D0D8;
}
.to-danger {border:solid 2px #D84D4D;}
.to-danger:hover {
    background:#FFFFFF;
    color:#D84D4D;
}
.turnOverD {
    border-color:#1e50a2;
    border-style:solid;
    border-width:2px;
}
.turnOverD:hover {
    background:#FFFFFF;
    color:#1e50a2;
    border-color:#1e50a2;
}
.turnOverB {
    border-color:#999;
    border-style:solid;
    border-width:2px;
}
.turnOverB:hover {
    background:#fff;
    color:#999;
    border-color:#999;
}
.turnOverPDF {
    border-color:#D12c2c;
    border-style:solid;
    border-width:2px;
}
.turnOverPDF:hover {
    background:#FFFFFF;
    color:#D12c2c;
    border-color:#D12c2c;
}
.turnOverG {
    border-color:#e3ba84;
    border-style:solid;
    border-width:2px;
}
.turnOverG:hover {
    background:#FFFFFF;
    color:#e3ba84;
    border-color:#e3ba84;
}

.turnOverLine {
    position: relative;
    padding: 5px 15px;
}
.turnOverLine:hover {
    color: #56B1FF;
}

/* 線(ボーダー)のスタイル 共通 */
.turnOverLine::before{
    content: '';
    position: absolute;
    background: #000; /*線の色*/
    transition: width 0.3s linear;
    width: 0px;
    height: 0px;
    bottom: 0;
    left: 0;
}

/* ホバー時のアニメーション指定 */
.turnOverLine:hover:before {
    width: 100%;
    height:1px;
}
.turnOverLine:focus { outline:none; }

.TOLcG::before{
    background:#e3ba84;
}

.custom-liststyle{
    list-style: none;
}
.custom-liststyle li::before{
    content: "\25BA";
    font-size: 200%;
    margin: 0px 5px;
}
.custom-liststyle li:hover::before { color:#56b1ff; }

.btn-list li,
.text-list li{
    margin: 40px 0;
}

.inline-strong {
    font-weight: bold;
    margin: 0 5px;
    font-size: 150%;
}

/* 中央に大きめのボタン */
.lg-center-btn{
    margin: 20px auto;
    width: 90%;
    max-width: 350px;
    padding: 10px;
}

.sm-btn {
    font-size:100%;
    line-height: 1.5;
}



/* センター寄せ2つボタン */
.two-btn-wrapper{
    margin: 20px;
    text-align: center;
}
.md-two-btn {
    display: inline-block;
    margin: 0 7%;
    width: 35%;
}

.yesno-btn-wrapper div {
    margin-top: 20px;
}


@media screen and (min-width:992px){
    .yesno-btn-wrapper a {
        padding-top:40px;
        padding-bottom:40px;
    }    
}

.menu-link {
    font-size: 200%;
    font-weight: bold;
}

/*.container {
    width: 100%;
}*/

.announce {
    text-align: center;
    padding: 20px;
}
.announce h4 {
    font-size: 200%;
}
.announce h5 {
    font-size: 180%;
}

/*
 * bodyや全体
 */
body {
    width: 100%;
    margin: 0;
    padding: 0;
    color:#333;
    line-height: 1.5;
    text-align:left;
    font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Helvetica, Arial, Verdana, sans-serif;

    background:#eee;
}
.innerBox {
    /*width:950px;*/
    width: 90%;
    margin:0px auto;
}

#container{
    padding:20px;
    background:#fff;
    min-height: 600px;
}

/* 規定マージンの打ち消し */
.margin-LR-del,
.form-horizontal .form-group.margin-LR-del {
    margin-right: 0;
    margin-left: 0;
}
.padding-LR-del {
    padding-right: 0;
    padding-left: 0;
}
.container4input {
    padding-right: 3px;
    padding-left: 3px;
}

.inline-block-box * {
    display: inline-block;
}
@media screen and (min-width:767px){
    .col-sm-block-box {display:block;}
}


form[name="login"] {
    width: 70%;
    box-sizing: border-box;
    border: solid 3px #1e50a2;
    border-radius: 10px;
    font-size:120%;
    margin:0 auto;
    padding-top:30px;
    margin-top:20px;
}

form[name="login"] h3{
    margin: 0 0 40px;
    text-align: center;
    padding: 10px;
    display: block;
    border-width:0 0 3px 0;
    font-weight:bold;
}
form[name="login"] .row {
    padding: 0 10px;
    width: 80%;
    margin: 20px auto;
}

form[name="login"] input {
    width:100%;
    padding:5px;
}

.toRegister {
    margin: 20px auto;
    max-width: 640px;
    width: 100%;
}

.error_msg {
    text-align: center;
    color: red;
    padding: 0px 20px;
}

.nextStepButton {
    margin: 20px 0;
    font-size:120%;
}

.register-notice {
    margin: 20px auto;
    max-width: 840px;
    color: #DE0703;
}

/* チェックボックスの色 */
tw-checkbox .active {
    color: blue;
}

.myinfo{
    display: inline-block;
}
.logout-form {
    display: inline-block;
    float:right;
}
.input-title {
    font-size: 29px;
    padding: 0 0 0 10px;
}

.notice {
    max-width: 640px;
    width: 90%;
    padding: 20px;
}
.kaito-info {
    padding: 5px 15px;
    box-shadow: none;
    border-width: 5px;
    border-radius: 0px;
    background: #F8DEB7;
    border-color: #E9B15E;
}


.examButton{
    font-size: 200%;
    text-align: center;
    width: 80%;
    margin: 20px auto;
    padding: 20px 0;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
}
.examTitle{
    padding: 5px;
    display: block;
    margin: 0px auto;
    text-align: center;
    line-height: 1.5;
    margin-bottom:20px;
}
.saigenMenu{
    padding:0 20px;
    margin:10px 0;
}
.saigenMenu a{
    display: block;
    text-align: center;
    height: 200px;
    border: 1px solid #999;
    border-radius: 10px;
    font-size: 300%;
    line-height: 198px;
}

/*
 * マークシート風入力フォーム
 */
.question{
    display: table-row;
    table-layout: fixed;
    width: 100%;
}

.q_num {
    display:table-cell;
    min-width: 50px;
    box-sizing: border-box;
    padding: 0 5px;
    vertical-align: middle;
}
.q_answer {
    display: table-cell;
    box-sizing:border-box;
    width:100%;
    vertical-align: middle;
    border-left-width: 0;
}

.odd .q_num{
    background: #1e50a2;
    color: #fff;
    border-right: solid 3px rgba(0,0,0,0.3);
}

.even .q_num {
    background: #f5f5f5;
    color: #333;
    border-right: solid 3px rgba(0,0,0,0.3);
}
.odd .q_answer{
    background: #f1f6ff;
}

.currentSelection {
    font-weight: bold;
    font-size: 1.3em;
    font-style: italic;
}

.confirm-title {
    font-size: 1.1em;
}

/*
 * select radioのモダンデザイン
 */
.disabledQ {
    opacity: 0.3;
}
.disabledQ .clickable:hover {
    cursor: default;
}

input + label.no-mark {
    background: #999;
    border: solid 1px #555;
    color: #eee;
    width: 42px;
    text-align: center;
    font-weight: normal;
}
input:checked + label.no-mark {
    background: #f0363d;
    color: #eee;
}

.mark-container .dummy_input + label,
.mark-container .mark-button {
    border-width: 1px;
    min-width: 42px;
    width: 12.3%;
    display: inline-block;
    border-radius: 10px;
    font-weight: normal;
}
.mark-container .dummy_input:checked + label,
.mark-container .mark-button:hover{
    background:#6ecf9c;
    border-color:#6ecf9c;
    border-width:1px;
}
.mark-container .input-5 .dummy_input + label,
.mark-container.input-5 .dummy_input + label,
.mark-container.input-5 .mark-button {
    width: 19.8%;
}
.mark-container .input-4 .dummy_input + label,
.mark-container.input-4 .dummy_input + label,
.mark-container.input-4 .mark-button {
    width: 24.9%;
}

.mark-container.input-20 .mark-button { width: 9.8%;}
@media screen and (max-width:767px){
    .mark-container.input-20 .mark-button { width: 19.8%; }
}
.mark-container .mark-button { margin-top: 10px;}
.full-choiced .mark-button {
    opacity: 0.3;
}
.mark-button.no-choice {
    width: 100%;
    border-width: 1px;
    border-radius: 3px;
    font-size: 18px;
    height: 28px;
    line-height: 28px;
    max-width: 120px;
}

hr.divider4input {
    margin: 10px 0;
    border-color: #999;
}
.q {
    padding: 10px 0;
    border-top: solid 1px #aaa;
}
.even.q {
    background: #f1f6ff;
}


.dummy_input { display:none; }
.dummy_input + label,
.mark-button {
    display:block;
    float:left;
    height:50px;
    background:#ddd;
    border: solid 3px #a2a2a2;
    border-radius: 20px;
    text-align: center;
    font-size: 20px;
    line-height: 50px;
    box-sizing: border-box;
}


/* 選択肢が５ */
.choices5 label {
    width:20%;
}

/* 選択肢が20 */
.choices20 label {
    width:10%;
}

label.no-answer{
    width: 100%;
    border-radius: 5px;
    height:40px;
    line-height:38px;
    border:1px solid #b7b7b7;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
    color: #FFFFFF;
    background-color: #d3d3d3;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#d3d3d3), to(#707070));
    background-image: -webkit-linear-gradient(top, #d3d3d3, #707070);
    background-image: -moz-linear-gradient(top, #d3d3d3, #707070);
    background-image: -ms-linear-gradient(top, #d3d3d3, #707070);
    background-image: -o-linear-gradient(top, #d3d3d3, #707070);
    background-image: linear-gradient(to bottom, #d3d3d3, #707070);
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#d3d3d3, endColorstr=#707070);
}

.dummy_input:checked + label {
    background:#6ecf9c;
    border: solid 3px #6ecf9c;
}

.dummy_input:checked + label.no-answer {
    border:1px solid #df0909;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
    color: #FFFFFF;
    background-color: #f62b2b; background-image: -webkit-gradient(linear, left top, left bottom, from(#f62b2b), to(#d20202));
    background-image: -webkit-linear-gradient(top, #f62b2b, #d20202);
    background-image: -moz-linear-gradient(top, #f62b2b, #d20202);
    background-image: -ms-linear-gradient(top, #f62b2b, #d20202);
    background-image: -o-linear-gradient(top, #f62b2b, #d20202);
    background-image: linear-gradient(to bottom, #f62b2b, #d20202);
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#f62b2b, endColorstr=#d20202);
}

.choices20 .dummy_input + label {
    border-width: 1px;
    border-radius: 5px;
    font-size: 11px;
    margin: 1%;
    width: 8%;
}

/* 多肢選択式 */
.choice-box {
    border: solid 1px #aaa;
    font-size: 14px;
    border-right: none;
    font-weight: bold;
}
.choice-box p {
    padding: 5px 5px 0;
    border-bottom: 1px solid #ccc;
    background: #f8deb7;
}
.choice-box:last-child {
    border-right: solid 1px #aaa;
}


.btn.choice-back-btn {
    margin: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
}

/* 記述式 */
.writing-box {
    width: 100%;
    height: 20em;
}
.writing-box.writing-box-gyo {
    height: 5em;
}
.writing-q-title {
    font-weight: bold;
    font-size: 18px;
}

/* 記述式 */
.kijutsu {
    width: 95%;
    height: 7em;
    font-size: 120%;
    margin: 10px;
    line-height: 1.5;
}

.kijutsu-len {
    text-align: right;
    margin-right: 20px;
}

.limit-over {
    color: red;
}

/*
 * confirm table
 */
.confirm-table {
    table-layout: fixed;
    margin: 10px 0;
    border: solid 1px #999;
    border-width: 1px 0 0 1px;
    box-sizing: border-box;
}
.confirm-table tr {
    border: solid 1px #999;
    border-width: 0 1px 1px 0;
}
.confirm-table th {
    background:#ecf3ff;
    width: 50%;
    border: dotted 1px #999;
    border-width: 0 1px 0 0;
}

.confirm-table th,
.confirm-table td {
    color: #555;
    text-align: center;
}

.wb-all {
    word-break: break-all;
}

.h-ron td{
    text-align: left;
    padding: 3px;
    word-break: break-all;
}

.noAns {
    background: #ffec47;
}

.no-ans-confirm {
    background:#ffecb3 !important;
    /*background: #ffec47 !important;*/
}
.finish-show-score-box {
    margin: 20px 0;
    border: 1px solid #aaa;
    border-width: 1px 0;
    padding: 5px 0;
}
.finish-show-score {
    display: inline-block;
    margin: 3px 0;
    border-right: 1px solid #ccc;
    padding: 5px 10px;
}
.finish-show-score:last-child {
    border-right:none;
}

/* 成績表 */
.answerer-info {
    text-align: center;
    background: rgb(153, 153, 153) none repeat scroll 0% 0%;
    color: rgb(255, 255, 255);
    padding: 5px;
    max-width: 480px;
    margin: 10px auto;
}
.answerer-info p {
    margin: 0;
}

.score-abst-table {
    width: 100%;
    max-width: 640px;
    margin: 10px auto;
    text-align: center;
    border: solid 1px #999;
    border-width: 1px 0 0 1px;
}
.score-detail-table {
    width: 100%;
    max-width: 640px;
    margin: 10px auto;
    text-align: center;
    border: solid 1px #999;
    border-width: 1px 0 0 1px;
}
.score-abst-table tr, .score-detail-table tr {
    border: 1px solid #999;
    border: solid 1px #999;
    border-width: 0 0 1px 0;
}
.score-abst-table th, .score-detail-table th {
    text-align: center;
    padding: 3px;
    background: #ecf3ff;
}
.score-abst-table th,
.score-abst-table td,
.score-detail-table th,
.score-detail-table td{
    border: 1px solid #999;
    border: solid 1px #999;
    border-width: 0 1px 0 0;
}

.score-graph-table {
    width: 100%;
    margin: 10px auto;
    text-align: center;
    border: solid 1px #999;
    border-width: 0 0 0 1px;
    table-layout: fixed;
    /*max-width: 960px;*/
}
.score-graph-table tr {
    border: 1px solid #999;
    border: solid 1px #999;
    border-width: 0 0 0 0;
}
.score-graph-table th {
    text-align: center;
    padding: 2px;
    background: #ecf3ff;
}
.score_d,.score_d_num {
    width: 20%;
    border: 1px solid #999;
    border: solid 1px #999;
    border-width: 0 1px 1px 0;
}
thead .score_d,.score_d_num {
    border: 1px solid #999;
    border: solid 1px #999;
    border-width: 1px 1px 1px 0;

    width:4em;
}
tbody .score_d{
    font-size: 80%;
}
.score_bar {
}
.bar {
    background: #ff9a84;
    height: 15px;
    box-shadow: 1px 1px 0 rgba(0,0,0,0.15);
}
.score-graph-table .no-bgc{
    background: none;
}
.note {
    font-size: 80%;
}
.center {
    text-align: center;
}

/* pdf解説資料ページ */
.pdf-list li{
    padding: 10px;
    border-bottom: 1px solid rgb(238, 238, 238);
    box-shadow: 0px 1px 0px rgb(170, 170, 170);   
}
.filesize {
    font-size: 90%;
    color: #6ec6ea;
    margin: 10px;
}

.btn-no-link {
    padding: 6px 12px;
    font-size: 14px;
    display: inline-block;
}


.circle {
    margin: 20px auto;
}
.jqplot-data-label {
    color: #fff;
    font-size: 20px;
}
.correct {
    background: #EFFFD7;
}
.incorrect {
    background: #FEDEDE;
}
#detail-graph-wrapper {
    position: relative;
}
#dummy {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index:10;
    background: #fff;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

#detail-graph-inner {
    opacity: 1.0;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    position: relative;
}
.selectedRow {
    border: solid 2px #555 !important;
}

.init-hide {
    display: none;
}
#graph-notice {
    margin-top: 10px;
}

/*
 * ご利用案内ページ
 */
.alert.alert-danger.alert-more-danger {
    border: solid 3px #F30A0A;
    color: #f30a0a;
}

/*
 * アラート
 */
.alert.alert-ttm {
    background: #f8deb7;
    border: solid 2px #e9b15e;
    color: #555;
}

/* old ver 960px */
@media screen and (max-width:991px){
    .innerBox {
        /*width:630px;*/
        width: 90%;
    }
    input.dummy_radio + label {
        width:19%;
    }

}

@media screen and (max-width:640px){
    .innerBox {
        width:100%;
    }
    .saigenMenu a{
        font-size:200%;
        height:150px;
        line-height:148px;
    }
    form[name="login"] {
        width: 100%;
    }
    form[name="login"] .row {
        width:100%;
    }
    #input-section {
        margin-right: -5px;
        margin-left: -5px;
    }
    .button {
        font-size:100%;
    }
    .btn-list .button {
        width: 90%;
        margin: 0 auto;
    }
    .sm-btn {
        font-size: 80%;
    }
    #container {
        padding: 20px 5px;
    }
    .adlink {
        font-size: 14px;
    }
}

.dispPC {
    display: none;
}
.showSP {
    display: block;
}
.onlySP{
    display: block;
}



@media screen and (min-width:768px){
    .dispPC {
        display: block;
    }
    .onlySP {
        display: none;
    }


}
@media screen and (max-width:767px){
    #ashiTable table{
        border-top:7px double #bbb;
    }
    #ashiTable table:first-child{
        border-top:none;
    }
}

/*
 * フォーム部品
 */
.input-after-text {
    display: inline-block;
    width: 10em;
}
.input-after-text + span {
    margin-left: 3px;
}

.required::after {
    content: "*";
    color: red;
}

/*
 * AngularJS用スタイル
 */
.ng-dirty.ng-invalid {
    border-color: red !important;
}

.link-container {
    position: relative;
    overflow: hidden;
    /*border: solid 1px #aaa;
    border-radius: 1px;*/
}

.ws-product .link-container .itemBox {
    border: none;
}
ad-container .carousel-indicators {
    display: none;
}

/* 表示から非表示へ遷移開始 */
.item.ng-hide-add {
    transition: 0.5s;
    opacity: 0.3;
}
/* 表示から非表示へ遷移終了 */
.item.ng-hide-add-active {
    opacity: 0;
}

/* 非表示から表示へ遷移開始 */
.item.ng-hide-remove {
    transition: 0.5s;
    position: absolute;
    left:0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0.3;
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    -o-transform: translateX(100%);
    -ms-transform: translateX(100%);
}
/* 非表示から表示へ遷移終了 */
.item.ng-hide-remove-active {
    opacity: 1;
    -moz-transform: translateX(0);
    -webkit-transform: translateX(0);
    -o-transform: translateX(0);
    -ms-transform: translateX(0);
}

/*
 * BootStrapスタイルの上書き
 */
.btn.disabled, .btn[disabled], fieldset[disabled] {
    opacity:0.3;
}
.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
    background: #1e50a2;
    border-color: #1e50a2;
}
.list-group-item.child::before {
    content: "-";
    margin-right: 5px;
}

.form-control:focus {
    box-shadow: 1px 1px 2px rgba(50, 50, 50, 0.3) inset;
    border-color: #2196f3;
}

.btn-link {
    color: #2196f3;
    /*font-weight: bold;*/
}

.btn-huge{
    width: 100%;
    font-size: 24px;
    padding: 20px;
}
.panel.panel-card {
    border: 1px solid #333;
    border-radius: 0;
    padding: 5px;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
}
.text-danger { color: #f44336;}
a.text-lg {
    font-size: 24px;
}
.transition {
    transition: .3s;
}
.rotate90 {
    transform: rotate( 90deg );
}

/*
 * materialize ライクなスタイル
 */
.valign-wrapper {
    display: table-row;
}
.valign-wrapper .valign {
    display: table-cell;
    vertical-align: middle;
}

/*
 * 要素の配置
 */
.float-left {float: left;}
.float-right {float: right;}
.inline-block { display: inline-block;}

/*
 * 汎用クラス：width
 */
.w100 { width: 100%;}
.maxw320 { max-width: 320px; }
.maxw480 { max-width: 480px;}


/*
 * 汎用クラス：margin
 */
.m0{margin: 0;}
.m-b40 {margin-bottom:40px;}
.m-b0 {margin-bottom: 0;}
.m-b5 {margin-bottom: 5px;}
.m-b20 {margin-bottom: 20px;}
.m10 {margin: 10px;}
.m-t0 { margin-top: 0px;}
.m-t10 {margin-top: 10px;}
.m-t20 {margin-top: 20px;}
.m-t30 {margin-top: 30px;}
.m-t40 { margin-top: 40px;}
.m-r5 { margin-right: 5px;}

/*
 * 汎用クラス：padding
 */
.pad0 { padding: 0px;}
.pad-b40 {padding-bottom: 40px;}
.pad-tb40 {padding-top: 40px;padding-bottom: 40px;}
.pad-t10 { padding-top: 10px;}
.pad-b10 { padding-bottom:10px;}
.pad5 {padding: 5px;}
.pad10 {padding:10px;}
.pad-r10 { padding-right: 10px;}
.pad-r0 { padding-right: 0px;}
.pad-l0 { padding-left: 0px;}

/*
 * 汎用クラス：font-size
 */
.fs0px { font-size: 0px;}
.fs1px { font-size: 1px;}
.fs10px { font-size: 10px;}
.fs20px { font-size: 20px;}
.fs28px { font-size: 28px;}
.fs11px { font-size: 11px;}
.fs12px { font-size: 12px;}
.fs16px { font-size: 16px;}
.fs18px { font-size: 18px;}
.fs36px { font-size: 36px;}

/*
 * 汎用クラス：color
 */
.text-ttm { color: #1e50a2; }

/*
 * 印刷設定クラス
 */
body { -webkit-print-color-adjust: exact; }
@media print {

    .no-printing {
        display: none;
    }
    .container, .main-container {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .table-row-group {
        display: table-row-group;
    }

}
@page {
    size: A4;
    margin: 0;
}

.sheet {
    width: 100%;/*210mm;*/
    /*height: 296mm; /* 1mm余裕をもたせる */
    box-sizing: border-box;
    padding: 5mm;/*10px;*/
    page-break-after: always;
    font-size: 14px;
}
.sheet .ashi-bar-wrapper {
    padding-left: 0px;
    padding-right: 0px;
}
.sheet .ashi-bar {
    border-right: 0px solid #333;
    color: #333;
    margin: 0;
    width: 1px;
    overflow-x: hidden;
}
.sheet .ashiName {
    display: inline-block;
    width: 3em;
    border-right: dashed 1px #999;
    margin-right: 5px;
    font-style: italic;
}
/* プレビュー用のスタイル */
@media screen {
    .sheet {
        background: white; /* 背景を白く */
        box-shadow: 0 .5mm 2mm rgba(0,0,0,0.5); /* ドロップシャドウ */
        margin: 5mm;
    }
    .print-preview {
        background: #eee;
        padding: 10px;
    }
}

/*
 * Google Material Icon
 */
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1;
    text-transform: none;

    /* WebKitブラウザサポート */
    -webkit-font-smoothing: antialiased;
    /* Chrome、Safariサポート */
    text-rendering: optimizeLegibility;

    /* Firefoxサポート */
    -moz-osx-font-smoothing: grayscale;

    /* IEサポート */
    font-feature-settings: 'liga';
}

.material-icons.radio-uncheked { color: #999; }
.material-icons.radio-checked { color: #1e50a2; }
.material-icons.radio-disabled,
.material-icons.radio-disabled + label { color:#ccc; }
.material-icons.checkbox-unchecked,
.material-icons.checkbox-checked{
    font-size: 28px;
    vertical-align: text-bottom;
}
.material-icons.checkbox-unchecked { color: #999; }
.material-icons.checkbox-checked { color: #00cc6f;/*#1e50a2;*/ }

/* **************************************************
 * グローバルサイン　サイトシール
 */

.ssl_attention{
    background: #effffa none repeat scroll 0% 0%;
    font-family: "游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,"ＭＳ Ｐゴシック",Helvetica,Arial,Verdana,sans-serif;
    font-size: 90%;
    margin: 20px auto;
    max-width: 640px;
}

.ssl_attention::after{
    content:".";
    display:block;
    height:0;
    overflow:hidden;
    clear:both;
}
.ssl_seal{
    width: 115px;
    vertical-align: middle;
    display: block;
    float: left;
    padding: 15px;
    height: 100%;
}

.ssl_note{
    vertical-align: middle;
    display: block;
    box-sizing: border-box;
    margin-left: 145px;
    padding: 15px 15px 15px 0px;
}
/* 
 * サイトシールここまで
 ***************************************************/

/* *********************************************
 *     PROCESS FLOW 
 ***********************************************/
#process-flow {
    margin: 10px auto;
    width: 100%;
    text-align: center;
    font-family: "メイリオ";
    font-size: 100%;
}


#process-flow .pf_inner {
    width: 24%;
    box-sizing: border-box;
    display: inline-block;
    padding-right: 1.5em;
    margin: 0;
}
#process-flow span {
    background: #aaa;
    color: #333;
    box-sizing: border-box;
    width: 100%;
    padding: 0.25em 4px;
    display: block;
    position: relative;
    border-width:0;
    line-height: 1.5;
    word-break: keep-all;
    white-space: nowrap;
}

#process-flow span::before,
#process-flow span::after {
    content: "";
    position: absolute;
    top: 50%;
    box-sizing: border-box;
}

#process-flow span::after {
    margin-top: -1em;
    border-top: 1em solid transparent;
    border-bottom: 1em solid transparent;
    border-left: 1em solid;
    right: 0px;
    margin-right: -1em;
    z-index: 2;
    color: #aaa;
}

#process-flow span::before {
    margin-top: -1em;
    border-width: 1em 0 1em 1em;
    border-style: solid;
    border-color: #aaa #aaa #aaa transparent;
    left: -1em;
}

#process-flow div:first-child span::before{
    content: none;
}

#process-flow span.cr {
    background-color: #1e50a2;
    color: #fff;
}
#process-flow span.cr::before {
    border-color: #1e50a2;
    border-left-color: transparent;
}
#process-flow span.cr::after {
    color: #1e50a2;
}
#process-flow span.done {
    opacity:0.4;
}
/* *********************************************
 *     END
 ***********************************************/