@charset "utf-8";

/* CSS Document */


/*WEB-------------フォント-------------*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
body {
    font-family: 'Noto Sans JP', sans-serif, "Font Awesome 5 Free";
    font-size: 14px;
    color: #333;
    overflow-x: hidden;
    line-height: 2;
    padding-top: 120px;
}

@media only screen and (max-width: 768px) {
    body {
        padding-top: 170px;
    }
}

@media only screen and (max-width: 576px) {
    body {
        padding-top: 130px;
    }
}


/*-------------　PC・SP画像切り替え------------- */

.pc {
    display: block;
}

.sp {
    display: none;
}

@media only screen and (max-width: 576px) {
    .pc {
        display: none;
    }
    .sp {
        display: block;
    }
}


/*-------------アンカー・ボタン アウトラインなし-------------*/

a.active.focus,
a.active:focus,
a.focus,
a:active.focus,
a:active:focus,
a:focus,
button.active.focus,
button.active:focus,
button.focus,
button:active.focus,
button:active:focus,
button:focus,
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
    outline: 0;
    outline-color: transparent;
    outline-width: 0;
    outline-style: none;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}

.btn-outline-dark:not(:disabled):not(.disabled):active:focus,
.btn-outline-dark:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-dark.dropdown-toggle:focus {
    box-shadow: none;
}

.btn-light:not(:disabled):not(.disabled):active:focus,
.btn-light:not(:disabled):not(.disabled).active:focus,
.show>.btn-light.dropdown-toggle:focus {
    box-shadow: none;
}

textarea:focus,
input:focus,
input[type]:focus,
.uneditable-input:focus {
    outline: 0;
    box-shadow: none;
}

.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #ccc;
    outline: 0;
    box-shadow: none;
}


/*---fontsize---------------*/

.f12 {
    font-size: 12px;
}

.f14 {
    font-size: 14px;
}

.f16 {
    font-size: 16px;
}

.f18 {
    font-size: 18px;
}

.f20 {
    font-size: 20px;
}

.f22 {
    font-size: 22px;
}

.f24 {
    font-size: 24px;
}

.f30 {
    font-size: 30px;
}

h3 {
    font-size: 24px;
}

h5 {
    line-height: 1.5;
}

.text_red {
    color: #E63B34;
}

.text_blue {
    color: #3C6DB1;
}


/*ヘッダーメニュー　--------------------*/

.header_logo {
    width: 270px;
}

.header_logo_nd {
    width: 270px;
}

ul.menu {
    /*   display: flex; */
    /*    justify-content: right; */
    align-items: center;
    list-style: none;
    padding-right: 30px;
}

.menu li a,
.sp_menu a {
    color: #333;
    text-decoration: none;
}

.menu li a:hover {
    color: #666;
    text-decoration: none;
}

.sp_menu a:hover {
    color: #ccc;
    text-decoration: none;
}

.btn-org {
    color: #fff;
    background-color: #FA820A;
    border-color: #FA820A;
    margin: 6px;
}

a.btn-org {
    color: #fff;
    background-color: #FA820A;
    border-color: #FA820A;
    margin: 6px;
}

.nav-item.btn:hover {
    color: #fff;
    text-decoration: none;
}

.btn-org:hover {
    color: #fff;
    background-color: #e37507;
    border-color: #e37507;
    text-decoration: none;
}

.dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.4em solid;
    border-right: 0.4em solid transparent;
    border-bottom: 0;
    border-left: 0.4em solid transparent;
}

.dropdown-toggle.selected:after {
    transform: translateY(-50%) rotate(180deg);
    transition: 0.2s;
}

.list-group-item {
    border: none;
    padding: 0;
}

.header_fb_logo img {
    width: 20px;
    display: inline-block;
    margin-top: 0.5rem;
}

.header_tc_logo img {
    width: 35px;
    display: inline-block;
    margin-top: 0.5rem;
}


/*---会員メニュー--------------------*/

.btn_member_menu {
    background-color: #fff;
    color: #333;
    font-size: 12px;
}

.dropdown-item {
    font-size: 12px;
    border-bottom: 1px solid #ccc;
    text-decoration: none;
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-menu a:hover {
    background-color: #fff;
    color: #666;
}

.dropdown-menu {
    min-width: 6em;
    text-align: center;
    padding: 0;
}

.sp_menu .dropdown-menu a:hover {
    background-color: #fff;
    color: #666;
    text-decoration: none;
}


/*-- ヘッダー分マージン -------------*/

section:before {
    content: " ";
    margin-top: -80px;
    height: 80px;
    display: block;
    visibility: hidden;
}

@media only screen and (max-width: 576px) {
    ection:before {
        content: " ";
        margin-top: -100px;
        height: 100px;
        display: block;
        visibility: hidden;
    }
}


/*TOP medico説明文------------*/

.top_sentence {
    font-size: 16px;
    margin: 100px 15px 20px;
    line-height: 2;
}

.top_sentence img {
    width: 200px;
    display: inline-block;
    margin: 0 5px -5px 0;
}

@media only screen and (min-width: 960px) {
    .top_sentence {
        margin: 150px 15px 20px;
        font-size: 20px;
    }
}

@media only screen and (max-width: 576px) {
    .top_sentence {
        margin: 30px 15px;
    }
}


/*TOP タブ背景画像------------*/

.tab-content_back {
    background-image: url(../img/img_left.png);
    background-position: left 0 bottom 0;
    background-repeat: no-repeat;
    background-size: 20% auto;
}

ul.nav-pills>li {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tab_img_kiso {
    background-image: url(../img/iconbg_kiso.png);
    background-position: right 0% top 5%;
    background-repeat: no-repeat;
    background-size: 20% auto;
}

.tab_img_presentation {
    background-image: url(../img/iconbg_presentation.png);
    background-position: right 0% top 5%;
    background-repeat: no-repeat;
    background-size: 20% auto;
}

.tab_img_writing {
    background-image: url(../img/iconbg_writing.png);
    background-position: right 0% top 5%;
    background-repeat: no-repeat;
    background-size: 20% auto;
}

.tab_img_communication {
    background-image: url(../img/iconbg_communication.png);
    background-position: right 0% top 5%;
    background-repeat: no-repeat;
    background-size: 20% auto;
}

@media only screen and (max-width: 576px) {
    .tab_img_kiso,
    .tab_img_presentation,
    .tab_img_writing,
    .tab_img_communication {
        background-size: 30% auto;
    }
    .tab-content_back {
        background-image: none;
    }
}


/*---topページタブ-----------------------------*/

.tab_border_gry {
    border-top: 2px solid #D6DDE2;
    margin-top: -2px;
}

.tab_border_org {
    border-top: 2px solid #FA820A;
    margin-top: -2px;
}

.nav-pills .nav-link.active {
    background-color: #FA820A;
}


/*.nav-pills .nav-link {}*/

.nav-item a {
    color: #fff;
    text-decoration: none;
    background-color: #D6DDE2;
}


/*-- 各ページ共通　-------------------------------*/

h4.ondemand {
    border-left: 5px solid #8AC139;
    padding-left: 10px;
    font-size: 18px;
    font-weight: bold;
}

h4.online {
    border-left: 5px solid #3C9CB1;
    padding-left: 10px;
    font-size: 18px;
    font-weight: bold;
}

.text_online {
    color: #3C9CB1;
}

.text_ondemand {
    color: #8AC139;
}

.voice_back {
    background-color: #D6DDE2;
}

img.voice_logo {
    width: 130px;
    display: inline-block;
    margin: 0 4px -3px 0;
}


/*-----ページトップへ-------------------------*/

#page_top {
    width: 30px;
    height: 30px;
    position: fixed;
    right: 0;
    bottom: 0;
    background: rgb(214, 221, 226);
    border-radius: 50%;
}

#page_top a {
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    text-decoration: none;
}

#page_top a::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 700;
    content: '\f062';
    font-size: 20px;
    color: #fff;
    position: absolute;
    width: 30px;
    height: 30px;
    top: -30px;
    bottom: 0;
    right: 35px;
    left: 0;
    margin: auto;
    text-align: center;
}


/*-- オンライン / オンデマンド　詳細ページ -------------*/

.card.border_none {
    border: none;
}

.card-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 0;
}

.price_online {
    color: #3C9CB1;
    font-size: 20px;
    font-weight: bold;
}

a.btn-online_detail {
    color: #333;
    background-color: #D6DDE2;
    border-color: #D6DDE2;
    margin-bottom: 10px;
}

a.btn-online_detail:hover {
    color: #fff;
    background-color: #3C9CB1;
    border-color: #3C9CB1;
}

h4.online_detail {
    border-left: 10px solid #3C9CB1;
    padding-left: 13px;
    font-size: 18px;
    font-weight: bold;
}

h4.online_ondemand {
    border-left: 10px solid #8AC139;
    padding-left: 13px;
    font-size: 18px;
    font-weight: bold;
}

.btn-ondemand-nav {
    color: #fff;
    background-color: #8AC139;
    border-color: #8AC139;
}

a.btn-ondemand_detail {
    color: #333;
    background-color: #D6DDE2;
    border-color: #D6DDE2;
    margin-bottom: 10px;
}

a.btn-ondemand_detail:hover {
    color: #fff;
    background-color: #8AC139;
    border-color: #8AC139;
}

.price_ondemand {
    color: #8AC139;
    font-size: 20px;
    font-weight: bold;
}


/*----footer---------*/

#footer a {
    color: #333;
    text-decoration: none;
}

#footer a:hover {
    color: #666;
    text-decoration: none;
}

.course_name {
    color: #777;
    font-size: 11px;
}

.company_menu {
    border-left: 1px solid #ccc;
    padding-left: 40px;
}

@media only screen and (max-width: 576px) {
    .company_menu {
        border-top: 1px solid #ccc;
        border-left: none;
        margin-top: 10px;
        padding: 10px 0;
        text-align: center;
    }
}


/*--- フォーム関係のページ　ーーーーーーーーーーーー*/

.form_back {
    background-image: url(../img/img_form.png);
    background-position: left 0 bottom 0;
    background-repeat: no-repeat;
    background-size: 40% auto;
}

@media only screen and (max-width: 960px) {
    .form_back {
        background-image: url(../img/img_form.png);
        background-position: left 0 top 0;
        background-repeat: no-repeat;
        background-size: 40% auto;
    }
}

@media only screen and (max-width: 576px) {
    .form_back {
        background-image: none;
    }
}

.form_header {
    background-color: #D6DDE2;
    font-size: 16px;
    padding: 5px 10px;
}

form a,
.clear-decoration {
    color: #3C6DB1;
    text-decoration: none;
}

form a:hover,
.clear-decoration:hover {
    color: #233f66;
    text-decoration: none;
}

.btn.form_btn {
    background-color: #3C6DB1;
    color: #fff;
    padding: 5px 50px;
}

.btn.form_btn:hover {
    background-color: #233f66;
    color: #fff;
}

.form_w {
    width: 80%;
}

@media only screen and (max-width: 576px) {
    .form_w {
        width: 100%;
    }
}

.form_pay_header {
    background-color: #3C6DB1;
    color: #fff;
    font-size: 16px;
    padding: 5px 10px;
}

.form_pay_border {
    border: 1px solid #3C6DB1;
}


/*----カード部分-----------------------------*/

.card-deck .card {
    margin-right: 5px;
    margin-bottom: 10px;
    margin-left: 5px;
    border-radius: 0.5rem;
}

.card-body {
    padding: 0.75rem;
}

.card-footer {
    background-color: transparent;
    border-top: none;
}

.card_ondemand {
    border: 1px solid #8AC139;
}

.card-text {
    line-height: 1.5;
}

a.btn-green {
    color: #fff;
    background-color: #8AC139;
    border-color: #8AC139;
    margin-bottom: 10px;
    text-decoration: none;
}

a.btn-green:hover {
    color: #fff;
    background-color: #6e992e;
    border-color: #6e992e;
    text-decoration: none;
}

a.btn-green.play {
    color: #8AC139;
    background-color: #fff;
    border: 2px solid #8AC139;
    margin-bottom: 10px;
    font-weight: bold;
}

a.btn-green.play:hover {
    color: #fff;
    background-color: #8AC139;
    border-color: #8AC139;
    margin-bottom: 10px;
}

.card_online {
    border: 1px solid #3C9CB1;
}

.btn-online-nav {
    color: #fff;
    background-color: #3C9CB1;
    border-color: #3C9CB1;
    margin-bottom: 10px;
    text-decoration: none;
}

a.btn-online {
    color: #fff;
    background-color: #3C9CB1;
    border-color: #3C9CB1;
    margin-bottom: 10px;
    text-decoration: none;
}

a.btn-online:hover {
    color: #fff;
    background-color: #348699;
    border-color: #348699;
    text-decoration: none;
}

a.btn-outline-green {
    color: #8AC139;
    border-color: #8AC139;
    background-color: #fff;
    margin-bottom: 10px;
    text-decoration: none;
}

a.btn-outline-green:hover {
    color: #fff;
    background-color: #8AC139;
    border-color: #8AC139;
}


/*---購入履歴リスト------------------------------*/

li.history {
    list-style: none;
    border-bottom: 1px solid #ccc;
    margin-top: 10px;
    font-size: 12px;
}

li.history:last-child {
    border-bottom: none;
}