@charset "UTF-8";
ul.cp-title {
    display: inline-block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    border: 2px solid #ff3850 !important;
    border-radius: 4px !important;
}

ul.cp-title li {
    display: inline-block !important;
    float: left !important;
    width: 16% !important;
    height: 26px !important;
    margin: 3px 0 !important;
    border-top: none !important;
    border-right: 1px solid #ff3850 !important;
    border-bottom: none !important;
    border-left: none !important;
    border-radius: 1px 0 0 1px !important;
    font-size: 1.4rem !important;
    line-height: 2.8rem !important;
    font-weight: 600 !important;
    color: #ff3850 !important;
    text-align: center !important;
}

ul.cp-title li h2 {
    display: inline-block !important;
    font-size: 1.8rem !important;
    line-height: 3.4rem !important;
    font-weight: 600 !important;
    text-align: center !important;
}

ul.cp-title li:first-child {
    content: "" !important;
    background: #ff3850 !important;
    color: #fff !important;
    margin: 0 !important;
    height: 32px !important;
    border-radius: 1px 0 0 1px !important;
    border-top: none !important;
    border-right: 1px solid #ff3850 !important;
    border-bottom: none !important;
    border-left: none !important;
}

ul.cp-title li:last-child {
    content: "" !important;
    display: inline-block !important;
    height: 26px !important;
    float: left !important;
    width: 52% !important;
    margin: 3px 0 !important;
    border: none !important;
    color: #000 !important;
}

@media (max-width: 599px) {
    ul.cp-title li h2 {
        display: inline-block !important;
        font-size: 1.8rem !important;
    }
    ul.cp-title li {
        height: 26px !important;
        font-size: 1.4rem !important;
        line-height: 2.8rem !important;
        text-align: center !important;
    }
    ul.cp-title li:first-child {
        width: 33.333% !important;
        border-radius: 1px 0 0 0px !important;
        text-align: center !important;
    }
    ul.cp-title li:nth-child(2n) {
        width: 33.333% !important;
        border-radius: 0 !important;
        border-top: none !important;
        border-right: 1px solid #ff3850 !important;
        border-bottom: none !important;
        border-left: none !important;
    }
    ul.cp-title li:nth-child(3n) {
        width: 33.333% !important;
        border-radius: 0 !important;
        border: none !important;
    }
    ul.cp-title li:last-child {
        content: "" !important;
        display: inline-block !important;
        width: 100% !important;
        height: 32px !important;
        margin: 0px 0 !important;
        line-height: 3.2rem !important;
        border-radius: 0 !important;
        border-top: 1px solid #ff3850 !important;
        border-right: none !important;
        border-bottom: none !important;
        border-left: none !important;
    }
}

.cp-counter {
    display: inline-block !important;
    padding: 6px 3px 0 0 !important;
    width: 30px !important;
    height: 30px !important;
    background-image: url("../images/cp/counter.svg") !important;
    background-repeat: no-repeat !important;
    margin: 0 0 0 10px !important;
    color: #ff3850 !important;
    font-weight: bold !important;
    font-size: 1.4rem !important;
}


/*ボタン*/

.cp-btn:hover,
.cp-btn:focus,
.cp-btn.focus {
    color: #ff3850 !important;
    text-decoration: none !important !important;
}

.cp-btn-default {
    color: #ff3850 !important;
    background-color: #fff !important;
    border-color: #ff3850 !important;
}

.cp-btn-default:focus,
.cp-btn-default.focus {
    color: #ff3850 !important;
    background-color: #e6e6e6 !important;
    border-color: #ff3850 !important;
}

.cp-btn-default:hover {
    color: #ff3850 !important;
    background-color: #e6e6e6 !important;
    border-color: #ff3850 !important;
}

.cp-btn-default:active,
.cp-btn-default.active,
.open>.cp-btn-default.dropdown-toggle {
    color: #ff3850 !important;
    background-color: #e6e6e6 !important;
    border-color: #ff3850 !important;
}

.cp-btn-default:active:hover,
.cp-btn-default:active:focus,
.cp-btn-default:active.focus,
.cp-btn-default.active:hover,
.cp-btn-default.active:focus,
.cp-btn-default.active.focus,
.open>.cp-btn-default.dropdown-toggle:hover,
.open>.cp-btn-default.dropdown-toggle:focus,
.open>.cp-btn-default.dropdown-toggle.focus {
    color: #ff3850 !important;
    background-color: #d4d4d4 !important;
    border-color: #ff3850 !important;
}


/* tab */

.cp-nav-tabs {
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-flex-flow: row wrap !important;
    -ms-flex-flow: row wrap !important;
    flex-flow: row wrap !important;
    border-bottom: 1px solid #ff3850 !important;
}

.cp-nav-tabs>li {
    width: 20% !important;
    height: 42px !important;
    margin-right: 2px !important;
    background: transparent !important;
    border-radius: 4px 4px 0 0 !important;
    line-height: 2.8rem !important;
}

.cp-nav-tabs>li:first-child {
    margin-left: 0px !important;
}

.no-flexbox .cp-nav-tabs li {
    float: left !important;
}

.cp-nav-tabs>li>a {
    height: 100% !important;
    line-height: 2.6rem !important;
    text-align: center !important;
    border: 1px solid #B8B8B8 !important;
    border-radius: 4px 4px 0 0 !important;
    border-bottom-color: transparent !important;
    margin-right: 0 !important;
    color: #666 !important;
    padding: 7px 0 !important;
}

.cp-nav-tabs>li>a:hover {
    background-color: transparent !important;
    border: 1px solid #B8B8B8 !important;
    border-bottom-color: transparent !important;
}

@media (min-width: 768px) {
    .cp-nav-tabs>li>a {
        padding: 9px 0 !important;
    }
    .cp-nav-tabs li img {
        width: 22px !important;
        height: 22px !important;
        margin: -5px 5px 0 0 !important;
    }
}

@media (max-width: 767px) {
    .cp-nav-tabs>li {
        width: 25% !important;
        height: 38px !important;
    }
    .cp-nav-tabs>li>a>span {
        display: table !important;
    }
    .cp-nav-tabs>li>a>span>span {
        display: table-cell !important;
        vertical-align: middle !important;
    }
    .cp-nav-tabs li img {
        width: 20px !important;
        height: 20px !important;
        margin: -3px 5px 0 0 !important;
    }
}

.cp-nav-tabs>li.active>a,
.cp-nav-tabs>li.active>a:hover,
.cp-nav-tabs>li.active>a:focus {
    color: #ff3850 !important;
    font-weight: bold !important;
    line-height: 2.6rem !important;
    background-color: #ffffff !important;
    border-radius: 4px 4px 0 0 !important;
    border: 1px solid #ff3850 !important;
    border-bottom-color: transparent !important;
    cursor: default !important;
}

.cp-on_off {
    cursor: pointer !important;
    width: 64px !important;
    height: 23px !important;
    margin: 12px 0 6px 0 !important;
    background-image: url("../images/cp/on_off.svg") !important;
    background-repeat: no-repeat !important;
    background-size: 64px !important;
}

.cp-active {
    background-position: center bottom !important;
}

.cp-prev {
    /* display: block !important; */
    /* float: left !important; */
    margin-right: 10px !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 34px solid transparent !important;
    border-right: 66px solid #ff3850 !important;
    border-bottom: 34px solid transparent !important;
    border-left: 0px solid transparent !important;
    box-shadow: 0px 0px 0px 0px !important;
}

.cp-prev:focus,
.cp-prev:hover {
    background-color: transparent !important;
}

.cp-next {
    /* display: block !important; */
    /* float: left !important; */
    width: 0 !important;
    height: 0 !important;
    border-top: 34px solid transparent !important;
    border-right: 0px solid transparent !important;
    border-bottom: 34px solid transparent !important;
    border-left: 66px solid #ff3850 !important;
    box-shadow: 0px 0px 0px 0px !important;
}

.cp-next:focus,
.cp-next:hover {
    background-color: transparent !important;
}

.cp-prev span {
    position: absolute !important;
    margin: -12px 0 0 26px !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    color: #fff !important;
}

.cp-next span {
    position: absolute !important;
    text-align: center !important;
    margin: -12px 0 0 -56px !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    color: #fff !important;
}


/* -----------------------------------------------
* TW追加
-------------------------------------------------- */


/* フォント */

.cp-f-e {
    font-family: "Helvetica Neue LT Std" !important;
    font-weight: bold !important;
    font-size: 2.4rem !important;
}

.cp-f-e-cp {
    font-family: "Helvetica Neue LT Std" !important;
    font-weight: bold !important;
    font-size: 2.4rem !important;
    color: #ff3850 !important;
}

.cp-f-e-cp-du {
    font-family: "Helvetica Neue LT Std" !important;
    font-weight: bold !important;
    font-size: 2.4rem !important;
    color: #ff3850 !important;
    text-decoration: underline !important;
}

.cp-f-e-cs {
    font-family: "Helvetica Neue LT Std" !important;
    font-weight: bold !important;
    font-size: 2.4rem !important;
    color: #5bc0de !important;
}

.cp-f-e-ct {
    font-family: "Helvetica Neue LT Std" !important;
    font-weight: bold !important;
    font-size: 2.4rem !important;
    color: #5cb85c !important;
}

.cp-f-e-cm {
    font-family: "Helvetica Neue LT Std" !important;
    font-weight: bold !important;
    font-size: 2.4rem !important;
    color: #98978b !important;
}

.cp-f-e-ch {
    font-family: "Helvetica Neue LT Std" !important;
    font-weight: bold !important;
    font-size: 2.4rem !important;
    color: #800080 !important;
}

.cp-f-e-cr {
    font-family: "Helvetica Neue LT Std" !important;
    font-weight: bold !important;
    font-size: 2.4rem !important;
    color: #ff0000 !important;
}

.cp-f-em {
    font-family: "Helvetica Neue LT Std" !important;
    font-weight: bold !important;
    font-size: 2.0rem !important;
}

.cp-f-em-cp {
    font-family: "Helvetica Neue LT Std" !important;
    font-weight: bold !important;
    font-size: 2.0rem !important;
    color: #ff3850 !important;
}

.cp-f-em-cs {
    font-family: "Helvetica Neue LT Std" !important;
    font-weight: bold !important;
    font-size: 2.0rem !important;
    color: #5bc0de !important;
}

.cp-f-em-cm {
    font-family: "Helvetica Neue LT Std" !important;
    font-weight: bold !important;
    font-size: 2.0rem !important;
    color: #98978b !important;
}

.cp-f-es {
    font-family: "Helvetica Neue LT Std" !important;
    font-weight: bold !important;
}

.cp-f-es-cp {
    font-family: "Helvetica Neue LT Std" !important;
    font-weight: bold !important;
    color: #ff3850 !important;
}

.cp-f-es-cs {
    font-family: "Helvetica Neue LT Std" !important;
    font-weight: bold !important;
    color: #5bc0de !important;
}

.cp-f-es-ct {
    font-family: "Helvetica Neue LT Std" !important;
    font-weight: bold !important;
    color: #5cb85c !important;
}

.cp-f-es-cm {
    font-family: "Helvetica Neue LT Std" !important;
    font-weight: bold !important;
    color: #98978b !important;
}

.cp-f-es-u {
    font-family: "Helvetica Neue LT Std" !important;
    font-weight: bold !important;
    vertical-align: top !important;
}

.cp-f-exs {
    font-family: "Helvetica Neue LT Std" !important;
    font-weight: bold !important;
    font-size: 1.2rem !important;
}

.cp-f-exs-cs {
    font-family: "Helvetica Neue LT Std" !important;
    font-weight: bold !important;
    font-size: 1.2rem !important;
    color: #5bc0de !important;
}

.cp-f-exs-cm {
    font-family: "Helvetica Neue LT Std" !important;
    font-weight: bold !important;
    font-size: 1.2rem !important;
    color: #98978b !important;
}

.cp-f-speaker {
    font-family: "Helvetica Neue LT Std" !important;
    font-weight: normal !important;
    font-size: 2.4rem !important;
}

.cp-f-speaker-s {
    font-family: "Helvetica Neue LT Std" !important;
}

.cp-f-speaker-yaku {
    font-weight: normal !important;
}

.cp-f-yaku {
    font-weight: bold !important;
}

.cp-f-synopsis {
    font-size: 1.4rem !important;
}

.cp-f-p {
    font-family: "Helvetica Neue LT Std" !important;
    font-weight: bold !important;
    font-size: 2.4rem !important;
}

.cp-f-p-cp {
    font-family: "Helvetica Neue LT Std" !important;
    font-weight: bold !important;
    font-size: 2.4rem !important;
    color: #ff3850 !important;
}

.cp-f-p-cs {
    font-family: "Helvetica Neue LT Std" !important;
    font-weight: bold !important;
    font-size: 2.4rem !important;
    color: #5bc0de !important;
}

.cp-f-p-ct {
    font-family: "Helvetica Neue LT Std" !important;
    font-weight: bold !important;
    font-size: 2.4rem !important;
    color: #5cb85c !important;
}

.cp-f-p-cm {
    font-family: "Helvetica Neue LT Std" !important;
    font-weight: bold !important;
    font-size: 2.4rem !important;
    color: #98978b !important;
}

.cp-f-p-cb {
    font-family: "Helvetica Neue LT Std" !important;
    font-weight: bold !important;
    font-size: 2.4rem !important;
    color: #435faa !important;
}

.cp-f-pm {
    font-family: "Helvetica Neue LT Std" !important;
    font-weight: bold !important;
    font-size: 2.0rem !important;
}

.cp-f-pm-cp {
    font-family: "Helvetica Neue LT Std" !important;
    font-weight: bold !important;
    font-size: 2.0rem !important;
    color: #ff3850 !important;
}

.cp-f-ps {
    font-family: "Helvetica Neue LT Std" !important;
    font-weight: bold !important;
}

.cp-f-pxs {
    font-family: "Helvetica Neue LT Std" !important;
    font-weight: bold !important;
    font-size: 1.2rem !important;
}

.cp-f-j {
    font-size: 1.4rem !important;
}

.cp-f-jl {
    font-weight: bold !important;
    font-size: 2.4rem !important;
}

.cp-f-jl-cs {
    font-weight: bold !important;
    font-size: 2.4rem !important;
    color: #5bc0de !important;
}

.cp-f-jl-ch {
    font-weight: bold !important;
    font-size: 2.4rem !important;
    color: #800080 !important;
}

.cp-f-jm {
    font-weight: bold !important;
    font-size: 2.0rem !important;
}

.cp-f-jm-wn {
    font-size: 2.0rem !important;
}

.cp-f-js {
    font-weight: bold !important;
}

.cp-f-js-ch-wn {
    color: #800080 !important;
}

.cp-f-explanation {
    font-size: 1.4rem !important;
}

.cp-f-hint {
    font-size: 1.4rem !important;
    color: #ff3850 !important;
}

.cp-f-h {
    font-weight: bold !important;
    font-size: 2.4rem !important;
}

.cp-f-wb {
    font-weight: bold !important;
}

.cp-f-wb-du {
    font-weight: bold !important;
    text-decoration: underline !important;
}

.cp-f-du {
    text-decoration: underline !important;
}

.cp-f-sl {
    font-size: 2.4rem !important;
}

.cp-f-cp {
    color: #ff3850 !important;
}

.cp-f-cp-wb {
    color: #ff3850 !important;
    font-weight: bold !important;
}

.cp-f-cp-wb-sl {
    color: #ff3850 !important;
    font-weight: bold !important;
    font-size: 2.0rem !important;
}

.cp-f-cs {
    color: #5bc0de !important;
}

.cp-f-cs-wb {
    color: #5bc0de !important;
    font-weight: bold !important;
}

.cp-f-ct {
    color: #5cb85c !important;
}

.cp-f-ct-wb {
    color: #5cb85c !important;
    font-weight: bold !important;
}

.cp-f-cm-wb {
    color: #98978b !important;
    font-weight: bold !important;
}

.cp-f-ch {
    color: #800080 !important;
}

.cp-f-ch-wb {
    color: #800080 !important;
    font-weight: bold !important;
}

.cp-f-cb {
    color: #435faa !important;
}

.cp-f-cb-wb {
    color: #435faa !important;
    font-weight: bold !important;
}

.cp-f-cr-wb {
    color: #ff0000 !important;
    font-weight: bold !important;
}


/* フレーム */

.cp-fr-s {
    /* preタグ前提 */
    padding: 5px 10px !important;
    display: inline-block !important;
}

.cp-fr-p {
    padding: 0 10px !important;
    display: inline-block !important;
    background-color: #FFF0F5 !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
}

.cp-fr-e {
    padding: 0 10px !important;
    display: inline-block !important;
    border: 1px solid #ccc !important;
}

.cp-fr-cp {
    display: inline-block !important;
    border: 2px solid #ff3850 !important;
}

.cp-fr-cs {
    display: inline-block !important;
    border: 2px solid #5bc0de !important;
}

.cp-fr-cb {
    display: inline-block !important;
    border: 2px solid #435faa !important;
}

.cp-fr-bgcp {
    padding: 2px 7px !important;
    display: inline-block !important;
    background-color: #ff3850 !important;
    color: #fff !important;
}

.cp-fr-bgcs {
    padding: 2px 7px !important;
    display: inline-block !important;
    background-color: #5bc0de !important;
    color: #fff !important;
}

.cp-fr-bgct {
    padding: 2px 7px !important;
    display: inline-block !important;
    background-color: #5cb85c !important;
    color: #fff !important;
}

.cp-fr-bgch {
    padding: 2px 7px !important;
    display: inline-block !important;
    background-color: #800080 !important;
    color: #fff !important;
}

.cp-fr-bgcb {
    padding: 2px 7px !important;
    display: inline-block !important;
    background-color: #435faa !important;
    color: #fff !important;
}


/* 画像 */

.cp-i-i {
    width: 22px !important;
    height: 22px !important;
}

.cp-i-m {
    width: 160px !important;
}


/* テキストボックス */

.cp-textbox {
    display: inline !important;
    width: 120px !important;
}


/*--- 発音トレーニング辞典 ---*/


/* テーブル */

.pd-t {
    border-collapse: collapse !important;
    width: 100% !important;
    table-layout: fixed !important;
    word-wrap: break-word !important;
}

.pd-t td {
    border: 1px solid #d6d6d6 !important;
    padding: 5px !important;
}

.pd-t tr td:nth-child(1) {
    width: 25% !important;
}

.pd-t tr td:nth-child(2) {
    width: 20% !important;
}


/* フォント */

.pd-f-e {
    font-family: "Helvetica Neue LT Std" !important;
    font-weight: bold !important;
    font-size: 2.4rem !important;
}

.pd-f-e-cp {
    font-family: "Helvetica Neue LT Std" !important;
    font-weight: bold !important;
    font-size: 2.4rem !important;
    color: #ff3850 !important;
}

@media (min-width: 768px) {
    /* フォント */
    .cp-f-e {
        font-size: 2.8rem !important;
    }
    .cp-f-e-cp {
        font-size: 2.8rem !important;
    }
    .cp-f-e-cp-du {
        font-size: 2.8rem !important;
    }
    .cp-f-e-cs {
        font-size: 2.8rem !important;
    }
    .cp-f-e-ct {
        font-size: 2.8rem !important;
    }
    .cp-f-e-cm {
        font-size: 2.8rem !important;
    }
    .cp-f-e-ch {
        font-size: 2.8rem !important;
    }
    .cp-f-e-cr {
        font-size: 2.8rem !important;
    }
    .cp-f-em {
        font-size: 2.2rem !important;
    }
    .cp-f-em-cp {
        font-size: 2.2rem !important;
    }
    .cp-f-em-cs {
        font-size: 2.2rem !important;
    }
    .cp-f-em-cm {
        font-size: 2.2rem !important;
    }
    .cp-f-exs {
        font-size: 1.4rem !important;
    }
    .cp-f-exs-cs {
        font-size: 1.4rem !important;
    }
    .cp-f-exs-cm {
        font-size: 1.4rem !important;
    }
    .cp-f-speaker {
        font-size: 2.8rem !important;
    }
    .cp-f-synopsis {
        font-size: 1.4rem !important;
    }
    .cp-f-p {
        font-size: 2.8rem !important;
    }
    .cp-f-p-cp {
        font-size: 2.8rem !important;
    }
    .cp-f-p-cs {
        font-size: 2.8rem !important;
    }
    .cp-f-p-ct {
        font-size: 2.8rem !important;
    }
    .cp-f-p-cm {
        font-size: 2.8rem !important;
    }
    .cp-f-p-cb {
        font-size: 2.8rem !important;
    }
    .cp-f-pm {
        font-size: 2.2rem !important;
    }
    .cp-f-pm-cp {
        font-size: 2.2rem !important;
    }
    .cp-f-pxs {
        font-size: 1.4rem !important;
    }
    .cp-f-j {
        font-size: 1.4rem !important;
    }
    .cp-f-jl {
        font-size: 2.8rem !important;
    }
    .cp-f-jl-cs {
        font-size: 2.8rem !important;
    }
    .cp-f-jl-ch {
        font-size: 2.8rem !important;
    }
    .cp-f-jm {
        font-size: 2.2rem !important;
    }
    .cp-f-jm-wn {
        font-size: 2.2rem !important;
    }
    .cp-f-explanation {
        font-size: 1.4rem !important;
    }
    .cp-f-hint {
        font-size: 1.4rem !important;
    }
    .cp-f-h {
        font-size: 2.8rem !important;
    }
    .cp-f-sl {
        font-size: 2.8rem !important;
    }
    .cp-f-cp-wb-sl {
        font-size: 2.4rem !important;
    }
    /* 画像 */
    .cp-i-m {
        width: 200px !important;
    }
    /*--- 発音トレーニング辞典 ---*/
    /* フォント */
    .pd-f-e {
        font-size: 2.8rem !important;
    }
    .pd-f-e-cp {
        font-size: 2.8rem !important;
    }
}


/* -----------------------------------------------
* 音トレヘッダー部
-------------------------------------------------- */

.tw-dropdown-oto {
    width: 100%;
    display: inline-block;
}

@media (min-width: 768px) {
    .tw-dropdown-oto {
        width: 26%;
        display: inline-block;
    }
}


/* -----------------------------------------------
* 多聴多読
-------------------------------------------------- */


/* ロゴ */

.tw-headerImage {
    text-decoration: none !important;
    cursor: default;
}

.tw-footerImage {
    text-decoration: none !important;
    cursor: default;
}

.tw-estLogoMini {
    width: auto !important;
    height: auto !important;
}

.tw-erLogo {
    width: auto !important;
    height: auto !important;
}

@media (max-width: 767px) {
    .tw-estLogoMini {
        width: initial !important;
        height: 31px !important;
    }
    .tw-erLogo {
        width: initial !important;
        height: 31px !important;
    }
}


/* 読速チェック */

.tw-stopwatchWrapper {
    width: 95%;
}

.tw-stopwatch {
    margin: 5px;
    padding: 10px 5px;
    border: solid 3px silver;
    /*text-align:center;*/
    font-size: 100%;
    font-weight: bold;
}

@media (max-width: 767px) {
    .tw-stopwatch {
        margin: 5px;
        padding: 10px 5px;
        border: solid 3px silver;
        /*text-align:center;*/
        font-size: 80%;
        /*font-weight: bold;*/
    }
}

.tw-stopwatchControl {
    margin-bottom: 5px;
}


/* epub */

.tw-epub {
    width: 100%;
    height: 625px;
    /*    min-width: 480px;*/
    min-height: 625px;
}


/* sano_yusuke@cosmopier.com */

.activityinstance a {
    background-color: #ff3850;
    padding: 15px;
    margin: 15px;
    border-radius: 10px;
    color: #FFF;
    font-weight: bold;
}

.activityinstance a:hover {
    background-color: #cf2b3f;
}

/* #2666 【eステ多言語学校版】読むコンテンツ各コンテンツページの多言語化
    .instancename:after {
    content: "を行う";
}*/