/* 共通 css */


body {
    width:100%;
    height:100%;
    min-height:100vh;
    
    margin:0;
    padding:0;
    
    font-size:14px;
    font-family:Meiryo, helvetica, sans-serif;
}

body.parent {
    background-color:#fff;
}


body.student {
    background-color:#fff;
}


body * {
    
    font-size:100%;
    font-family:inherit;
    box-sizing:border-box!important;
    -webkit-box-sizing:border-box!important;
    -moz-box-sizing:border-box!important;
    -o-box-sizing:border-box!important;
    
    margin:0;
    padding:0;
    
    position:relative;
    
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -ms-touch-callout: none;
    /*-ms-touch-action: none;*/
    -moz-user-select: none;
    
    touch-callout: none;
    user-select: none;
    /*touch-action: none;*/
    
    box-sizing:border-box;
}

body td,
body th,
body tr,
body thead,
body tbody
{
    position:static;
}

input, textarea, .allow_select
{
    user-select: auto;
    -webkit-user-select: auto;
    -ms-user-select: auto;
    -moz-user-select: auto;
}

*, input, select, textarea, option, button {
    outline: none!important;
}



.small_text {
    font-size:90%!important;
}

.smaller_text {
    font-size:80%!important;
}

.f14px {
    font-size:14px!important;
}

.f16px {
    font-size:16px!important;
}

.f18px {
    font-size:18px!important;
}

.f20px {
    font-size:20px!important;
}

.f22px {
    font-size:22px!important;
}

.f24px {
    font-size:24px!important;
}

.pc_hide
{
    display:none!important;
}

@media(max-width:767px) {
    
    .pc_hide
    {
        display:unset!important;
    }
    
    .sp_hide
    {
        display:none!important;
    }


}

#wrapper {
    width:100%;
    min-height: 100vh;
    /*height:100%;*/
}

/* ヘッダー */
#common_header {
    width:100%;
    min-height:64px;
    border-radius:0;
    margin-bottom:0px;
    
    z-index:5;
}

#common_header .inner {
    width:1250px;
    margin:0 auto;
}

#common_header .header_title {
    display:inline-block;
    top:15px;
    left:0;
    padding-left:15px;
    text-align:left;
}

#common_header .header_logout,
#common_header .header_person {
    height:100%;
    line-height:64px;
    
    padding-right:15px;
    
    text-align:right;
    
    color:#FFFFFF;
    
}

#common_header .header_person {
    padding-right:30px;
}

    #common_header .header_person img.portrait {
        width:42px;
        height:42px;
        border-radius:50%;
    }

    #common_header .header_person img.certified {
        width:auto;
        height:32px;
    }
    
    #common_header .header_logout a {
        color:inherit;
    }
    
    

body.parent #common_header
{
    background-color:#fff;
    border-bottom:1px solid #ffbdbd;
}

body.student #common_header
{
    background-color:#fff9e9;
    border-bottom:1px solid #ffbdbd;
}

body.mypage #common_header .header_logout,
body.mypage #common_header .header_person
{
    color:#333;
    
}


/* コピーライトヘッダー */
#footer_copyright {
    clear:left;
    width:100%;
    border-radius:0;
    margin-top:0;
    margin-bottom:0px;
    padding:0.5em 0;
    background-color:#008000;
    z-index:1;
    
}

    #footer_copyright .inner {
        width:1250px;
        margin:0 auto;
        padding:0.5em 20px;
        
        text-align:center;
        line-height:1.5em;
        color:#fff;
        
    }


#common_body {
    width:100%;
    height:100%;
}

#common_body .inner {
    width:1250px;
    margin:0 auto;
    background-color:#FFFFFF;
    padding:20px;
    min-height: 100vh;
    padding-top:84px;
    margin-top:-64px;
}

#common_body .inner:after {
    content:"";
    clear:both;
    display:table;
}

#side_menu_column {
    
    display:block;
    
    float:left;
    
    width:270px;
    margin-left:0;
    margin-right:20px;
    
    
}

#main_column {
    
    float:left;
    width:920px;
    margin-left:0;
    
    
}

#main_column.one_column {
    
    float:none;
    
    width:1150px;
    margin-left:auto;
    margin-right:auto;
    
    
}

#breadcrumb {
    min-height:auto;
    border-radius:0;
    background-color:#fff;
    padding:0;
    margin:0 0 10px 0px;
}

#breadcrumb ol {
    background-color:transparent;
}


@media(max-width:1280px)
{

    #common_header .inner,
    #footer_copyright .inner
    {
        width:970px;
    }
    
    #common_body .inner {
        width:1000px;
        padding-left:10px;
        padding-right:10px;
    }

    #side_menu_column {
        width:200px;
        margin-right:10px;
    }

    #main_column {
        width:770px;
        margin-left:0;
    }

    #main_column.one_column {
        width:100%;
    }
}

@media(max-width:1023px)
{
    #common_header .inner,
    #footer_copyright .inner
    {
        width:768px;
    }
    
    #common_header .header_title img
    {
        max-width:50%;
    }
    
    #common_body .inner
    {
        width:768px;
        padding-left:10px;
        padding-right:10px;
        padding-top:72px;
    }

    #side_menu_column {
        width:180px;
        margin-right:10px;
        font-size:90%;
    }
    
    #main_column
    {
        width:550px;
    }

    #main_column.one_column
    {
        width:100%;
    }
    
    #breadcrumb {
        margin-bottom:10px;
    }
}




@media(max-width:767px), print
{
    
    #common_header
    {
        min-height:40px;
        
    }
    
    #common_header .inner,
    #footer_copyright .inner
    {
        width:95%;
    }
    
    #footer_copyright {
        padding-bottom:80px;
    }
    
    #common_header .header_title
    {
        top:10px;
        left:0;
        padding-left:5px;
    }
    
    
    #common_header .header_title img
    {
        width:150px;
    }
    
    #common_header .header_logout,
    #common_header .header_person
    {
        line-height:80px;
        
        padding-right:10px;
    }
    
    
    #common_header .header_person img {
        width:32px;
        height:32px;
    }
    
    
    #wrapper {
        min-height: -webkit-fill-available;
    }
    
    #common_body .inner
    {
        width:100%;
        padding-left:5px;
        padding-right:5px;
        padding-bottom:80px;
    }

    #side_menu_column {
        position:absolute;
        left:0;
        display:none;
        width:100%;
        
        padding-left:5px;
        padding-right:5px;
        padding-bottom:80px;
        
        background:#ffffff;
        transform:translateX(-100%);
        transition:transform 0.15s ease-out 0.1s;
        
        z-index:2;
        
        font-size:110%;
        
    }
    
    #side_menu_column.show {
        display:block;
        transform:translateX(0%);
    }

    #main_column
    {
        width:100%;
    }

    #main_column.one_column
    {
        width:100%;
    }
    
    #breadcrumb
    {
        display:none;
    }
}


.form-area {
    width:100%;
    margin:0 auto 40px auto;
}

.form-area label {
    font-size:18px;
    font-weight:bold;
    color:#666;
}

.form-area input[type="text"],
.form-area input[type="email"],
.form-area input[type="date"],
.form-area input[type="password"],
.form-area input[type="numeric"],
.form-area select {
    font-size:24px;
    border-width:2px;
    padding:5px 15px;
    vertical-align:middle;
    line-height:1em;
}
.form-area input[type="text"]::placeholder,
.form-area input[type="email"]::placeholder,
.form-area input[type="date"]::placeholder,
.form-area input[type="password"]::placeholder,
.form-area input[type="numeric"]::placeholder {
    font-size:20px;
    color:#999;

}

.form-area .each-form {
    max-width:500px;
    margin:0 auto 30px auto;
}

.each-form .alert {
    display:none;
}

.each-form.has-error .alert-container {
    display:block;
    padding:0.5em 0;
}

.each-form.has-error .alert-container .form-alert {
    position:relative;
    color:#F00;
    padding-left:1.25em;
    line-height:1.2em;
}

.each-form.has-error .alert-container .form-alert:before {
    position:absolute;
    left:0;
    font-family: FontAwesome;
    content: "\f071";
}

.each-form.has-error .alert-container.alert-center .form-alert:before {
    position:relative;
}

.each-form.invoice-area {
    max-width:100%;
}

.each-form.invoice-area .table-container {
    display:inline-block;
    max-width:calc(50% - 10px);
    margin-left:5px;
    margin-right:5px;
    vertical-align:top;
}

@media (max-width:767px) {
    
    .form-title {
        margin-left:5px;
        font-size:28px;
    }
    
    .step-list li {
        width:100px;
        max-width:25%;
    }
    
    .step-list li label.pc {
        display:none;
    }
    .step-list li label.sp {
        display:block;
    }
    
    .step-list li:after {
        right:-5px;
        content:"▶";
    }
    
    .form-area input[type="text"],
    .form-area input[type="email"],
    .form-area input[type="date"],
    .form-area input[type="password"],
    .form-area input[type="numeric"],
    .form-area select {
        font-size:16px;
    }
    
    .form-area input[type="text"]::placeholder,
    .form-area input[type="email"]::placeholder,
    .form-area input[type="date"]::placeholder,
    .form-area input[type="password"]::placeholder,
    .form-area input[type="numeric"]::placeholder {
        font-size:14px;
    }
    
    .each-form.invoice-area .table-container {
        display:block;
        max-width: 100%;
        margin:0 auto 20px auto;
    }
}

.form-separator {
    border-bottom:1px solid #babbc3;
    margin-bottom:30px;
}






.arrow_box{
    position:relative;
    background:#fff;
    padding:10px;
    text-align:left;
    border:5px solid #3f729b;
    border-radius:15px;
    color:#666666;
    font-size:15px;
    font-weight:bold;
}
.arrow_box:after,.arrow_box:before{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    left:100%;
    top:30%;
}
.arrow_box:after{
    border-color: rgba(238, 238, 238, 0);
    border-top-width:10px;
    border-bottom-width:10px;
    border-left-width:20px;
    border-right-width:20px;
    margin-top: -10px;
    border-left-color:#fff;
}
.arrow_box:before{
    border-color: rgba(63, 114, 155, 0);
    border-top-width: 14px;
    border-bottom-width: 14px;
    border-left-width: 22px;
    border-right-width: 22px;
    margin-top: -14px;
    margin-left: 5px;
    border-left-color:#3f729b;
}

.progress {
  position: relative;
  display: flex;

}

.progress .progress-label {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height:100%;
  vertical-align:middle;
  color:#000;
  text-shadow:1px 1px 0px rgba(255,255,255,0.6);
  font-size:14px;
  font-weight:bold;
}













/* ルビ関連 */
body.hide_ruby rp, body.hide_ruby rt {
    display:none;
}

body:not(.hide_ruby) ruby {
    display: inline-table;
    border-collapse: collapse;
    height: 2em;
    margin: 0;
    padding: 0;
    border: none;
    white-space: nowrap;
    text-indent: 0;
    vertical-align: 1em;
    text-decoration: inherit;
    text-align: center;
    line-height: 1em;
    }

/* 上ルビ */
body:not(.hide_ruby) ruby>rtc {
    display: table-header-group;
    height: 25%;
    margin: 0;
    padding: 0;
    border: none;
    font: inherit;
    font-size: 50%;
    line-height: 1em;
    }

/* 下ルビ(括弧類がある場合とない場合でセレクタが異なる) */
body:not(.hide_ruby) ruby>rtc+rtc,
body:not(.hide_ruby) ruby>rtc+rp+rtc {
    display: table-footer-group;
    height: 25%;
    margin: 0;
    padding: 0;
    border: none;
    font: inherit;
    font-size: 50%;
    text-decoration: none;
    line-height: 1em;
    }

/* 各文字に対応するルビ */
body:not(.hide_ruby) ruby>rtc>rt {
    display: table-cell;
    margin: 0;
    padding: 0 0.125em;
    border: none;
    font-size: 100%;
    text-align: center;
    line-height: 1em;
    }

/* ルビ対象テキスト */
body:not(.hide_ruby) ruby>rb {
    display: table-cell;
    max-height: 75%;
    margin: 0;
    padding: 0 0.125em;
    border: none;
    font: inherit;
    text-decoration: none;
    text-align: center;
    line-height: 1em;
    vertical-align: top;
    }

/* 単純な<ruby>要素での<rt>要素 */
body:not(.hide_ruby) ruby>rt {
    display: table-header-group;
    height: 25%;
    margin: 0;
    padding: 0 0.125em;
    border: none;
    font: inherit;
    font-size: 50%;
    text-align: center;
    line-height: 1.5em;
    }

/* <ruby>要素入れ子の場合 */
body:not(.hide_ruby) ruby>ruby {
    vertical-align: 0em;
    }

/* <ruby>要素が入れ子でない場合のルビテキストと、*/
/* <ruby>要素が入れ子の場合の上位<ruby>要素のルビテキスト、*/
body:not(.hide_ruby) ruby>ruby+rt,
body:not(.hide_ruby) ruby>ruby+rp+rt {
    display: table-footer-group;
    }

/* <ruby>要素直下に<rt>要素が二つある場合 */
body:not(.hide_ruby) ruby>rt+rt {
    display: table-footer-group;
    }

body:not(.hide_ruby) rt {
    font-size:50%;
}

.large_btn
{
    font-size:24px;
    padding:0.4em 1em;
}

/* 枠囲みタイトル */
.box_title
{
    font-size:24px;
    text-align:center;
    margin:20px auto 50px auto;
}

.box_title > div
{
    display:inline-block;
    width:auto;
    padding:0.5em 0.8em;
    border:2px solid #000;
}


/* メインコース学習の記録 */
.main_course_record
{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
}


.main_course_record .left_column,
.main_course_record .right_column
{
    width:calc(50% - 15px);
    text-align:center;
}

.main_course_record .left_column
{
    margin-right:30px;
}
.main_course_record .right_column
{
    margin-leftt:30px;
}


@media(max-width:1023px) {
    .main_course_record .left_column,
    .main_course_record .right_column
    {
        width:520px;
        max-width:100%;
        margin-left:auto;
        margin-right:auto;
    }
    
}


















/* 学習コンテンツテーブル */
#content_list_table.student .status {
    padding:0;
    width:64px;
    height:64px;
    vertical-align:middle;
    text-align:center;
}

#content_list_table.student .status img {
    cursor:pointer;
    height:58px;
    opacity:1;
    transform:scale(1);
    transition:opcaity 0.2s 0s linear, transform 0.2s 0s linear;
}

#content_list_table.student .status img.fadeout {
    opacity:0;
    transform:scale(0.5);
}

#content_list_table.student .status.finished img,
#content_list_table.student .status.plan img {
    pointer-events:none;
}

#content_list_table.student .status.plan.deletable img {
    pointer-events:auto;
}

#content_list_table.student .status.plan.deletable:hover img {
    opacity:0.5;
    transform:scale(0.8);
}
#content_list_table.student .status.next img {
    transform:scale(0.9);
    opacity:0.6;
}
#content_list_table.student .status.next:hover img {
    opacity:1;
    transform:scale(1.2);
}



#study_modal .content_title {
    display:inline-block;
    margin-top:30px;
    margin-bottom:30px;
    text-align:left;
    font-size:24px;
}

#study_modal .description {
    display:inline-block;
    width:90%;
    max-width:650px;
    margin-bottom:30px;
    text-align:left;
    font-size:16px;
}

#study_modal .file_list {
    width:90%;
    max-width:650px;
    margin:0 auto 30px auto;
    padding:40px;
    border:1px dotted #999;
    background:#eefeee;
}

#study_modal .file_list .each_file {
    display:inline-block;
    width:100px;
    margin:0 10px 0 10px;
    text-align:center;
    cursor:pointer;
}

#study_modal .file_list .each_file img {
    display:block;
    width:80px;
    margin:0 auto 5px auto;
}


#study_modal .file_list .each_file img {
    display:block;
    width:80px;
    margin:0 auto 5px auto;
}

#study_modal .file_list .each_file .file_label {
    font-size:16px;
    font-weight:bold;
}




#student_course_form .course_level_list {
    margin-top:20px;
}

#student_course_form .course_level_list label {
    display:block;
    width:400px;
    max-width:80%;
    margin:0 auto 10px auto;
    border:1px solid #b4aa99;
    border-radius:3px;
    padding:10px;
    padding-left:15px;
    text-align:left;
    font-size:20px;
    cursor:pointer;
}

#student_course_form .course_level_list label.selected {
    background-color:#fcfff3
}

#student_course_form .course_level_list p {
    padding-left:0;
    margin:10px 0 10px 0;
    font-weight:normal;
    font-size:16px;
}

#student_course_form .course_level_list .fee {
    padding-top:2px;
    font-weight:normal;
    font-size:16px;
}


.document_list_table
{
    width:auto;
    max-width:100%;
    margin:20px auto;
    
    border:none;
    
}

.document_list_table td
{
    border:none;
    vertical-align:middle;
    text-align:left;
    padding:5px 15px 15px 15px;
}

.document_list_table td.file_icon
{
    width:64px;
    vertical-align:top;
    text-align:left;
    padding:0 0 15px 0;
}

.document_list_table td.file_icon a
{
    display:block;
    width:80px;
    height:80px;
    border:1px solid #cfcec5;
    background-color:#fffef8;
    
    padding:12px;
    
    transition:background 0.2s linear 0s;
    
}

.document_list_table td.file_icon a img
{
    width:56px;
}

.document_list_table td.file_icon a:hover
{
    background-color:#fffcdb;
}

.document_list_table td h5.file_title
{
    font-weight:bold;
    font-size:18px;
    
    
}

.document_list_table td h5.file_title a
{
    color:#333;
}


.document_list_table td p.description
{
    white-space:pre-wrap;
    line-height:1.6em;
}