@charset "utf-8";

/*********************************************************************
*
*  For ALL
*
*********************************************************************/

/* ---------------------------------------------------- */
/* cf */
/* ---------------------------------------------------- */
.cf:after {
    content: ".";
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
    visibility: hidden;
}

.cf {
    display: block;
}


/* ---------------------------------------------------- */
/* web font */
/* ---------------------------------------------------- */
/* Google font */
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap&subset=japanese");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");

/* Adobe font
headタグ内にscript記載
*/

/* ---------------------------------------------------- */
/* cs_ff */
/* ---------------------------------------------------- */
.cs_ff_go {
  font-family: "Noto Sans JP", "游ゴシック体", "Yu Gothic", YuGothic,
    "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo,
    "MS Pゴシック", "MS PGothic", sans-serif;
}

.cs_ff_en1 {
  font-family: "Roboto", "Noto Sans JP", "游ゴシック体", "Yu Gothic", YuGothic,
    "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo,
    "MS Pゴシック", "MS PGothic", sans-serif;
}

/* ---------------------------------------------------- */
/* cs_e_op */
/* ---------------------------------------------------- */
@media (min-width: 1040px) {
    .cs_e_op {
        transition: opacity 0.3s ease-in-out;
    }

    .cs_e_op:hover {
        opacity: 0.6;
    }
}

/* ---------------------------------------------------- */
/* pc/sp */
/* ---------------------------------------------------- */
@media (min-width: 1040px) {
    .cs_none_pc {
        display: none !important;
    }
}

@media (max-width: 1039px) {
    .cs_none_sp {
        display: none !important;
    }
}

@media screen and (max-width: 374px) {
    .cs_none_sp_old {
        display: none !important;
    }
}

/* ---------------------------------------------------- */
/* cs_sec */
/* ---------------------------------------------------- */
.cs_sec_wrap {
    position: relative;
}

.cs_sec_inner {
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 1040px) {
    .cs_sec_wrap {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .cs_sec_inner {
        width: 1000px;
    }

    .cs_sec_inner_wide {
        width: calc(100% - 60px);
    }
}

@media (max-width: 1039px) {
    .cs_sec_wrap {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .cs_sec_inner {
        width: calc(100% - 30px);
    }
}

/* ---------------------------------------------------- */
/* cs_sec_mondaiprint */
/* ---------------------------------------------------- */
.cs_sec_wrap_Q {
    position: relative;
}

.cs_sec_wrap_A {
    position: relative;
    margin-left: 260px;
}

.cs_sec_inner_wide_Q {
  width: 80%;
}

.cs_sec_inner_wide_A {
  width: 95%;
}

@media (min-width: 1040px) {
    .cs_sec_wrap_Q {
        padding-top: 25px;
        padding-bottom: 25px;
    }

    .cs_sec_wrap_A {
        padding-top: 25px;
        padding-bottom: 25px;
    }

    .cs_sec_inner_wide_Q {
    width: 80%;
    }

    .cs_sec_inner_wide_A {
    width: 95%;
    }
}

@media (max-width: 1039px) {
    .cs_sec_wrap_Q {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .cs_sec_wrap_A {
        padding-top: 20px;
        padding-bottom: 20px;
        margin-left: 0px;
    }

    .cs_sec_inner_wide_Q {
    width: 95%;
    }
}

/* ---------------------------------------------------- */
/* article */
/* ---------------------------------------------------- */
.cs_sec_inner>article+article {
    margin-top: 50px;
}

@media (max-width: 1039px) {
    .cs_sec_inner>article+article {
        margin-top: 40px;
    }
}

@media (max-width: 767px) {
    .cs_sec_inner>article+article {
        margin-top: 25px;
    }
}

/* ---------------------------------------------------- */
/* cs_desc */
/* ---------------------------------------------------- */
.cs_desc_1 {
    line-height: 1.7;
}

.cs_desc_1 p {
    text-align: justify;
}

.cs_desc_1>*+* {
    margin-top: 1.5em;
}

@media (max-width: 1039px) {
    .cs_desc_1>*+* {
        margin-top: 1.5em;
    }
}

/* ---------------------------------------------------- */
/* cs_ul_1 */
/* ---------------------------------------------------- */
.cs_ul_1 {
    margin-left: 1.5em;
    list-style: disc;
    line-height: 2;
}

/* ---------------------------------------------------- */
/* cs_breadcrumb_1 */
/* ---------------------------------------------------- */
.cs_breadcrumb_1 {
    padding: 0 10px;
}

*+.cs_breadcrumb_1 {
    margin-top: 15px;
}

.cs_breadcrumb_1 ul {
    display: flex;
    width: 100%;
    font-size: 1.34rem;
}

.cs_breadcrumb_1 li {
    position: relative;
}

.cs_breadcrumb_1 li:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cs_breadcrumb_1 li+li {
    padding-left: 17px;
}

.cs_breadcrumb_1 li+li::before {
    content: ">";
    position: absolute;
    font-size: 1.3rem;
    left: 5px;
    top: 0;
    display: block;
}
.remove-content::before {
    content: "" !important;
}

.cs_breadcrumb_1 span {
    /* color: #697d8f; */
    white-space: nowrap;
}

.cs_breadcrumb_1 a {
    color: blue;
    text-decoration: underline;
}

@media (max-width: 767px) {
    .cs_breadcrumb_1 {
        padding: 0;
        overflow: auto;
        overflow-y: hidden;
        word-break: keep-all;
        -webkit-overflow-scrolling: touch;
    }
    
    .cs_breadcrumb_1::-webkit-scrollbar{
        height: 8px;
        width: 10px;
    }
    .cs_breadcrumb_1::-webkit-scrollbar-track{
        background: #fff;
        border-left: solid 1px #ececec;
        border-radius: 8px;
    }
    .cs_breadcrumb_1::-webkit-scrollbar-thumb{
        background: #ccc;
        border-radius: 8px;
        box-shadow: inset 0 0 0 2px #fff;
    }

    .cs_breadcrumb_1 li:last-child {
        overflow: scroll;
        text-overflow: clip;
    }

    .cs_breadcrumb_1 ul {
        font-size: 1.15rem;
    }

    .cs_breadcrumb_1 li:last-child {
        overflow: visible;
        text-overflow: clip;
    }

    .cs_breadcrumb_1 li+li {
      padding-left: 15px;
      /* padding-left: 8px; */
    }

    .cs_breadcrumb_1 li+li::before {
        left: 5px;
        font-size: 1.15rem;
    }

}

/* ---------------------------------------------------- */
/* cs_sort_1 */
/* ---------------------------------------------------- */
.cs_sort_1+* {
    margin-top: 30px;
}

.cs_sort_1 ul {
    display: flex;
    flex-wrap: wrap;
    margin-right: -10px;
    margin-bottom: -10px;
}

.cs_sort_1 li {
    margin-right: 8px;
    margin-bottom: 10px;
}

.cs_sort_1 label {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    color: #FFF;
    line-height: 1;
  background-color: #33ccee;
    border-radius: 2px;
}

.cs_sort_1 label span {
    margin-left: 5px;
}

.cs_sort_1 label.color_all {
    background-color: #ffffff;
    color: #335371;
    border: solid 1px;
    border-color: #9fabb6;
}

.cs_sort_1 label.color_0 {
    color: #335371;
    background-color: transparent;
}

/* .cs_sort_1 label.color_1 {
  background-color: #33ccee;
}

.cs_sort_1 label.color_2 {
  background-color: #ee6666;
}

.cs_sort_1 label.color_3 {
  background-color: #faab0f;
}

.cs_sort_1 label.color_4 {
  background-color: #9977dd;
}

.cs_sort_1 label.color_5 {
  background-color: #00cc88;
}

.cs_sort_1 label.color_6 {
  background-color: #336699;
}

.cs_sort_1 label.color_7 {
  background-color: #999999;
} */

.cs_sort_1 label.color_1 {
  background-color: #d50a36;
}

.cs_sort_1 label.color_2 {
  background-color: #0074dd;
}

.cs_sort_1 label.color_3 {
  background-color: #af125f;
}

.cs_sort_1 label.color_4 {
  background-color: #008d8a;
}

.cs_sort_1 label.color_5 {
  background-color: #f29600;
}

.cs_sort_1 label.color_6 {
  background-color: #00b8bf;
}

.cs_sort_1 label.color_7 {
  background-color: #ec7073;
}

.cs_sort_1 label.color_8 {
  background-color: #633cb3;
}

.cs_sort_1 label[class^="subdiv_color_"] {
  background-color: #8E8E8E;
}
  
.cs_sort_1 label.subdiv_color_all {
  background-color: #ffffff;
  color: #335371;
  border: solid 1px;
  border-color: #9fabb6;
}
  
.cs_sort_1 label.subdiv_color_0 {
  color: #335371;
  background-color: transparent;
}
  
.cs_sort_1 label.subdiv_color_1 {
  background-color: #d50a36;
}
  
.cs_sort_1 label.subdiv_color_2 {
  background-color: #0074dd;
}
  
.cs_sort_1 label.subdiv_color_3 {
  background-color: #af125f;
}
  
.cs_sort_1 label.subdiv_color_4 {
  background-color: #008d8a;
}
  
.cs_sort_1 label.subdiv_color_5 {
  background-color: #f29600;
}
  
.cs_sort_1 label.subdiv_color_6 {
  background-color: #00b8bf;
}
  
.cs_sort_1 label.subdiv_color_7 {
  background-color: #ec7073;
}
  
.cs_sort_1 label.subdiv_color_8 {
  background-color: #633cb3;
}
  
.cs_sort_1 label.subdiv_color_9 {
  background-color: #f29600;
}  

@media (max-width: 1039px) {
    .cs_sort_1+* {
        margin-top: 20px;
    }

    .cs_sort_1 label {
        font-size: 1.3rem;
    }

}

/* ---------------------------------------------------- */
/* cs_ttl_1 */
/* ---------------------------------------------------- */
.cs_ttl_1 {
    display: flex;
    font-size: 2.4rem;
    letter-spacing: 0.05em;
}

.cs_ttl_1+* {
    margin-top: 20px;
}

.cs_ttl_1 i {
    flex: none;
    display: block;
    margin: 0 10px;
    width: 24px;
    height: 24px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    transform: translateY(7px);
}

.cs_ttl_1 span {
    flex: auto;
    width: auto;
}

@media (max-width: 1039px) {
    .cs_ttl_1 {
        font-size: 1.8rem;
    }

    .cs_ttl_1+* {
        margin-top: 15px;
    }

    .cs_ttl_1 i {
        margin: 0 5px;
        width: 20px;
        height: 20px;
        transform: translateY(5px);
    }
}

/* ---------------------------------------------------- */
/* cs_ttl_2 */
/* ---------------------------------------------------- */
.cs_ttl_2 {
    position: relative;
    display: flex;
    font-size: 1.8rem;
    border-top: 1px solid #d7dfe4;
    border-bottom: 1px solid #d7dfe4;
    background-color: #FFF;
    z-index: 2;
}

.cs_ttl_2 span {
  display: block;
  padding: 20px;
  border-left: 10px solid #335371;
  word-break: break-word;
}

.cs_ttl_2.color_1 span {
  border-color: #33ccee;
}

.cs_ttl_2.color_2 span {
  border-color: #ee6666;
}

.cs_ttl_2.color_3 span {
  border-color: #faab0f;
}

.cs_ttl_2.color_4 span {
  border-color: #9977dd;
}

.cs_ttl_2.color_5 span {
  border-color: #00cc88;
}

.cs_ttl_2.color_6 span {
  border-color: #336699;
}

.cs_ttl_2.color_7 span {
  border-color: #999999;
}

.cs_ttl_2.color_11 span {
    border-color: #d50a36;
}
.cs_ttl_2.color_12 span {
    border-color: #0074dd;
}
.cs_ttl_2.color_13 span {
    border-color: #af125f;
}
.cs_ttl_2.color_14 span {
    border-color: #008d8a;
}
.cs_ttl_2.color_15 span {
    border-color: #f29600;
}
.cs_ttl_2.color_16 span {
    border-color: #00b8bf;
}
.cs_ttl_2.color_17 span {
    border-color: #ec7073;
}
.cs_ttl_2.color_18 span {
    border-color: #633cb3;
}
.cs_ttl_2.color_ori span {
    border-color: #999999;
}


@media (max-width: 1039px) {
    .cs_ttl_2 span {
        font-size: 1.55rem;
    padding: 15px 10px;
        border-width: 5px;
    }
}

@media (max-width: 767px) {
    .cs_ttl_2 span {
        font-size: 1.45rem;
    }
}

/* ---------------------------------------------------- */
/* cs_ttl_3 */
/* ---------------------------------------------------- */
.cs_ttl_3 {
    padding: 20px;
    color: #FFF;
    font-size: 1.8rem;
    font-weight: 700;
    background-color: #335371;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.cs_ttl_3.color_1 {
  background-color: #33ccee;
}

.cs_ttl_3.color_2 {
  background-color: #ee6666;
}

.cs_ttl_3.color_3 {
  background-color: #faab0f;
}

.cs_ttl_3.color_4 {
  background-color: #9977dd;
}

.cs_ttl_3.color_5 {
  background-color: #00cc88;
}

.cs_ttl_3.color_6 {
  background-color: #336699;
}

.cs_ttl_3.color_7 {
  background-color: #999999;
}

.cs_ttl_3.color_11 {
    background-color: #d50a36;
}
.cs_ttl_3.color_12 {
    background-color: #0074dd;
}
.cs_ttl_3.color_13 {
    background-color: #af125f;
}
.cs_ttl_3.color_14 {
    background-color: #008d8a;
}
.cs_ttl_3.color_15 {
    background-color: #f29600;
}
.cs_ttl_3.color_16 {
    background-color: #00b8bf;
}
.cs_ttl_3.color_17 {
    background-color: #ec7073;
}
.cs_ttl_3.color_18 {
    background-color: #633cb3;
}
.cs_ttl_3.color_ori {
    background-color: #999999;
}


@media (max-width: 1039px) {
    .cs_ttl_3 {
        padding: 20px 10px;
    }
}

@media (max-width: 767px) {
    .cs_ttl_3 {
        padding: 12px 10px;
        font-size: 1.65rem;
    }
}

/* ---------------------------------------------------- */
/* cs_ttl_4 */
/* ---------------------------------------------------- */
.cs_ttl_4 {
    position: relative;
    display: table;
    margin-bottom: -10px;
    padding: 25px 80px;
  font-size: 2rem;
    font-weight: 700;
    background-color: #FFF;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    z-index: 2;
}

.cs_ttl_4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    display: block;
    width: calc(100% + 10px);
    height: 20px;
    background-color: #FFF;
    z-index: 2;
}

@media (max-width: 1039px) {
    .cs_ttl_4 {
        padding: 20px 20px;
        font-size: 1.8rem;
    }

}

@media (max-width: 767px) {
    .cs_ttl_4 {
        padding: 15px 15px;
        font-size: 1.7rem;
    }

}


/* ---------------------------------------------------- */
/* cs_ttl_6 */
/* ---------------------------------------------------- */
.cs_ttl_6 {
    position: relative;
    display: table;
    margin-bottom: -10px;
    margin-left: 10px;
    padding: 25px 60px;
    font-size: 2rem;
    font-weight: 700;
    background-color: #f5f5f5;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    /* z-index: 2; */
}
  
.cs_ttl_6::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    display: block;
    width: calc(100%);
    height: 20px;
    background-color: #fff;
    z-index: 2;
}
  
@media (max-width: 1039px) {
    .cs_ttl_6 {
      padding: 20px 20px;
      font-size: 1.8rem;
    }
}

/* ---------------------------------------------------- */
/* cs_ttl_7 */
/* ---------------------------------------------------- */
.cs_ttl_7 {
    position: relative;
    display: table;
    margin-bottom: -10px;
    margin-left: 10px;
    padding: 25px 60px;
    font-size: 2rem;
    font-weight: 700;
    background-color: #f5f5f5;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    /* z-index: 2; */
}
  
.cs_ttl_7::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    display: block;
    width: calc(100%);
    height: 20px;
    background-color: #fff;
    z-index: 2;
}
  
@media (max-width: 1039px) {
    .cs_ttl_7 {
      padding: 20px 20px;
      font-size: 1.8rem;
    }
}

/* ---------------------------------------------------- */
/* cs_ttl_8 */
/* ---------------------------------------------------- */
.cs_ttl_8 {
    position: relative;
    display: table;
    margin-bottom: -10px;
    margin-left: 10px;
    padding: 25px 60px;
    font-size: 2rem;
    font-weight: 700;
    background-color: #f5f5f5;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    /* z-index: 2; */
}
  
.cs_ttl_8::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    display: block;
    width: calc(100%);
    height: 20px;
    background-color: #fff;
    z-index: 2;
}
  
@media (max-width: 1039px) {
    .cs_ttl_8 {
      padding: 20px 20px;
      font-size: 1.8rem;
    }
}

/* ---------------------------------------------------- */
/* cs_ttl_5 */
/* ---------------------------------------------------- */
.cs_ttl_5 {
    display: flex;
    font-size: 2.2rem;
    letter-spacing: 0.05em;
}

.cs_ttl_5+* {
    margin-top: 15px;
}

.cs_ttl_5 i {
    flex: none;
    display: block;
    margin: 0 10px;
    width: 22px;
    height: 22px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    transform: translateY(7px);
}

.cs_ttl_5 span {
    flex: auto;
    width: auto;
}

@media (max-width: 1039px) {
    .cs_ttl_5 {
        font-size: 1.9rem;
    }

    .cs_ttl_5+* {
        margin-top: 10px;
    }

    .cs_ttl_5 i {
        margin: 0 5px;
        width: 18px;
        height: 18px;
        transform: translateY(5px);
    }
}


@media (max-width: 767px) {
    .cs_ttl_5 {
        font-size: 1.75rem;
    }
}


/* ---------------------------------------------------- */
/* cs_flex_wrap_1 */
/* ---------------------------------------------------- */
.cs_flex_wrap_1 {
    display: flex;
    justify-content: space-between;
}

.cs_flex_wrap_1>.cs_col_1 {
    width: 78%;
}

.cs_flex_wrap_1>.cs_col_2 {
    width: 20%;
}

@media (max-width: 1039px) {
    /* .cs_flex_wrap_1 {
        display: block;
    } */

    .cs_flex_wrap_1>.cs_col_1 {
        width: 68%;
    }

    .cs_flex_wrap_1>.cs_col_2 {
        width: 30%;
    }
}

.ttl-section_name {
    display: inline-block;
}

@media (max-width: 768px) {
    .ttl-section_name {
        display: block;
        width: max-content;
        overflow: hidden;
    }
}

/* ---------------------------------------------------- */
/* cs_deco */
/* ---------------------------------------------------- */
/* .cs_deco_border_1 {
    border: 1px solid #8dc8ec;
} */

.cs_deco_bg_1 {
    background-color: #FFF;
}

.cs_deco_shadow_1 {
    box-shadow: 0px 0px 10px 0px rgba(51, 118, 170, 0.2);
}

.cs_deco_radius_1 {
    border-radius: 10px;
    overflow: hidden;
}

/* ---------------------------------------------------- */
/* cs_ico_ */
/* ---------------------------------------------------- */
.cs_ico_calendar_2 {
    background-image: url(../img/ico/calendar_2.svg);
}

.cs_ico_doc_1 {
    background-image: url(../img/ico/doc_1.svg);
}

.cs_ico_doc_2 {
    background-image: url(../img/ico/doc_2.svg);
}

.cs_ico_note_1 {
    background-image: url(../img/ico/top_book2.svg);
    transform: translateX(10%);
}

.cs_ico_book_1 {
    background-image: url(../img/ico/top_book.svg);
}

.cs_ico_book_2 {
    background-image: url(../img/ico/book_2.svg);
}

.cs_ico_pen_1 {
    background-image: url(../img/ico/pen_1.svg);
}

.cs_ico_school_1 {
    background-image: url(../img/ico/school_1.svg);
}

.cs_ico_cap_1 {
    background-image: url(../img/ico/cap_1.svg);
}

.cs_ico_cap_2 {
    background-image: url(../img/ico/cap_2.svg);
}

.cs_ico_cap_3 {
    background-image: url(../img/ico/cap_3.svg);
}

.cs_ico_paper_1 {
    background-image: url(../img/ico/paper_1.svg);
    transform: translateX(10%);
}

.cs_ico_stand_1 {
    background-image: url(../img/ico/stand_1.svg);
}

.cs_ico_cover_1 {
    background-image: url(../img/ico/cover_15.svg);
}

.cs_ico_cover_2 {
    background-image: url(../img/ico/cover_12.svg);
}

.cs_ico_cover_3 {
    background-image: url(../img/ico/cover_13.svg);
}

.cs_ico_cover_4 {
    background-image: url(../img/ico/cover_14.svg);
}

.cs_ico_cover_5 {
    background-image: url(../img/ico/cover_11.svg);
}

.cs_ico_cover_6 {
    background-image: url(../img/ico/cover_6.svg);
}
.cs_ico_cover_11 {
    background-image: url(../img/ico/cover_11.svg);
}
.cs_ico_cover_12 {
    background-image: url(../img/ico/cover_12.svg);
}
.cs_ico_cover_13 {
    background-image: url(../img/ico/cover_13.svg);
}
.cs_ico_cover_14 {
    background-image: url(../img/ico/cover_14.svg);
}
.cs_ico_cover_15 {
    background-image: url(../img/ico/cover_15.svg);
}
.cs_ico_cover_16 {
    background-image: url(../img/ico/cover_16.svg);
}
.cs_ico_cover_17 {
    background-image: url(../img/ico/cover_17.svg);
}
.cs_ico_cover_18 {
    background-image: url(../img/ico/cover_18.svg);
}
.cs_ico_cover_ori {
    background-image: url(../img/ico/cover_ori.svg);
}

.cs_ico_movie_1 {
    background-image: url(../img/ico/movie_1.svg);
}

.cs_ico_close_2 {
    background-image: url(../img/ico/close_2.svg);
}

.cs_ico_correct_1 {
    background-image: url(../img/ico/correct_1.svg);
}

.cs_ico_incorrect_1 {
    background-image: url(../img/ico/incorrect_1.svg);
}


/* ---------------------------------------------------- */
/* cs_rate_1 */
/* ---------------------------------------------------- */
.cs_rate_1 {
    display: flex;
    justify-content: center;
}

.cs_rate_1::before,
.cs_rate_1::after,
.cs_rate_1>span {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background-image: url(../img/ico/star_1.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.cs_rate_1>span {
    margin: 0 5px;
}

.cs_rate_1.is_2::after {
    opacity: 0.3;
}

.cs_rate_1.is_1::after,
.cs_rate_1.is_1>span {
    opacity: 0.3;
}

/* ---------------------------------------------------- */
/* cs_rate_2 */
/* ---------------------------------------------------- */
.cs_rate_2 {
    display: flex;
    justify-content: center;
}

.cs_rate_2::before,
.cs_rate_2::after,
.cs_rate_2>span {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background-image: url(../img/ico/confirmed_green.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.cs_rate_0 {
    display: flex;
    justify-content: center;
}

.cs_rate_0>span {
    width: 24px;
    height: 24px;
    background-image: url(../img/ico/confirmed_gray.svg);
}

.cs_rate_2>span {
    margin: 0 5px;
}

.cs_rate_2.is_2::after {
    display: none;
}

.cs_rate_2.is_1::after,
.cs_rate_2.is_1>span {
    display: none;
}

/* ---------------------------------------------------- */
/* cs_list_item_1 */
/* ---------------------------------------------------- */
.cs_list_item_1 {
    display: flex;
}

.cs_list_item_1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cs_list_item_1>.col {
    padding: 0 1px;
    flex: none;

}

.cs_list_item_1>.col:nth-of-type(1) {
    width: 32%;
}

.cs_list_item_1>.col:nth-of-type(2) {
    width: 40%;
}

.cs_list_item_1>.col:nth-of-type(3) {
    width: 15%;
}

.cs_list_item_1>.col:nth-of-type(4) {
    width: 60px;
    text-align: center;
}

.cs_list_item_1 .th {
    color: #798693;
    font-size: 1.3rem;
}

.cs_list_item_1 .btn_wrap {
    display: flex;
}

.cs_list_item_1 .btn_wrap .btn+.btn {
    margin-left: 10px;
}

.cs_list_item_1 .btn_bookmark {
    display: block;
    margin: 0 auto;
    width: 30px;
    height: 30px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background-image: url(../img/ico/star.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.5;
    cursor: pointer;
}

.cs_list_item_1 .cur {
    display: block;
    margin: 0 auto;
    width: 20px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background-position: center;
    background-size: contain;
    background-image: url(../img/ico/cur.png);
    background-repeat: no-repeat;
}

.movie {
    float: right;
    position: relative;
    top: 16px;
    margin: 0 auto;
    margin-right: 58px;
    width: 20px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background-position: center;
    background-size: contain;
    background-image: url(../img/ico/cinema_li.png);
}

.movies{
    float: right;
    position: relative;
    top: -52px;
    margin: 0 auto;
    margin-right: 58px;
    width: 20px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background-position: center;
    background-size: contain;
    background-image: url(../img/ico/cinema_li.png);    
}

.educated {
    float: right;
    position: relative;
    top: 25px;
    margin: 0 auto;
    margin-right: 10px;
    width: 40px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background-position: center;
    background-size: contain;
    background-image: url(../img/ico/edit-document_li.png);
    background-repeat: no-repeat;
    right: 90px;
}

.education {
    float: right;
    position: relative;
    top: -50px;
    margin: 0 auto;
    margin-right: 10px;
    width: 40px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background-position: center;
    background-size: contain;
    background-image: url(../img/ico/edit-document_li.png);
    background-repeat: no-repeat;
    right: 20px;
}

.hw_position {
    float: right;
    position: relative;
    top: -50px;
    margin: 0 auto;
    margin-right: 10px;
    width: 40px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background-position: center;
    background-size: contain;
    background-image: url(../img/ico/hw_position_li.png);
    background-repeat: no-repeat;
    right: 20px;
}

.hw_answer {
    float: right;
    position: relative;
    top: -50px;
    margin: 0 auto;
    margin-right: 10px;
    width: 40px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background-position: center;
    background-size: contain;
    background-image: url(../img/ico/hw_answer_li.png);
    background-repeat: no-repeat;
    right: 20px;
}

.series-list-imgs {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.hw_position_img {
    margin-right: 2%;
    background-image: url(../img/ico/hw_position_li.png);
}

.education_img {
    margin-right: 2%;
    background-image: url(../img/ico/edit-document_li.png);
}

.movies_img {
    margin-right: 3%;
    background-image: url(../img/ico/cinema_li.png);
}

.cs_list_item_1 .btn_bookmark.is_check {
    opacity: 1;
}

.bookmark .btn_bookmark {
    display: block;
    margin: 0 auto;
    width: 30px;
    height: 30px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background-image: url(../img/ico/star.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.5;
    cursor: pointer;
}

.bookmark .btn_bookmark.is_check {
    opacity: 1;
}

.cs_list_item_1 .ico_stats {
    display: block;
    margin: 0 auto;
    width: 30px;
    height: 30px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background-image: url(../img/ico/stats_1.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.5;
}

.cs_list_item_1 .ico_stats.is_check {
    opacity: 1;
}

.btn_review {
    display: block;
    margin: 0 auto;
    width: 30px;
    height: 30px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background-image: url(../img/ico/hukuro.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 1;
}

@media (max-width: 1039px) {
    .cs_list_item_1>.col:nth-of-type(1) {
        width: 55%;
    }

    .cs_list_item_1>.col:nth-of-type(2) {
        width: 18%;
    }

    .cs_list_item_1>.col:nth-of-type(3) {
        width: 17%;
    }

    .cs_list_item_1>.col:nth-of-type(4) {
        width: 15%;
    }

    .cs_list_item_1 .th {
        font-size: 1.1rem;
    }

    .cs_list_item_1 .btn_wrap .btn+.btn {
        margin-left: 5px;
    }

    .movie {
        top: 12px;
        width: 30px;
    }

    .movies {
        top: -52px;
        width: 30px;
    }
    .education {
        top: -50px;
        width: 30px;
    }
}
@media (max-width: 767px) {
    .cs_list_item_1 {
        justify-content: flex-start;
    }

    .cs_list_item_1 .btn_wrap .btn+.btn {
        margin-left: 3px;
    }
    
    #toggled_movie {
        margin-right: 10px !important;
    }

    #span-text-1 {
        display: none;
    }

    #span-text-2 {
        display: block !important;
    }

    .movie {
        /* top: 20px;
        width: 25px;
        left: 40px; */
        right: 15px;
        width: 30px;
        height: 30px !important;
        padding: 0px !important;
    }
    .educated {
        /* right: 50px;
        top: 20px;
        width: 25px; */
        right: 80px;
        top: 25px;
        width: 30px;
        height: 30px !important;
    }

    .movies {
        top: -40px;
        width: 25px;
        right: -20px;
    }
    .education {
        top: -40px;
        width: 25px;
        right: -20px;
    }
    .hw_position {
        top: -40px;
        width: 25px;
        right: -20px;
    }
    .hw_answer {
        top: -40px;
        width: 25px;
        right: -20px;
    }

}

/* ---------------------------------------------------- */
/* cs_list_1 */
/* ---------------------------------------------------- */
.cs_list_1>ul>li {
    padding: 10px 30px;
    background-color: #FFF;
}

.cs_list_1>ul>li+li {
    border-top: 1px solid #d7dfe4;
}

@media (max-width: 1039px) {
    .cs_list_1 {
        overflow-x: auto;
        font-size: 1.5rem;
    }

    .cs_list_1>ul {
        min-width: 700px;
    }

    .cs_list_1>ul>li {
        padding: 10px 10px;
    }
}

@media (max-width: 767px) {
    .cs_list_1 {
        font-size: 1.4rem;
    }

    .cs_list_1>ul {
        /* min-width: 350px; */
        min-width: 500px;
    }

    .cs_list_1>ul>li {
        padding: 5px 5px;
    }
}

/* ---------------------------------------------------- */
/* cs_list_3 */
/* ---------------------------------------------------- */
.cs_list_3>ul>li {
    background-color: #FFF;
}

.cs_list_3>ul>li+li {
    border-top: 1px solid #d7dfe4;
}

.cs_list_3 .btn_toggle {
    position: relative;
    display: block;
    padding: 20px 45px 20px 20px;
}

.cs_list_3 .btn_toggle::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    display: block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #335371;
    border-right: 2px solid #335371;
    transform: translateY(-80%) rotate(135deg);
    transition: 0.3s ease-in-out;
}

.cs_list_3 .btn_toggle.is_show::after {
    transform: translateY(-40%) rotate(-45deg);
}

.cs_list_3 .toggle_wrap {
    display: none;
}

.cs_list_3 .toggle_wrap>ul {
    padding: 0 30px 10px;
}

.cs_list_3 .toggle_wrap>ul>li {
    padding: 10px 20px;
}

.cs_list_3 .toggle_wrap>ul>li+li {
    border-top: 1px dotted #d7dfe4;
}

@media (max-width: 1039px) {
    .cs_list_3 .btn_toggle {
        padding: 20px 40px 20px 10px;
    }

    .cs_list_3 .toggle_wrap {
        overflow-x: auto;
    }

    .cs_list_3 .toggle_wrap>ul {
        padding: 0 10px 10px;
        min-width: 700px;
    }

    .cs_list_3 .toggle_wrap>ul>li {
        padding: 10px 10px;
    }
}

@media (max-width: 767px) {
    .cs_list_3 .btn_toggle {
        padding: 15px 40px 15px 10px;
    }

    .cs_list_3 .toggle_wrap>ul {
        padding: 0 7px 7px;
        min-width: 350px;
    }

    .cs_list_3 .toggle_wrap>ul>li {
        padding: 6px 3px;
    }
}

/* ---------------------------------------------------- */
/* cs_list_4 */
/* ---------------------------------------------------- */
.cs_list_4>ul>li {
    background-color: #FFF;
}

.cs_list_4>ul>li+li {
    border-top: 1px solid #d7dfe4;
}

.cs_list_4 a {
    display: block;
    padding: 20px;
}

@media (max-width: 1039px) {
    .cs_list_4 a {
        padding: 20px 8px;
    }
}

/* ---------------------------------------------------- */
/* cs_list_5 */
/* ---------------------------------------------------- */
.cs_list_5>ul>li {
    background-color: #FFF;
}

.cs_list_5>ul>li+li {
    border-top: 1px dotted #d7dfe4;
}

.cs_list_5 a {
    display: block;
    padding: 20px;
}

.cs_list_5 .ttl {
    position: relative;
    padding-left: 20px;
}

.cs_list_5 .ttl::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    display: block;
    width: 10px;
    height: 10px;
    background-color: #33ccee;
    border-radius: 50%;
}

.cs_list_5.color_1 .ttl::before {
  background-color: #33ccee;
}

.cs_list_5.color_2 .ttl::before {
  background-color: #ee6666;
}

.cs_list_5.color_3 .ttl::before {
  background-color: #faab0f;
}

.cs_list_5.color_4 .ttl::before {
  background-color: #9977dd;
}

.cs_list_5.color_5 .ttl::before {
  background-color: #00cc88;
}

.cs_list_5.color_6 .ttl::before {
  background-color: #336699;
}

.cs_list_5.color_7 .ttl::before {
  background-color: #999999;
}

.cs_list_5.color_11 .ttl::before {
    background-color: #d50a36;
}
.cs_list_5.color_12 .ttl::before {
    background-color: #0074dd;
}
.cs_list_5.color_13 .ttl::before {
    background-color: #af125f;
}
.cs_list_5.color_14 .ttl::before {
    background-color: #008d8a;
}
.cs_list_5.color_15 .ttl::before {
    background-color: #f29600;
}
.cs_list_5.color_16 .ttl::before {
    background-color: #00b8bf;
}
.cs_list_5.color_17 .ttl::before {
    background-color: #ec7073;
}
.cs_list_5.color_18 .ttl::before {
    background-color: #633cb3;
}
.cs_list_5.color_ori .ttl::before {
    background-color: #999999;
}


@media (max-width: 1039px) {
    .cs_list_5 a {
        padding: 20px 8px;
        background-repeat: no-repeat;
    }

    .cs_list_5 .ttl {
        font-size: 1.5rem;
    }
}

@media (max-width: 767px) {
    .cs_list_5 a {
        padding: 15px 8px;
        background-repeat: no-repeat;
    }

    .cs_list_5 .ttl {
        font-size: 1.4rem;
    }

    .cs_list_5 .ttl::before {
        top: 6px;
        width: 8px;
        height: 8px;
    }
}

/* ---------------------------------------------------- */
/* cs_list_6 */
/* ---------------------------------------------------- */
.cs_list_6>ul {
    border-top: 1px solid #d7dfe4;
}

.cs_list_6>ul>li {
    border-bottom: 1px solid #d7dfe4;
    background-color: #FFF;
}

.cs_list_6 a {
    display: block;
    padding: 20px;
  border-left: 10px solid #33ccee;
}

.cs_list_6.color_1 a {
  border-color: #33ccee;
}

.cs_list_6.color_2 a {
  border-color: #ee6666;
}

.cs_list_6.color_3 a {
  border-color: #faab0f;
}

.cs_list_6.color_4 a {
  border-color: #9977dd;
}

.cs_list_6.color_5 a {
  border-color: #00cc88;
}

.cs_list_6.color_6 a {
  border-color: #336699;
}

.cs_list_6.color_7 a {
  border-color: #999999;
}

.cs_list_6.color_11 a {
    border-color: #d50a36;
}
.cs_list_6.color_12 a {
    border-color: #0074dd;
}
.cs_list_6.color_13 a {
    border-color: #af125f;
}
.cs_list_6.color_14 a {
    border-color: #008d8a;
}
.cs_list_6.color_15 a {
    border-color: #f29600;
}
.cs_list_6.color_16 a {
    border-color: #00b8bf;
}
.cs_list_6.color_17 a {
    border-color: #ec7073;
}
.cs_list_6.color_18 a {
    border-color: #633cb3;
}
.cs_list_6.color_ori a {
    border-color: #999999;
}

.cs_list_6 .ttl {
  font-size: 2rem;
}

@media (max-width: 1039px) {
    .cs_list_6 a {
        padding: 20px 8px;
        border-width: 5px;
        background-repeat: no-repeat;
    }

    .cs_list_6 .ttl {
        font-size: 1.6rem;
    }
}

@media (max-width: 767px) {
    .cs_list_6 a {
        padding: 15px 8px;
        background-repeat: no-repeat;
    }

    .cs_list_6 .ttl {
        font-size: 1.4rem;
    }

    .cs_list_6 .ttl::before {
        top: 6px;
        width: 8px;
        height: 8px;
    }
}

/* ---------------------------------------------------- */
/* cs_list_7 */
/* ---------------------------------------------------- */
.cs_list_7>ul {
    display: flex;
    flex-wrap: wrap;
    margin-right: -20px;
    margin-bottom: -20px;
}

.cs_list_7>ul>li {
    margin-bottom: 20px;
    margin-right: 20px;
    width: calc(25% - 20px);
}

.cs_list_7 a {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    height: 235px;
}

.cs_list_7 .ttl {
    margin-bottom: 10px;
    width: 100%;
    color: #007bc9;
    font-weight: 700;
    text-align: center;
}

.cs_list_7 i {
    display: block;
    width: 95px;
    height: 95px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

@media (max-width: 1039px) {
    .cs_list_7>ul {
        display: flex;
        flex-wrap: wrap;
        margin-right: -10px;
        margin-bottom: -10px;
    }

    .cs_list_7>ul>li {
        margin-bottom: 10px;
        margin-right: 10px;
        width: calc(50% - 10px);
    }

    .cs_list_7 a {
        padding: 20px 5px;
        height: auto;
    }

    .cs_list_7 .ttl {
        margin-bottom: 5px;
    }

    .cs_list_7 i {
        display: block;
        width: 70px;
        height: 70px;
    }
}

/* ---------------------------------------------------- */
/* cs_list_8 */
/* ---------------------------------------------------- */
.cs_list_8>ul {
    border-top: 1px solid #d7dfe4;
}

.cs_list_8>ul>li {
    border-bottom: 1px solid #d7dfe4;
    background-color: #FFF;
}

.cs_list_8 a {
    display: block;
    padding: 13px;
  border-left: 10px solid #33ccee;
}

.cs_list_8.color_1 a {
  border-color: #33ccee;
}

.cs_list_8.color_2 a {
  border-color: #ee6666;
}

.cs_list_8.color_3 a {
  border-color: #faab0f;
}

.cs_list_8.color_4 a {
  border-color: #9977dd;
}

.cs_list_8.color_5 a {
  border-color: #00cc88;
}

.cs_list_8.color_6 a {
  border-color: #336699;
}

.cs_list_8.color_7 a {
  border-color: #999999;
}

.cs_list_8 .ttl {
    font-size: 1.7rem;
}

@media (max-width: 1039px) {
    .cs_list_8 a {
        padding: 8px 8px;
        border-width: 5px;
        background-repeat: no-repeat;
    }

    .cs_list_8 .ttl {
        font-size: 1.5rem;
    }
}

@media (max-width: 767px) {
    .cs_list_8 .ttl {
        font-size: 1.4rem;
    }
}

/* ---------------------------------------------------- */
/* cs_btn_wrap_1 */
/* ---------------------------------------------------- */
.cs_btn_wrap_1 {
    text-align: center;
    padding: 0;
    position:absolute, fixed;
}

*+.cs_btn_wrap_1 {
    margin-top: 50px;
}

.cs_btn_wrap_1>*+* {
    margin-left: 10px;
}

@media (max-width: 1039px) {
    *+.cs_btn_wrap_1 {
        margin-top: 40px;
    }

    .cs_btn_wrap_1>*+* {
        margin-left: 0;
        margin-top: 10px;
    }
}

@media (max-width: 767px) {
    *+.cs_btn_wrap_1 {
        margin-top: 30px;
    }
}

/* ---------------------------------------------------- */
/* cs_btn_wrap_2 */
/* ---------------------------------------------------- */
.cs_btn_wrap_2 {
    text-align: right;
}

*+.cs_btn_wrap_2 {
    margin-top: 25px;
}

.cs_btn_wrap_2>*+* {
    margin-left: 10px;
}

#cbw2-m.cs_btn_wrap_2 {
    margin-top: 3px;
    display: flex;
    justify-content: center;
    position: relative;
    align-items: center;
}

@media (max-width: 1039px) {
    *+.cs_btn_wrap_2 {
        margin-top: 20px;
        text-align: center;
    }

    .cs_btn_wrap_2>*+* {
        margin-left: 0;
        margin-top: 10px;
    }
}

/* ---------------------------------------------------- */
/* cs_btn_1 */
/* ---------------------------------------------------- */
.cs_btn_1 {
    display: inline-block;
    padding: 5px 25px;
    color: #007bc9;
    font-size: 1.4rem;
    background-color: #FFF;
    border: 1px solid #8dc8ec;
    border-radius: 20px;
    transition: 0.3s ease-in-out;
}

.cs_btn_1:hover {
    background-color: #b9e4ff !important;
}

.cs_btn_1 span {
    display: flex;
    align-items: center;
}

.cs_btn_1 i {
    display: block;
    margin-right: 10px;
    width: 16px;
    height: 16px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.cs_btn_1.si_s {
    padding: 5px 25px;
    border-radius: 20px;
}

.cs_btn_1.si_m {
    padding: 15px 40px;
    border-radius: 40px;
}

.cs_btn_1.si_l {
    padding: 15px 60px;
    border-radius: 40px;
}

.cs_btn_1.co_1 {
    background: #e0f3ff;
}

.cs_btn_1.co_2 {
    background: transparent;
}

.cs_btn_1.co_3 {
    color: #FFF;
    background: #007bc9;
    border-color: #FFF;
}

@media (max-width: 1039px) {
    .close_btn>.cs_btn_1.si_m {
        font-size: 1.2rem;
        padding: 10px 30px;
    }
    
    .close_btn>.cs_btn_1 i {
        margin-right: 5px;
        width: 11px;
        height: 11px;
    }

    .cs_btn_1.si_s {
        padding: 5px 20px;
    }

    .cs_btn_1.si_m {
        font-size: 1.25rem;
        padding: 10px 30px;
        border-radius: 30px;
    }

    .cs_btn_1.si_l {
        font-size: 1.3rem;
        padding: 10px 50px;
        border-radius: 35px;
    }
}

@media (max-width: 767px) {
    .cs_btn_1 {
        font-size: 1.3rem;
    }
    .cs_btn_1.si_s {
        padding: 3px 10px;
        border-radius: 15px;
    }
    
    .cs_btn_1.si_m {
        font-size: 1.15rem;
        padding: 6px 20px;
        border-radius: 30px;
    }
}

/* ---------------------------------------------------- */
/* cs_btn_2 */
/* ---------------------------------------------------- */
.cs_btn_2 {
    display: inline-block;
    padding: 5px 25px;
    color: #F97B19;
    font-size: 1.4rem;
    background-color: #FFF;
    border: 1px solid #8dc8ec;
    border-radius: 20px;
    transition: 0.3s ease-in-out;
}

.cs_btn_2:hover {
    background-color: #b9e4ff !important;
}

.cs_btn_2 span {
    display: flex;
    align-items: center;
}

.cs_btn_2 i {
    display: block;
    margin-right: 10px;
    width: 16px;
    height: 16px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.cs_btn_2.si_s {
    padding: 5px 25px;
    border-radius: 20px;
}

.cs_btn_2.si_m {
    padding: 15px 40px;
    border-radius: 40px;
}

.cs_btn_2.si_l {
    padding: 15px 60px;
    border-radius: 40px;
}

.cs_btn_2.co_1 {
    background: #e0f3ff;
}

.cs_btn_2.co_2 {
    background: transparent;
}

.cs_btn_2.co_3 {
    color: #FFF;
    background-color: transparent;
    border-color: #FFF;
    font-weight: 599;
}

@media (max-width: 1039px) {
    .close_btn>.cs_btn_2.si_m {
        font-size: 1.2rem;
        padding: 10px 30px;
    }
    
    .close_btn>.cs_btn_2 i {
        margin-right: 5px;
        width: 11px;
        height: 11px;
    }

    .cs_btn_2.si_s {
        padding: 5px 20px;
    }

    .cs_btn_2.si_m {
        font-size: 1.25rem;
        padding: 10px 30px;
        border-radius: 30px;
    }

    .cs_btn_2.si_l {
        font-size: 1.3rem;
        padding: 10px 50px;
        border-radius: 35px;
    }
}

@media (max-width: 767px) {
    .cs_btn_2 {
        font-size: 1.3rem;
    }
    .cs_btn_2.si_s {
        padding: 3px 10px;
        border-radius: 15px;
    }
}

/* ---------------------------------------------------- */
/* cs_btn_4 */
/* ---------------------------------------------------- */
.cs_btn_4>* {
    display: flex;
    height: 100%;
    min-height: 180px;
}

.cs_btn_4>*>.col {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: auto;
    width: auto;
}

.cs_btn_4>*>.col:nth-of-type(1) {
    justify-content: center;
    flex: none;
    width: 180px;
  background: linear-gradient(
    270deg,
    rgba(88, 196, 220, 1) 0%,
    rgba(96, 143, 242, 1) 100%
  );
}

.cs_btn_4>*>.col:nth-of-type(2) {
    padding: 30px 40px;
    height: 205px;
}

.cs_btn_4 i {
    display: block;
    width: 110px;
    height: 110px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.cs_btn_4 .meta_wrap .msg {
    margin-bottom: 10px;
    color: #798693;
}

.cs_btn_4 .meta_wrap .msg::after {
    content: "";
    display: block;
    margin-left: 70px;
    margin-top: 10px;
    width: 1px;
    height: 10px;
    /*background-color: #798693;*/
}

.cs_btn_4 .meta_wrap .cat_1 {
    display: table;
    margin-bottom: 10px;
    padding: 8px 15px;
    color: #FFF;
    font-size: 1.4rem;
    line-height: 1;
    background: #335371;
    border-radius: 20px;
}

.cs_btn_4 .meta_wrap .cat_1.color_1 {
  background-color: #33ccee;
}

.cs_btn_4 .meta_wrap .cat_1.color_2 {
  background-color: #ee6666;
}

.cs_btn_4 .meta_wrap .cat_1.color_3 {
  background-color: #faab0f;
}

.cs_btn_4 .meta_wrap .cat_1.color_4 {
  background-color: #9977dd;
}

.cs_btn_4 .meta_wrap .cat_1.color_5 {
  background-color: #00cc88;
}

.cs_btn_4 .meta_wrap .cat_1.color_6 {
  background-color: #336699;
}

.cs_btn_4 .meta_wrap .cat_1.color_7 {
  background-color: #999999;
}

.cs_btn_4 .meta_wrap .cat_1.color_11 {
    background-color: #d50a36;
}
.cs_btn_4 .meta_wrap .cat_1.color_12 {
    background-color: #0074dd;
}
.cs_btn_4 .meta_wrap .cat_1.color_13 {
    background-color: #af125f;
}
.cs_btn_4 .meta_wrap .cat_1.color_14 {
    background-color: #008d8a;
}
.cs_btn_4 .meta_wrap .cat_1.color_15 {
    background-color: #f29600;
}
.cs_btn_4 .meta_wrap .cat_1.color_16 {
    background-color: #00b8bf;
}
.cs_btn_4 .meta_wrap .cat_1.color_17 {
    background-color: #ec7073;
}
.cs_btn_4 .meta_wrap .cat_1.color_18 {
    background-color: #633cb3;
}
.cs_btn_4 .meta_wrap .cat_1.color_ori {
    background-color: #999999;
}

.cs_btn_4 .meta_wrap .cat_2 {
    letter-spacing: 0.05em;
}

.cs_btn_4 .meta_wrap .ttl {
    font-size: 2.4rem;
    letter-spacing: 0.05em;
}

@media (max-width: 1039px) {
    .cs_btn_4>* {
        height: auto;
        min-height: auto;
    }

    .cs_btn_4>*>.col:nth-of-type(1) {
        /* width: 50px; */
    }

    .cs_btn_4>*>.col:nth-of-type(2) {
        padding: 30px 10px;
        height: 180px;
    }

    .cs_btn_4 i {
        /* width: 30px;
        height: 30px; */
    }

    .cs_btn_4 .meta_wrap .cat_1 {
        font-size: 1.4rem;
    }

    .cs_btn_4 .meta_wrap .cat_2 {
        font-size: 1.4rem;
    }

    .cs_btn_4 .meta_wrap .ttl {
        font-size: 1.8rem;
    }
}

/* ---------------------------------------------------- */
/* cs_btn_5 */
/* ---------------------------------------------------- */
.cs_btn_5>* {
    display: block;
    padding: 30px 10px;
    height: 100%;
    min-height: 180px;
}

.cs_btn_5 .ttl {
    /* margin-bottom: 30px; */
    margin-top: 0px;
    color: #007bc9;
    font-size: 1.8rem;
    text-align: center;
}

.cs_btn_5 i {
    display: block;
    margin: 0 auto;
    width: 110px;
    height: 110px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

@media (max-width: 1039px) {
    .cs_btn_5>* {
        height: auto;
        min-height: auto;
    }

    .cs_btn_5 .ttl {
        /* margin-bottom: 15px; */
        font-size: 1.6rem;
    }

    /* .cs_btn_5 i {
        width: 70px;
        height: 70px;
    } */
}

/* ---------------------------------------------------- */
/* cs_btn_6 */
/* ---------------------------------------------------- */
.cs_btn_6>* {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 10px;
    min-height: 180px;
}

.cs_btn_6 .ttl {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
}

.cs_btn_6 i {
    display: block;
    margin-right: 20px;
    width: 90px;
    height: 90px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

@media (max-width: 1039px) {
    .cs_btn_6>* {
        padding: 30px 10px;
        min-height: auto;
    }

    .cs_btn_6 .ttl {
        font-size: 2.4rem;
    }

    .cs_btn_6 i {
        display: block;
        margin-right: 10px;
        width: 70px;
        height: 70px;
    }
}

/* ---------------------------------------------------- */
/* cs_btn_7 */
/* ---------------------------------------------------- */
.cs_btn_7>* {
    display: flex;
    height: 100%;
    min-height: 180px;
}

.cs_btn_7>*>.col {
    position: relative;
    display: flex;
    align-items: center;
    flex: auto;
    width: auto;
}

.cs_btn_7>*>.col:nth-of-type(2) {
    justify-content: center;
    flex: none;
    width: 180px;
  background: linear-gradient(
    270deg,
    rgba(88, 196, 220, 1) 0%,
    rgba(96, 143, 242, 1) 100%
  );
}

.cs_btn_7>*>.col:nth-of-type(1) {
    padding: 30px 40px 30px 180px;
}

.cs_btn_7 i {
    display: block;
    width: 90px;
    height: 90px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.cs_btn_7 .ttl {
    width: 100%;
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

@media (max-width: 1039px) {
    .cs_btn_7>* {
        height: auto;
        min-height: 130px;
    }

    .cs_btn_7>*>.col:nth-of-type(2) {
        width: 50px;
    }

    .cs_btn_7>*>.col:nth-of-type(1) {
        padding: 30px 10px;
    }

    .cs_btn_7 i {
        width: 30px;
        height: 30px;
    }

    .cs_btn_7 .ttl {
        font-size: 2.4rem;
    }
}

@media (max-width: 767px) {
    .cs_btn_7 .ttl {
        font-size: 1.9rem;
    }
}

/* ---------------------------------------------------- */
/* next_btn_1 */
/* ---------------------------------------------------- */
.next_btn_1 {
    display: inline-block;
    text-align: left;
    padding: 5px 35px;
    color: #1c4aa4;
    font-size: 1.4rem;
    background-color: #FFF;
    border: 2px solid #1c4aa4;
    border-radius: 30px;
    transition: 0.3s ease-in-out;
    font-weight: 600;
}

.next_btn_1:hover,
.next_btn_2:active {
    background-color: #cedbf7;
}

.next-icon {
    display: inline-block;
    border-style: solid;
    border-width: 8px 0 8px 8px;
    border-color: transparent transparent transparent #1c4aa4;
    width: 0;
    height: 0;
    right: 10px;
    position: absolute;
    transform: translateY(-50%);
    background-repeat: repeat-x;
}

.next-icon-left {
    padding-left: 10px;
}

@media (max-width: 1039px) {
    .next_btn_1 {
        padding: 4px 30px;
        font-size: 1.3rem;
        transition: 0.3s ease-in-out;
    }

    .next-icon {
        border-width: 7px 0 7px 7px;
        right: 8px;
    }
    
    .next-icon-left {
        padding-left: 9px;
    }
}

@media (max-width: 767px) {
    .next_btn_1 {
        padding: 2px 24px;
        font-size: 1.2rem;
        border-radius: 25px;
        border: 1px solid #1c4aa4;
        transition: 0.3s ease-in-out;
        font-weight: 599;
    }

    .next-icon {
        border-width: 6px 0 6px 6px;
        right: 6px;
    }
    
    .next-icon-left {
        padding-left: 8px;
    }
}

/* ---------------------------------------------------- */
/* next_btn_2 */
/* ---------------------------------------------------- */
.next_btn_2 {
    display: inline-block;
    color: #FFF;
    font-size: 1.4rem;
    background-color: transparent;
    border: 2px solid #FFF;
    border-radius: 20px;
    transition: 0.3s ease-in-out;
    border-color: #FFF;
    font-weight: 599;
    padding: 10px 40px;
    border-radius: 40px;
}

.next_btn_2_back {
    padding: 15px 25px !important;
}

.next_btn_2_back::before {
    content: "";
    display: inline-block;
    width: 17px;
    height: 17px;
    margin: -3px 5px 0 0;
    background: url("../img/ico/back.svg") no-repeat;
    background-size: contain;
    vertical-align: middle;
}

.next_btn_2:hover,
.next_btn_2:active {
  background-color: #b9e4ff;
}


.back-icon-white {
    display: inline-block !important;
    border-style: solid;
    border-width: 8px 8px 8px 0;
    border-color: transparent #FFF transparent transparent;
    width: 0 !important;
    height: 0 !important;
    position: absolute;
}

.next-icon-white {
    display: inline-block !important;
    border-style: solid;
    border-width: 8px 0 8px 8px;
    border-color: transparent transparent transparent #FFF;
    width: 0 !important;
    height: 0 !important;
    right: 10px;
    position: absolute;
    transform: translateY(-50%);
}

.answer-next-icon-left {
    right: auto;
    margin: 0 0 0 10px !important;
}
.answer-next-icon-right {
    right: auto;
    margin: 0 0 0 20px !important;
}

@media (max-width: 1039px) {
    .next_btn_2 {
        padding: 8px 35px;
        font-size: 1.3rem;
    }
    
    .next_btn_2_back {
        padding: 14px 22px !important;
    }

    .next_btn_2_back::before {
        width: 15px;
        height: 15px;
    }

    .back-icon-white {
        border-width: 7px 7px 7px 0;
    }

    .next-icon-white {
        border-width: 7px 0 7px 7px;
    }

    .answer-next-icon-left {
        margin: 0 0 0 9px !important;
    }
    .answer-next-icon-right {
        margin: 0 0 0 18px !important;
    }
}

@media (max-width: 767px) {
    .next_btn_2 {
        padding: 7px 32px;
        font-size: 1.2rem;
        border-radius: 25px;
        border: 1px solid #FFF;
        font-weight: 599;
    }
    
    .next_btn_2_back {
        padding: 12px 20px !important;
    }
    
    .next_btn_2_back::before {
        width: 14px;
        height: 14px;
    }

    .back-icon-white {
        border-width: 6px 6px 6px 0;
    }

    .next-icon-white {
        border-width: 6px 0 6px 6px;
    }

    .answer-next-icon-right {
        margin: 0 0 0 17px !important;
    }
}

/* ---------------------------------------------------- */
/* cs_btn disable */
/* ---------------------------------------------------- */
a.is_disable {
    pointer-events: none;
    filter: grayscale(100%) brightness(90%);
}

/* ---------------------------------------------------- */
/* cs_profile_1 */
/* ---------------------------------------------------- */
.cs_profile_1 {
    display: flex;
}

.cs_profile_1>.col {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex: auto;
    padding: 40px;
    width: auto;
    word-break: break-word;
}

.cs_profile_1>.col:nth-of-type(2),
.cs_profile_1>.col:nth-of-type(3) {
    justify-content: center;
    flex: none;
    width: 30%;
}

.cs_profile_1>.col:nth-of-type(2)::before,
.cs_profile_1>.col:nth-of-type(3)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    width: 1px;
    height: calc(100% - 80px);
    min-height: 50%;
    background-color: #dddddd;
}

.cs_profile_1 .col_ttl {
    position: absolute;
    left: 20px;
    top: 15px;
}

.cs_profile_1 .account {
    display: flex;
    align-items: center;
}

.cs_profile_1 .account i {
    margin-right: 15px;
    width: 80px;
    min-width: 80px;
    height: 80px;
    background-image: url(../img/ico/user_1.svg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #FFF;
    border: 1px solid #a9c6d4;
    border-radius: 50%;
}

.cs_profile_1 .account .num {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
}

.cs_profile_1 .count {
    width: 100%;
    color: #007bc9;
    font-size: 3.4rem;
    font-weight: 500;
    line-height: 1;
    text-align: center;
}

.cs_profile_1 .graph {
    width: 100%;
    height: 10px;
    background-color: #b3d4ed;
    border-radius: 5px;
    overflow: hidden;
}

.cs_profile_1 .graph>span {
    display: block;
    height: 100%;
    background-color: #007bc9;
}



.cs_profile_1 .list_rate li {
    display: flex;
    align-items: center;
}

.cs_profile_1 .list_rate li+li {
    margin-top: 10px;
}

.cs_profile_1 .list_rate .num {
    padding-top: 2px;
    margin-left: 15px;
    color: #007bc9;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1;
    border-bottom: 1px #007bc9 dashed;
}

@media (max-width: 1039px) {
    .cs_profile_1 {
        flex-wrap: wrap;
    }

    .cs_profile_1>.col {
        justify-content: center;
        padding: 25px 10px;
        width: 100%;
    }

    .cs_profile_1>.col:nth-of-type(2),
    .cs_profile_1>.col:nth-of-type(3) {
        width: 50%;
    }

    .cs_profile_1>.col:nth-of-type(2)::before {
        display: none;
    }

    .cs_profile_1 .col_ttl {
        left: 50%;
        top: -5px;
        transform: translateX(-50%);
    }

    .cs_profile_1 .count {
        font-size: 3.4rem;
    }

    .cs_profile_1 .list_rate li {
        display: flex;
        align-items: center;
    }

    .cs_profile_1 .list_rate li+li {
        margin-top: 5px;
    }
}

@media (max-width: 767px) {
    .cs_profile_1 .account i {
        width: 60px;
        min-width: 60px;
        height: 60px;

    }

    .cs_profile_1 .account .num {
        font-size: 1.7rem;
    }

    .cs_profile_1 .list_rate .num {
        font-size: 1.65rem;
    }

    .cs_profile_1>.col {
        justify-content: center;
        padding: 15px 8px;
        width: 100%;
    }

    .cs_profile_1 .col_ttl {
        left: 50%;
        top: -5px;
        transform: translateX(-50%);
    }

    .cs_profile_1 .count {
        font-size: 2.4rem;
    }

    .cs_profile_1 .list_rate li {
        display: flex;
        align-items: center;
    }

    .cs_profile_1 .list_rate li+li {
        margin-top: 5px;
    }
}

/* ---------------------------------------------------- */
/* cs_mv_1 */
/* ---------------------------------------------------- */
.cs_mv_1 {
    padding: 40px 30px;
}

.cs_mv_1 .copy {
    margin-bottom: 5px;
    font-size: 1.8rem;
}

.cs_mv_1 .ttl {
  font-size: 3rem;
    font-weight: 700;
}

.cs_mv_1 .desc {
    margin-top: 10px;
    color: #697d8f;
}

@media (max-width: 1039px) {
    .cs_mv_1 {
        padding: 30px 10px;
    }

    .cs_mv_1 .copy {
        font-size: 1.6rem;
    }

    .cs_mv_1 .ttl {
        font-size: 1.9rem;
    }

    .cs_mv_1 .desc {
        font-size: 1.4rem;
    }
}

@media (max-width: 767px) {
    .cs_mv_1 .ttl {
        font-size: 1.7rem;
    }

    .cs_mv_1 {
        padding: 20px 10px;
    }
}

/* ---------------------------------------------------- */
/* cs_msg_1 */
/* ---------------------------------------------------- */
.cs_msg_1 {
    padding: 150px 0;
}

.cs_msg_1 .ttl {
    font-size: 2.5rem;
    text-align: center;
}

.cs_msg_1 .desc {
    margin-top: 20px;
}

.cs_msg_1 .desc p {
    text-align: center;
}

@media (max-width: 1039px) {
    .cs_msg_1 {
        padding: 50px 0;
    }

    .cs_msg_1 .ttl {
    font-size: 2rem;
    }
}

/* ---------------------------------------------------- */
/* cs_data_1 */
/* ---------------------------------------------------- */
.cs_data_1 {
    position: relative;
    padding: 30px;
    overflow: visible;
}

.cs_data_1 .form_wrap {
    position: absolute;
    left: 290px;
    top: -65px;
}

.cs_data_1 .form_wrap .datepicker {
    position: relative;
}

.cs_data_1 .form_wrap .datepicker::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    width: 20px;
    height: 20px;
    /*background-image: url(../img/ico/calendar_1.svg);*/
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.cs_data_1 .form_wrap .datepicker input {
    justify-content: center;
    padding: 8px 8px 8px 0px;
    margin: 0;
    width: 150px;
    color: #007bc9;
    background-color: #FFF;
    border: 1px solid #8dc8ec;
    -webkit-appearance: none;
    border-radius: 5px;
    text-align: center;
}

#dateFrom::-webkit-calendar-picker-indicator {
    position: absolute;
    width: 50%;
    height: 100%;
    opacity: 0;
}
#dateTo::-webkit-calendar-picker-indicator {
    position: absolute;
    width: 50%;
    height: 100%;
    opacity: 0;
}

.cs_data_1 .sort_wrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
}

.cs_data_1 .sort_wrap>* {
    margin-top: 0;
}

@media (max-width: 1039px) {
    .cs_data_1 .form_wrap {
        position: absolute;
        text-align: center;
        left: 140px;
        top: -53px;
    }

    .cs_data_1 .form_wrap .datepicker input {
        padding: 5px 5px 5px 0px;
    }

    .cs_data_1 .sort_wrap {
        display: block;
        margin-bottom: 20px;
    }

    .cs_data_1 .sort_wrap>* {
        margin-top: 10px;
    }
}

@media (max-width: 767px) {
    .cs_data_1 {
        padding: 30px 10px;
    }

    .cs_data_1 .form_wrap {
        position: static;
        margin-bottom: 20px;
    }
    
    .cs_data_1 .form_wrap .datepicker input {
        width: 100%;
    }
}

/* ---------------------------------------------------- */
/* datepicker2 */
/* ---------------------------------------------------- */

.datepicker2 {
    position: relative;
    text-align: left;
}
  
.datepicker2::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    width: 20px;
    height: 20px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
  
.datepicker2 input {
    justify-content: center;
    padding: 8px 8px 8px 0px;
    margin: 0;
    width: 150px;
    color: #007bc9;
    background-color: #fff;
    border: 1px solid #2670ff;
    -webkit-appearance: none;
    border-radius: 5px;
    text-align: center;
}
  
.datepicker2 .result_date {
    display: inline-block;
}
  
.datepicker2 .result_date:disabled {
    background: #e9ecef;
    color: #7c7c7c;
    border-color: #b6b6b6;
    cursor: not-allowed;
}
  
.datepicker-result {
    display: inline-block;
    padding-left: 10px;
}
  
.datepicker2 #dateFrom::-webkit-calendar-picker-indicator {
    position: absolute;
    width: 50%;
    height: 100%;
    opacity: 0;
}

.datepicker2 #dateTo::-webkit-calendar-picker-indicator {
    position: absolute;
    width: 50%;
    height: 100%;
    opacity: 0;
}
  
.datefilter {
    padding: 0 20px;
}
  
.datefilter input {
    display: none;
}

.datefilter label {
    display: block;
    float: left;
    cursor: pointer;
    width: 50px;
    margin: 0;
    padding: 7px 2px;
    border: 1px solid #2670ff;
    background: #fff;
    color: #007bc9;
    font-size: 1.4rem;
    text-align: center;
    line-height: 1;
    transition: 0.2s;
}
  
.datefilter label:first-of-type {
    border-radius: 3px 0 0 3px;
    border-right: 0;
}
.datefilter label:last-of-type {
    border-radius: 0 3px 3px 0;
    border-left: 0;
}
.datefilter input[type="radio"]:checked + label {
    background-color: #2670ff;
    color: #fff;
}
 
@media (max-width: 1039px) {
    .datepicker2 input {
        padding: 5px 5px 5px 0px;
    }
  
    .datepicker2 .result_date {
        width: 120px;
        padding: 5px;
    }
}
  
@media (max-width: 767px) {
    .datepicker2 input {
        width: 100%;
        padding: 5px 0;
    }
  
    .datepicker2 .result_date {
        width: 100%;
        padding: 5px;
    }
  
    .datepicker-result {
        text-align: center;
        padding: 5px 10px 5px 15px;
    }
  
    .between-label {
        display: block;
        padding: 5px 0 5px 0;
    }
  
    .datefilter {
        position: relative !important;
        padding: 5px 0;
        float: right;
    }
}

/* ---------------------------------------------------- */
/* cs_table_1 */
/* ---------------------------------------------------- */
.cs_table_1 table {
    width: 100%;
}

.cs_table_1 th {
    padding: 10px 5px;
    color: #FFF;
    font-size: 1.4rem;
    text-align: center;
    background-color: #5f758b;
  border: 1px solid #fff;
}

.cs_table_1 td {
    padding: 20px 5px;
    font-size: 1.2rem;
    text-align: center;
    background-color: #e6ecf3;
  border: 1px solid #fff;
}

.cs_table_1 tr:nth-child(odd) td {
    background-color: #d3dce5;
}

@media (max-width: 1039px) {
    .cs_table_1 {
        overflow-x: auto;
        white-space: nowrap;
    }

    .cs_table_1 th {
        padding: 5px 5px;
        font-size: 1.2rem;
    }

    .cs_table_1 td {
        padding: 10px 5px;
        font-size: 1.1rem;
    }
}

/* ---------------------------------------------------- */
/* cs_doc_1 */
/* ---------------------------------------------------- */
.cs_doc_1 .doc {
    width: 100%;
}

.cs_doc_1 .doc img {
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-touch-callout:none;
    -moz-user-select:none;
    touch-callout:none;
    user-select:none;
    margin: 0 auto;
    /* height: auto;*/
    /* width: auto;*/
    /* transform: translate(10%, 0%); */
    /* max-width: calc(80%); */
    text-align: center;
}

.cs_doc_1 .count {
    margin-top: 25px;
    font-size: 1.4rem;
    text-align: center;
    letter-spacing: 0.05em;
}

@media (max-width: 1039px) {
    .cs_doc_1 .doc img {
        -webkit-touch-callout:none;
        -webkit-user-select:none;
        -moz-touch-callout:none;
        -moz-user-select:none;
        touch-callout:none;
        user-select:none;
        max-width: none;
        /* transform: translate(0%, 0%); */
        /* margin-left: 0px; */
    }

    .cs_doc_1 .count {
        margin-top: 20px;
    }
    
    #img-view img {
        width: 95% !important;
    }
}

/* ---------------------------------------------------- */
/* cs_modal_1 */
/* ---------------------------------------------------- */
.cs_modal_1 {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 100;
}

.cs_modal_1 .modal {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 50px;
    width: 700px;
    background-color: #FFF;
    border-radius: 10px;
}

.cs_modal_1 .modal .ttl {
    margin-bottom: 30px;
    font-size: 3rem;
    text-align: center;
}

.cs_modal_1 .modal .desc p {
    text-align: center;
}

.cs_modal_1 .modal .btn_close {
    position: absolute;
    right: 0;
    top: -45px;
    display: block;
    width: 30px;
    height: 30px;
    background-image: url(../img/ico/close_1.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.cs_modal_1 .modal .calendar table {
    width: 100%;
}

.cs_modal_1 .modal .calendar caption {
    margin-bottom: 10px;
    text-align: center;
    font-weight: 700;
}

.cs_modal_1 .modal .calendar th,
.cs_modal_1 .modal .calendar td {
    width: 14.2%;
    border: 1px solid #d7dfe4;
    text-align: center;
}

.cs_modal_1 .modal .calendar th {
    font-weight: 700;
    background-color: #f0f5fa;
}

.cs_modal_1 .modal .calendar th:nth-of-type(1) {
  color: #ee6666;
}

.cs_modal_1 .modal .calendar th:nth-of-type(7) {
  color: #33ccee;
}

.cs_modal_1 .modal .calendar th>*,
.cs_modal_1 .modal .calendar td>* {
    display: block;
    padding: 10px 0;
}

.cs_modal_1 .modal .calendar a {
    display: block;
    background: #e0f3ff;
}

.cs_modal_1 .modal .calendar a:hover {
    background-color: #b9e4ff;
}

.cs_modal_1 .modal .calendar .is_disable {
    opacity: 0.5;
}

.modal-view {
    width: 100%;
    height: 100%;
    z-index: 100;
    display: none;
    overflow-y: scroll;
    -ms-overflow-style:none;
    text-align: center;
}

.modalWrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
    width: 70%;
    max-width: 500px;
    padding: 10px 30px;
    background-color: #fff;
}

.modal-view::-webkit-scrollbar {
    display:none;
}
.modal-view{
    -ms-overflow-style: none;
    scrollbar-width: none;
}

#cbw2-m>.ttl {
    justify-items: center;
    align-items: center;
    font-size: 2.4rem;
    color:white;
}

.close_btn {
    position: relative;
    margin: 0 20px 0 0;
}

.close_btn span {
    color: black !important;
}

.close_btn img {
    position: absolute;
    right: 0;
    bottom: 0;
}

.file-label {
    padding: 10px 40px;
    color: #ffffff;
    background-color: #384878;
    cursor: pointer;
}

input[type="file"] {
    display: none;
}

.file-text {
    margin: 10px 0 0 0;
}

@media (max-width: 1039px) {
    .cs_modal_1 .modal {
        padding: 30px 10px;
        width: 90%;
    }

    .cs_modal_1 .modal .ttl {
        margin-bottom: 20px;
        font-size: 2.4rem;
    }
    
    #cbw2-m>.ttl {
        font-size: 1.9rem;
    }

    .cs_modal_1 .modal .calendar th,
    .cs_modal_1 .modal .calendar td {
        font-size: 1.2rem;
    }
}

/* ---------------------------------------------------- */
/* cs_btn_03 */
/* ---------------------------------------------------- */
.cs_btn_03 {
    display: inline-block;
    padding: 6px 20px;
    color: #00b8c1;
    font-size: 1.4rem;
    background-color: #ffffff;
    border-radius: 20px;
    transition: 0.3s ease-in-out;
    border: 1px solid #00b8c1;
    margin-top: 20px;
    cursor: pointer;
    font-weight: bold;
}

.cs_btn_03:hover {
    background-color: #f0fcfd !important;
}

.cs_btn_03 span {
    display: flex;
    align-items: center;
}

.cs_btn_03 i {
    display: block;
    margin-right: 10px;
    width: 16px;
    height: 16px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.cs_btn_03.si_s {
    padding: 5px 25px;
    border-radius: 20px;
}

.cs_btn_03.si_m {
    padding: 15px 40px;
    border-radius: 40px;
}

.cs_btn_03.co_1 {
    background: #ffffff;
}

.cs_btn_03.co_2 {
    background: transparent;
}

.cs_btn_03.co_3 {
    color: #FFF;
    background: #007bc9;
    border-color: #FFF;
}

/* ---------------------------------------------------- */
/* cs_modal_2 */
/* ---------------------------------------------------- */
.cs_modal_2 {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    z-index: 100;
}

.cs_modal_2 .modal {
    position: absolute;
    /* left: 50%;
    top: 50%; */
    /* transform: translate(-50%, -50%); */
    margin: 0 auto;
    padding: 50px;
    width: 700px;
    background: linear-gradient(
        0deg,
        rgba(88, 196, 220, 1) 0%,
        rgba(96, 143, 242, 1) 100%
    );
    border-radius: 10px;
}

.cs_modal_2 .perfect {
  background: linear-gradient(
    0deg,
    rgba(231, 141, 25, 1) 0%,
    rgba(253, 219, 95, 1) 100%
  );
    border-radius: 10px;
}

.cs_modal_2 .pass {
  background: linear-gradient(
    0deg,
    rgba(88, 196, 220, 1) 0%,
    rgba(96, 143, 242, 1) 100%
  );
}

.cs_modal_2 .failure {
    /* background: linear-gradient(0deg, #335371 0%, #152a3e 100%); */
    background: linear-gradient(0deg, #3a96ec 0%, #264f74 100%);
}

.cs_modal_2 .modal i {
    display: block;
    margin: 0 auto 20px;
    width: 120px;
    height: 120px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.cs_modal_2 .modal .ttl {
    color: #FFF;
    font-size: 5rem;
    font-weight: 700;
    text-align: center;
}

.cs_modal_2 .modal .btn_close {
    position: absolute;
    right: 10px;
    top: 10px;
    display: block;
    width: 40px;
    height: 40px;
    background-image: url(../img/ico/close_2.svg);
    background-position: center;
    background-size: 16px auto;
    background-repeat: no-repeat;
    background-color: #FFF;
    border-radius: 50%;
}

@media (max-width: 1039px) {
    .cs_modal_2 .modal {
        padding: 30px 10px;
        width: 90%;
    }

    .cs_modal_2 .modal .btn_close {
        right: 5px;
        top: 5px;
        width: 23px;
        height: 23px;
        background-size: 11px auto;
    }

    .cs_modal_2 .modal i {
        margin: 0 auto 15px;
        width: 70px;
        height: 70px;
    }

    .cs_modal_2 .modal .ttl {
    font-size: 3rem;
    }
}


/* ---------------------------------------------------- */
/* cs_widget_menu_1 */
/* ---------------------------------------------------- */
.cs_widget_menu_1 {
    position: fixed;
    left: 0;
    top: 70px;
    width: 70px;
    height: calc(100% - 70px);
    background-color: #161d23;
    z-index: 10;
}

.cs_widget_menu_1>ul>li+li {
    margin-top: 1px;
}

.cs_widget_menu_1 .btn_toggle {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    height: 80px;
    background-color: #393f44;
}

.cs_widget_menu_1 .is_show .btn_toggle {
    background-color: #454a4f;
}

.cs_widget_menu_1 .btn_toggle i {
    display: block;
    margin-bottom: 5px;
    width: 26px;
    height: 26px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.cs_widget_menu_1 .btn_toggle span {
    display: block;
    width: 100%;
    color: #FFF;
    font-size: 1.3rem;
    text-align: center;
}

.cs_widget_menu_1 .toggle_wrap {
    display: none;
    position: absolute;
    left: 70px;
    top: 0;
    height: 100%;
    background-color: #454a4f;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.cs_widget_menu_1 .toggle_wrap>ul {
    padding: 20px 10px;
}

.cs_widget_menu_1 .toggle_wrap>ul>li+li {
    border-top: 1px dotted #bec1c3;
}

.cs_widget_menu_1 .toggle_wrap a {
    display: flex;
    align-items: center;
    padding: 15px;
    min-width: 180px;
    color: #bec1c3;
    font-size: 1.4rem;
    white-space: nowrap;
}

.cs_widget_menu_1 .toggle_wrap a::before {
    content: "";
    display: block;
    margin-right: 5px;
    width: 18px;
    height: 18px;
    background-image: url(../img/ico/play_1.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

@media (max-width: 1039px) {
    .cs_widget_menu_1 {
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        height: auto;
    }

    .cs_widget_menu_1>ul {
        display: flex;
        justify-content: center;
    }

    .cs_widget_menu_1>ul>li {
        margin-top: 0;
        margin-left: 1px;
        width: 80px;
    }

    .cs_widget_menu_1>ul>li+li {
        margin-top: 0;
        margin-left: 1px;
    }

    .cs_widget_menu_1 .btn_toggle {
        height: 60px;
    }

    .cs_widget_menu_1 .btn_toggle i {
        width: 20px;
        height: 20px;
    }

    .cs_widget_menu_1 .btn_toggle span {
        font-size: 1.2rem;
    }

    .cs_widget_menu_1 .toggle_wrap {
        display: none;
        position: absolute;
        left: 0;
        top: 60px;
        width: 100%;
        height: auto;
    }

    .cs_widget_menu_1 .toggle_wrap>ul {
        padding: 10px;
    }

    .cs_widget_menu_1 .toggle_wrap a {
        padding: 15px 0;
        font-size: 1.4rem;
        white-space: normal;
    }
}

/* ---------------------------------------------------- */
/* cs_widget_score_1 */
/* ---------------------------------------------------- */
.cs_widget_score_1 {
    position: fixed;
    left: 0;
    top: 70px;
    padding: 50px 25px;
    width: 260px;
    height: calc(100% - 70px);
    background-color: #454a4f;
    z-index: 10;
}

.cs_widget_score_1 .ttl {
    margin-bottom: 15px;
    color: #FFF;
    font-size: 2.4rem;
    text-align: center;
}

.cs_widget_score_1 .score input {
    padding: 15px;
    margin: 0;
    width: 100%;
    color: #007bc9;
    font-size: 4rem;
    background-color: #FFF;
    border: 1px solid #FFF;
    -webkit-appearance: none;
    border-radius: 5px;
}

.cs_widget_score_1 .btn_wrap {
    margin-top: 20px;
    text-align: center;
}

@media (max-width: 1039px) {
    .cs_widget_score_1 {
        position: static;
        padding: 20px 10px;
        width: auto;
        height: auto;
    }

    .cs_widget_score_1 .ttl {
        font-size: 1.8rem;
    }

    .cs_widget_score_1 .score {
        margin: 0 auto;
        width: 50%;
    }

    .cs_widget_score_1 .score input {
        padding: 8px;
        font-size: 3rem;
    }

    .cs_widget_score_1 .btn_wrap {
        margin-top: 20px;
    }

}

@media (max-width: 767px) {
    .cs_widget_score_1 {
        padding: 20px 10px;
    }

    .cs_widget_score_1 .ttl {
        font-size: 1.7rem;
    }

    .cs_widget_score_1 .score input {
        padding: 5px;
        font-size: 2.5rem;
    }

    .cs_widget_score_1 .btn_wrap {
        margin-top: 15px;
    }

}

/* ---------------------------------------------------- */
/* cs_list_toggle_wrap_1 */
/* ---------------------------------------------------- */
.cs_list_toggle_wrap_1.hide_row_11>table>tbody>tr:nth-of-type(n+11),
.cs_list_toggle_wrap_1.hide_row_11>ul>li:nth-child(n+11) {
    /*display: none;*/
}

.cs_list_toggle_wrap_1.hide_row_10>table>tbody>tr:nth-of-type(n+10),
.cs_list_toggle_wrap_1.hide_row_10>ul>li:nth-child(n+10) {
    display: none;
}

/*
.cs_list_toggle_wrap_1.hide_row_9>table>tbody>tr:nth-of-type(n+9),
.cs_list_toggle_wrap_1.hide_row_9>ul>li:nth-child(n+9) {
    display: none;
}

.cs_list_toggle_wrap_1.hide_row_8>table>tbody>tr:nth-of-type(n+8),
.cs_list_toggle_wrap_1.hide_row_8>ul>li:nth-child(n+8) {
    display: none;
}

.cs_list_toggle_wrap_1.hide_row_7>table>tbody>tr:nth-of-type(n+7),
.cs_list_toggle_wrap_1.hide_row_7>ul>li:nth-child(n+7) {
    display: none;
}

.cs_list_toggle_wrap_1.hide_row_6>table>tbody>tr:nth-of-type(n+6),
.cs_list_toggle_wrap_1.hide_row_6>ul>li:nth-child(n+6) {
    display: none;
}

.cs_list_toggle_wrap_1.hide_row_5>table>tbody>tr:nth-of-type(n+5),
.cs_list_toggle_wrap_1.hide_row_5>ul>li:nth-child(n+5) {
    display: none;
}

.cs_list_toggle_wrap_1.hide_row_4>table>tbody>tr:nth-of-type(n+4),
.cs_list_toggle_wrap_1.hide_row_4>ul>li:nth-child(n+4) {
    display: none;
}

.cs_list_toggle_wrap_1.hide_row_3>table>tbody>tr:nth-of-type(n+3),
.cs_list_toggle_wrap_1.hide_row_3>ul>li:nth-child(n+3) {
    display: none;
}

.cs_list_toggle_wrap_1.hide_row_2>table>tbody>tr:nth-of-type(n+2),
.cs_list_toggle_wrap_1.hide_row_2>ul>li:nth-child(n+2) {
    display: none;
}

.cs_list_toggle_wrap_1.hide_row_1>table>tbody>tr:nth-of-type(n+1),
.cs_list_toggle_wrap_1.hide_row_1>ul>li:nth-child(n+1) {
    display: none;
}
*/

.cs_list_toggle_wrap_1.is_show>table>tbody>tr {
    display: table-row !important;
}

/* ---------------------------------------------------- */
/* cs_login_1 */
/* ---------------------------------------------------- */

.cs_login_1 .ttl {
    margin-bottom: 30px;
  font-size: 3rem;
    font-weight: 700;
    text-align: center;
}

.cs_login_1 .error {
    margin-bottom: 30px;
  color: #ee6666;
    text-align: center;
}

.cs_login_1 .input_wrap {
    margin-bottom: 30px;
}

.cs_login_1 .input_txt {
    display: block;
    padding: 15px;
    margin: 0 auto;
    width: 500px;
    color: #007bc9;
    background-color: #FFF;
    border: 1px solid #8dc8ec;
    -webkit-appearance: none;
    border-radius: 5px;
}

.cs_login_1 .input_txt::placeholder {
    color: #bbc7d2;
}

.cs_login_1 .input_txt+.input_txt {
    margin-top: 15px;
}

.cs_login_1 .btn_wrap {
    margin-bottom: 30px;
    text-align: center;
}

.cs_login_1 .btn_submit {
    display: inline-block;
    padding: 15px;
    width: 200px;
    color: #007bc9;
    font-size: 1.4rem;
    text-align: center;
    background-color: #FFF;
    border: 1px solid #8dc8ec;
    border-radius: 40px;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    transition: 0.3s ease-in-out;
}

.cs_login_1 .btn_submit:hover {
    background-color: #b9e4ff !important;
}

.cs_login_1 .check_wrap {
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
}

.cs_login_1 .desc_wrap {
    margin-bottom: 60px;
    color: #697d8f;
    font-size: 1.4rem;
    line-height: 1.7;
    text-align: center;
}

.cs_login_1 .logo {
    margin: 0 auto;
    width: 70px;
    height: 70px;
    background-image: url(../img/logo/myetr_s.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    image-rendering: -webkit-optimize-contrast;
}

.cs_login_1 .kuma-logo {
    width: 70px;
    height: 70px;
    background-image: url(../img/logo/e-taro.svg);
    background-size: cover;
}

.cs_login_1 .mybestie-logo {
    width: 300px;
    height: 70px;
    background-image: url(../img/logo/mybestie_login_logo.svg);
    background-size: cover;
}

@media (max-width: 1039px) {
    .cs_login_1 .ttl {
        margin-bottom: 20px;
        font-size: 2.4rem;
    }

    .cs_login_1 .error {
        margin-bottom: 20px;
    }

    .cs_login_1 .input_wrap {
        margin-bottom: 20px;
    }

    .cs_login_1 .input_txt {
        width: 100%;
    }

    .cs_login_1 .input_txt+.input_txt {
        margin-top: 10px;
    }

    .cs_login_1 .btn_wrap {
        margin-bottom: 20px;
    }

    .cs_login_1 .btn_submit {
        width: 90%;
    }

    .cs_login_1 .check_wrap {
        margin-bottom: 20px;
    }

    .cs_login_1 .desc_wrap {
        margin-bottom: 40px;
    }

}

/* ---------------------------------------------------- */
/* cs_editprofile_1 */
/* ---------------------------------------------------- */
.cs_editprofile_1 {
    margin-left: auto;
    margin-right: auto;
    max-width: 540px;
}

.cs_editprofile_1 .icon_wrap i {
    display: block;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #FFF;
    border: 1px solid #a9c6d4;
    border-radius: 50%;
}

.cs_editprofile_1 .icon_wrap .current {
    margin: 0 auto 20px;
    width: 130px;
    height: 130px;
}

.cs_editprofile_1 .icon_wrap .list {
    position: relative;
    margin-bottom: 45px;
    padding: 30px 35px;
    background-color: #FFF;
    border: 1px solid #d7dfe4;
    border-radius: 5px;
}

.cs_editprofile_1 .icon_wrap .list:before {
    content: "";
    position: absolute;
    top: -24px;
    left: 50%;
    margin-left: -15px;
    border: 12px solid transparent;
    border-bottom: 12px solid #FFF;
    z-index: 2;
}

.cs_editprofile_1 .icon_wrap .list:after {
    content: "";
    position: absolute;
    top: -28px;
    left: 50%;
    margin-left: -17px;
    border: 14px solid transparent;
    border-bottom: 14px solid #d7dfe4;
    z-index: 1;
}

.cs_editprofile_1 .icon_wrap .list>ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.cs_editprofile_1 .icon_wrap .list>ul a {
    display: block;
    width: 80px;
}

.cs_editprofile_1 .icon_wrap .list>ul a {
    position: relative;
    display: block;
    width: 80px;
    height: 80px;
}

.cs_editprofile_1 .icon_wrap .list>ul a.is_check {
    pointer-events: none;
}

.cs_editprofile_1 .icon_wrap .list>ul a.is_check::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 4px solid #007bc9;
    border-radius: 50%;
}

.cs_editprofile_1 .icon_wrap .list a.is_check::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 30px;
    height: 20px;
    border-left: 6px solid #007bc9;
    border-bottom: 6px solid #007bc9;
    transform: translate(-50%, -60%) rotate(-45deg);
}

.cs_editprofile_1 .icon_wrap .list .btn_wrap {
    text-align: center;
}

.cs_editprofile_1 .input_wrap .ttl {
    margin-bottom: 15px;
    font-size: 1.8rem;
    text-align: center;
}

.cs_editprofile_1 .input_txt {
    display: block;
    padding: 15px;
    margin: 0 auto;
    width: 100%;
    color: #335371;
  font-size: 2rem;
    background-color: #FFF;
    border: 1px solid #8dc8ec;
    -webkit-appearance: none;
    border-radius: 5px;
}


/***** simpleselect */
.simpleselect {
	font-size: 16px;
	margin: 5px 5px;
	padding: 5px;
	width: 130px;
	border: 1px solid #007bc9;
	border-radius: 20px;
	cursor: pointer;
}


@media (max-width: 1039px) {
    .cs_editprofile_1 .icon_wrap .current {
        width: 100px;
        height: 100px;
    }

    .cs_editprofile_1 .icon_wrap .list {
        margin-bottom: 30px;
        padding: 20px 25px;
    }

    .cs_editprofile_1 .input_wrap .ttl {
        margin-bottom: 15px;
        font-size: 1.7rem;
        text-align: center;
    }

    .cs_editprofile_1 .input_txt {
        padding: 10px;
        font-size: 1.8rem;
    }
}

@media (max-width: 767px) {
    .cs_editprofile_1 .icon_wrap .list>ul a {
        width: 70px;
        height: 70px;
    }

    .cs_editprofile_1 .input_wrap .ttl {
        margin-bottom: 15px;
        font-size: 1.6rem;
        text-align: center;
    }

    .cs_editprofile_1 .input_txt {
        font-size: 1.7rem;
    }
}

/*モーダル用*/
.js-modal__bg {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    display: none;
}
.js-modal__main {
    width: 100%;
    height: 80%;
    padding: 16px;
    bottom: -81%;
    left: 0;
    background: #fff;
    border-radius:4px 4px 0 0 ;
    position: fixed;
    z-index: 11;
    opacity: 0;
}
.js-modal__btn {
    color:#76952f;
    cursor: pointer;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
.js-modal__btn--close {
    margin-top: 40px;
    text-align: center;
    cursor: pointer;
    text-decoration: underline;
}
.js-modal__btn--close--fix {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: absolute;
    top: -50px;
    right: 5px;
    z-index: 101;
    cursor:pointer;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
.js-modal__btn--close--fix:before{
    content:"";
    width: 20px;
    height: 20px;
    border-right:3px solid #fff;
    transform: rotate(-45deg);
    position: absolute;
    top:12px;
    left:-3px;
}
.js-modal__btn--close--fix:after{
    content:"";
    width: 20px;
    height: 20px;
    border-right:3px solid #fff;
    transform: rotate(45deg);
    position: absolute;
    top:-2px;
    left:-3px;
}
/*下から上*/
@keyframes SlideUp {
    0% {
    opacity: 0;
    transform: translateY(-1%);
    }
    100% {
    opacity: 1;
    transform: translateY(-80%);
    }
}
/*上から下*/
@keyframes SlideDown {
    0% {
    opacity: 1;
    transform: translateY(-80%);
    }
    100% {
    opacity: 0;
    transform: translateY(-1%);
    }
}
.js-modal__main._slideUp {
  animation: SlideUp 0.5s ease-in-out forwards;
}
.js-modal__main._slideDown {
  animation: SlideDown 0.5s ease-in-out forwards;
}


@media (max-width: 570px){
    .education {
        right: -30px;
        top: -40px;
        width: 35px;
    }
    .hw_position {
        right: -30px;
        top: -40px;
        width: 35px;
    }
    .hw_answer {
        right: -30px;
        top: -40px;
        width: 35px;
    }

}

@media (max-width: 320px){
    .educated {
        right: 42px;
        top: 20px;
        width: 35px;
    }

    .education {
        right: -30px;
        top: -40px;
        width: 35px;
    }

    .movie {
        margin-right: 47px;
        width: 35px;
    }

}