/*
    CS独自のCSSを使用する場合、このファイルに以下の順序で記述する。
    ・PC
    ・SP
    ・クラス
        → クラス名には必ず文頭に「cs」を記載すること。
*/

/* +++++++++++    PC    +++++++++++  */
@media screen and (min-width: 769px) {
}


/* +++++++++++    SP    +++++++++++  */
@media screen and (max-width: 768px) {
}


/* +++++++++++    attention/error    +++++++++++  */
/* 必須マーク */
.cs-required {
    display: inline-block;
    margin: 0 .1rem 0 .5rem;
    padding: 0.3rem;
    line-height: 1.0;
    background-color: #c43828;
    color: #fff;
    font-size: x-small;
}
/* アスタリスクマーク */
.cs-asterisk {
    font-weight: bold;
    color:#c43828 !important;
}

.cs-warning {
    color: #c43828;
}

.cs-warning::before {
    margin-right: 15px;
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url("/themes/base/assets/img/cs/error.svg");
    background-size: contain;
    vertical-align: middle;
}

.cs-alert-warning-top {
    margin-bottom: 30px !important;
}

.cs-alert-info-top {
    margin-bottom: 30px !important;
}

/* 入力値エラー */
.cs-input-error {
    color: #C43828;
    line-height: 1.5;
    background: #FFFFFF url("/themes/base/assets/img/cs/error_bg.gif") left top repeat;
    font-weight: bold;
    margin-top: 5px;
    padding-left: 0.5em !important;
    white-space: normal;
}

label + .cs-input-error,
input + .cs-input-error,
select + .cs-input-error,
a + .cs-input-error,
.note + .cs-input-error {
    margin: 6px 0 0;
}

/* アラート */
.cs-alert-title {
    text-indent: -16px;
    padding-left: 30px;
}
.cs-alert-title-icon {
    display: inline-block;
    padding: 0 12px 0 0;
}

.cs-alert-msg {
    padding: 8px 0 0;
}
.cs-alert-msg-only {
    padding: 0;
}
.cs-alert-msg-ul {
    margin: 0;
    padding-left: 20px !important;
}
.cs-alert-msg-ul li:not(:first-child) {
    margin-top: 1rem;
}

.cs-alert-row {
    margin: 0 0 25px;
}

.cs-alert-content-top {
    margin: 0 0 20px;
}

.cs-alert-content-only {
    margin: 0;
}

.cs-alert-below {
    margin: 20px 0 0;
}

.cs-alert-confirm {
    background-color: #fff7cd;
    border-color: #ffefba;
}
.cs-alert-confirm-title {
    color: #ed2155;
}
.cs-alert-confirm-msg {
    color: #514040;
}

/* +++++++++++    Workshop    +++++++++++  */
/* 講習会申込者選考 */
.cs-ws-selection-accepted {
    background-color: #b7e4c1 !important;
}
.cs-ws-selection-unaccepted {
    background-color: #b0b1b1 !important;
}

/* +++++++++++    BankAccount    +++++++++++  */
/* 銀行口座一覧 */
.cs-bas-container {
    display:flex;
    flex-diretion: row;
    justify-content: space-between;
    align-items: flex-end;
}
.cs-bas-notes {

}
.cs-bas-buttons-center {

}
.cs-bas-buttons-left {

}
.cs-bas-usage-group {
    border: 2px solid #6c757d;
}
.cs-bas-usage-selected {
    background-color: #b7e4c1;
}
.cs-bas-usage-selected-before {
    background-color: #cccccc;
}
.cs-bas-usage-non-event-not-completed {
    background-color: #f7bbc1;
}
.cs-bas-usage-event-not-completed {
    background-color: #fbf1bc;
}
#bank-account-list > thead > tr > th.cs-bas-buttons {
    width: 30px !important;
    vertical-align: middle;
}
#bank-account-list > thead > tr > th.cs-bas-bank-id {
    width: auto !important;
    min-width: 150px;
    vertical-align: middle;
}
#bank-account-list > thead > tr > th.cs-bas-bank-name {
    width: auto !important;
    min-width: 110px;
    vertical-align: middle;
}
#bank-account-list > thead > tr > th.cs-bas-branch-name {
    width: auto !important;
    min-width: 110px;
    vertical-align: middle;
}
#bank-account-list > thead > tr > th.cs-bas-account-type {
    width: auto !important;
    min-width: 50px;
    vertical-align: middle;
}
#bank-account-list > thead > tr > th.cs-bas-account-name {
    width: auto !important;
    min-width: 140px;
    vertical-align: middle;
}
#bank-account-list > thead > tr > th.cs-bas-usage-title {
    width: auto !important;
    background-color: #e2e2e6;
    border-bottom: 2px solid #6c757d;
    text-align: center;
}
#bank-account-list > thead > tr > th.cs-bas-usage {
    width: 20px;
    min-height: 180px;
    background-color: #e2e2e6;
    border-bottom-color: #e2e2e6;
    text-align: center;
    padding: 12px 4px !important;
}
#bank-account-list > thead > tr > th.cs-bas-usage span {
    writing-mode: vertical-rl;
    text-orientation: upright;
}
#bank-account-list > thead > tr > td.cs-bas-usage-asterisk {
    margin: 0;
    padding: 0;
    height: 20px;
    background-color: #e2e2e6;
    text-align: center;
}
#bank-account-list > tbody > tr > td.cs-bas-usage {
    text-align: center;
}

#bank-account tr td ul {
    margin-bottom: 0;
    padding-left: 20px;
}

/* +++++++++++    Bill    +++++++++++  */
@media screen and (min-width: 769px) {
    .cs-bp-tbl th {
        width: 35% !important;
    }
}

@media (max-width: 768px) {
    .cs-bp-sec-box {
        margin-bottom: 30px !important;
    }
    .cs-bp-li-tbl {
        line-height: 20px;
    }
    .cs-bp-li-td {
        padding: 5px 10px;
    }
}

.cs-bp-pmd-note {
    display: inline-block;
    margin-left: 20px;
}
.cs-bp-payer-tel {
    height: 45.8px;
}

/* 明細 */
.cs-bp-tbl-side,
.cs-bp-tbl-ttl,
.cs-bp-tbl-ttl-dc-cap {
    border: none !important;
}
@media (max-width: 768px) {
    .cs-bp-tbl-side tbody,
    .cs-bp-tbl-ttl tbody {
        display: table-row-group !important;
    }
    .cs-bp-tbl-side {
        display: table !important;
    }
    .cs-bp-tbl-detail tbody tr:nth-of-type(2n+3) {
        border-top: double #e7eaec !important;
    }
    .cs-bp-tbl-expiring tbody tr:nth-of-type(2n+3) {
        border-top: double #e7eaec !important;
    }
}
.cs-bp-tbl-side th,
.cs-bp-tbl-ttl th {
    border-top: 1px solid #e7eaec !important;
    background-color: #F5F5F6 !important;
    vertical-align: middle !important;
}
@media (max-width: 768px) {
    .cs-bp-tbl-side th,
    .cs-bp-tbl-ttl th {
        font-size: 14px !important;
    }
}
.cs-bp-tbl-side td,
.cs-bp-tbl-ttl td {
    vertical-align: middle !important;
}

/* テーブル（請求書発行時の減額後合計） */
.cs-bp-tbl-ttl-dc-cap th {
    background-color: #ffffff !important;
    font-weight: normal !important;
    font-size: 16px !important;
}

/* 各セル */
@media (min-width: 1081px) {
    .cs-bp-tbl-ttl,
    .cs-bp-tbl-ttl-dc-cap {
        width: 40% !important;
        margin: 20px 0 0 auto;
    }
    .cs-bp-tbl-ttl th {
        width: 25% !important;
    }
    .cs-bp-tbl-ttl td {
        width: 15% !important;
    }
}
@media (max-width: 1080px) {
    .cs-bp-tbl-ttl th {
        width: 50% !important;
    }
}

/* 支払方法区分アイコン */
.cs-bp-pmd-icon {
    width: 30px;
    text-align: center;
}

.cs-bp-card-no {
    width: 30% !important;
}
.cs-bp-card-expire {
    width: 50% !important;
}
.cs-bp-card-security-code {
    width: 15% !important;
}
@media (max-width: 1080px) {
    .cs-bp-card-no {
        width: 80% !important;
    }
    .cs-bp-card-expire {
        width: 100% !important;
    }
    .cs-bp-card-security-code {
        width: 80% !important;
    }
}


/* +++++++++++    border    +++++++++++  */
.cs-bd-none {
    border: none !important;
}
.cs-bd-1 {
    border: 1px solid #e7eaec !important;
}
.cs-bd-t-none {
    border-top: none !important;
}
.cs-bd-t-1 {
    border-top: 1px solid #e7eaec !important;
}
.cs-bd-t-1-double {
    border-top: double #e7eaec !important;
}
.cs-bd-b-none {
    border-bottom: none !important;
}
.cs-bd-b-1 {
    border-bottom: 1px solid #e7eaec !important;
}
.cs-bd-b-1-double {
    border-bottom: double #e7eaec !important;
}
.cs-bd-r-none {
    border-right: none !important;
}
.cs-bd-r-1 {
    border-right: 1px solid #e7eaec !important;
}
.cs-bd-r-1-double {
    border-right: double #e7eaec !important;
}
.cs-bd-l-none {
    border-left: none !important;
}
.cs-bd-l-1 {
    border-left: 1px solid #e7eaec !important;
}
.cs-bd-l-1-double {
    border-left-width: 0 !important;
    border-left: double #e7eaec !important;
}
@media screen and (min-width: 769px) {
    .cs-pc-border-top-none {
        border-top: none !important;
    }
}


/* +++++++++++    breadcrumb    +++++++++++  */
#cs-breadcrumb {
    position: relative;
    z-index: 2005;
}
@media (max-width: 768px) {
    .cs-breadcrumb {
        padding: 0 15px;
    }
}


/* +++++++++++    button    +++++++++++  */
.cs-btn-lg {
    line-height: 2.2;
}
.cs-btn-md {
    margin: 0 0 30px 0;
}

.cs-btn-radius {
    border-radius: 3px;
}

.cs-btn-gray {
    color: white !important;
    background: #b0b1b1 !important;
    border: 1px solid #b0b1b1 !important;
}
.cs-btn-supervisor {
    color: white !important;
    background: #7e7e7e !important;
    border: 1px solid #7e7e7e !important;
}
.cs-btn-delete {
    color: #eb5353;
    background-color: #eb5353;
    border-color: #eb5353;
}


/* +++++++++++    Certificate    +++++++++++  */
.cs-cert-pos-samp-tbl {
    margin: auto auto 0;
    width: 210px;
}
.cs-cert-pos-samp-tbl td {
    font-size: 17px;
    height: 30px;
    width: 50%;
}

.cs-cert-sp #page-wrapper {
    padding: 0;
}
.cs-cert-sp .navbar-btn {
    margin: 3px 0 0;
}
.cs-cert-sp .wrapper-content {
    display: flex;
    overflow-x: scroll;
    overflow-scrolling: touch;
    -webkit-overflow-scrolling: touch;
    padding: 0 !important;
    scroll-snap-type: x mandatory;
    width: 100%;
}
.cs-cert-sp .wrapper-content > div {
    flex: none;
    height: 100%;
    scroll-snap-align: center;
    width: 100%;
}
.cs-cert-sp .cs-cert-card {
    padding: 10px;
}

.cs-cert-card-header {
    margin: 0 0 10px;
}
.cs-cert-card-header td {
    height: 33px;
}
.cs-cert-card-header td.cs-cert-card-header-img-landscape {
    width: 150px;
}
.cs-cert-card-header td.cs-cert-card-header-img-portrait img {
    height: 100%;
    max-height: 100%;
    width: auto;
}
.cs-cert-card-header td.cs-cert-card-header-img-landscape img {
    height: auto;
    width: 100%;
    max-width: 100%;
}
.cs-cert-card-header-img-portrait,
.cs-cert-card-header-img-landscape {
    vertical-align: top;
}

.cs-cert-card-info {
    width: 65%;
}
.cs-cert-card-info th {
    width: 33%;
}
.cs-cert-card-info th.cs-cert-gender {
    width: 15%;
}
.cs-cert-card-info td {
    width: 67%;
}
.cs-cert-card-info td.cs-cert-birth-date {
    width: 40%;
}
.cs-cert-card-info td.cs-cert-gender {
    width: 15%;
}
.cs-cert-card-picture {
    width: 35%;
}
.cs-cert-card-picture img:not(.cs-cert-card-footer-img) {
    height: auto;
    max-width: 100%;
    width: 100%;
}
.cs-cert-card-picture td.cs-cert-card-footer-img {
    height: 33px;
    text-align: right;
}
.cs-cert-card-picture td.cs-cert-card-footer-img img {
    max-height: 100%;
    vertical-align: bottom;
    width: auto;
}

.cs-cert-info table th {
    background-color: #efefef;
    padding: 10px;
}
.cs-cert-info table td {
    padding: 10px;
}

.cs-cert-swipe {
    margin: 0 20px;
}

.cs-cert-no-result {
    padding: 20px 5px;
}


/* +++++++++++    checkbox    +++++++++++  */
.cs-th-select,
.cs-td-select {
    width: 35px;
}


/* +++++++++++    content    +++++++++++  */
.cs-fixed-bottom {
    background: #ffffff;
    border-top: 1px solid #dee2e6 !important;
    transition-duration: 0.4s;
    z-index: 2010;
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
    padding: 0;
}
.cs-content-footer {
    z-index: 2005;
}

div.content-heading {
    margin: 10px 0 20px 0;
    overflow: hidden;
    text-align: center;
}
div.content-heading span {
    display: inline-block;
    font-size: 20px;
    font-weight: bold;
    margin: 0 2.5em;
    padding: 0 1.5em;
    position: relative;
    text-align: center;
}
@media (max-width: 768px) {
    div.content-heading span {
        font-size: 18px;
    }
}
div.content-heading span::before,
div.content-heading span::after {
    background-color: #c4c4c4;
    content: '';
    height: 2px;
    position: absolute;
    top: 50%;
    width: 1000%;
}
div.content-heading span::before {
    right: 100%;
}
div.content-heading span::after {
    left: 100%;
}


/* +++++++++++    diff    +++++++++++  */
.cs-diff-before,
.cs-diff-after {
    color: #bf0404;
}
.cs-diff-before {
    background-color: #fffaea;
}
.cs-diff-after {
    background-color: #e6f8ea;
}


/* +++++++++++    display    +++++++++++  */
.cs-d-none {
    display: none !important;
}
.cs-d-table {
    display: table !important;
}


/* +++++++++++    DistributionTransferOperation    +++++++++++  */
.cs-dto-li {
    margin: 0 !important;
}
.cs-dto-li table {
    table-layout: fixed !important;
}
.cs-dto-li th {
    vertical-align: top !important;
}
.cs-dto-li th span.note {
    font-size: 12px;
    font-weight: normal;
}
.cs-dto-li th.sub-title {
    font-size: 12px;
    font-weight: normal;
}
.cs-dto-li th.note {
    font-size: 12px;
    font-weight: normal;
}
.cs-dto-li th.payment-method-paperless {
    background-color: #fceedb;
}
.cs-dto-li th.payment-method-credit {
    background-color: #fff3cd;
}
.cs-dto-li td {
    vertical-align: middle !important;
}
th.cs-dto-li-payment-method {
    width: 10.5%;
}
th.cs-dto-li-target-date {
    width: 10.5%;
}
.cs-dto-dtl-filename {
    width: 40%;
}
.cs-dto-dtl-datetime {
    width: 20%;
}
.cs-dto-dtl-btn {
    width: 5%;
}


/* +++++++++++    Event    +++++++++++  */
@media (max-width: 768px) {
    .cs-event-li-tbl {
        line-height: 20px;
    }
    .cs-event-li-tbl tr {
        border: 1px solid #e7eaec !important;
        border-radius: 0 !important;
        box-shadow: 6px 6px 5px -5px #c2c2c2;
        margin-bottom: 10px !important;
    }
    .cs-event-li-tbl td {
        padding: 0 10px 5px;
    }
}

.cs-event-stakeholder-label {
    width: 90% !important;
}
.cs-event-stakeholder-btn {
    width: 100% !important;
}
.cs-event-stakeholder-btn button {
    float: right;
}
@media (max-width: 768px) {
    .cs-event-stakeholder-label {
        padding-right: 20px;
        width: 80% !important;
    }
    .cs-event-stakeholder-btn {
        width: 15% !important;
    }
    .cs-event-stakeholder-btn button {
        margin-right: 5px !important;
    }
}
.cs-event-file-td {
    padding: 5px 10px;
}
.cs-event-label {
    width: 70% !important;
}
.cs-event-btns {
    width: 30% !important;
    text-align: right;
    padding-right: 20px;
}


/* +++++++++++    faq    +++++++++++  */
.cs-faq-content {
    padding: 10px 8px;
}
.cs-faq-list-icon {
    padding: 4px 0 0 0;
}
.cs-faq-toggle {
    width: 3%;
}
.cs-faq-toggle-icon {
    color: #c4c4c4;
}
.cs-faq-btn-inquiry {
    height: 70px;
    font-size: 22px;
    font-weight: bold;
    line-height: 2.5rem;
    padding-top: 13px !important;
}
.cs-faq-btn-inquiry > i {
    font-size: 34px;
    font-weight: bold;
    margin: -4px 10px 0 0;
    vertical-align: middle;
}
@media (max-width: 768px) {
    .cs-faq-btn-inquiry {
        font-size: 18px;
        height: auto;
        padding-bottom: 13px !important;
        width: 100%;
        white-space: normal;
    }
    .cs-faq-btn-inquiry > i {
        font-size: 120%;
    }
}
.cs-faq-tel {
    font-size: 38px;
    font-weight: bold;
}
.cs-faq-tel > i {
    margin-right: 8px;
}
.cs-faq-term {
    font-weight: bold;
    margin-top: 10px;
}


/* +++++++++++    fee    +++++++++++  */
.cs-fee-total {
    margin: 20px 0 0;
    width: 100% !important;
}
.cs-fee-total th,
.cs-fee-total td {
    width: 50% !important;
}


/* +++++++++++    font    +++++++++++  */
.cs-font-bold {
    font-weight: bold !important;
}


/* +++++++++++    form    +++++++++++  */
/* 日時フォーム */
.cs-form-datetime {
    width: 185px;
}
.cs-form-time {
    width: 85px;
}
@media (max-width: 768px) {
    .cs-form-term-datetime-to {
        margin-top: 5px;
    }
}
.cs-form-range {
    padding: 0 10px 0 0;
    width: 100px;
}
.cs-form-person-name {
    padding: 0 10px 0 5px;
    width: 25%;
}
@media (max-width: 768px) {
    .cs-form-person-name-mei {
        margin-top: 5px;
    }
}

.cs-form-person-name-label-multiple {
    width: 33px;
}
.cs-form-person-name-form-multiple {
    width: calc(100% - 40px);
}
.cs-form-birth-date-year-multiple {
    width: 100px;
}
.cs-form-birth-date-month-multiple {
    margin-left: 3px;
    width: 80px;
}
.cs-form-birth-date-day-multiple {
    margin-left: 3px;
    width: 80px;
}
.cs-form-filename-multiple {
    margin: 5px 0 -5px 0;
    white-space: normal;
    width: 240px;
}
.cs-form-date {
    width: 150px;
}

/* +++++++++++    height    +++++++++++  */
.cs-h-inherit {
    height: inherit !important;
}


/* +++++++++++    hover    +++++++++++  */
.cs-hover-common {
    background-color: #f5f5f6;
    border-color: #f5f5f6;
}


/* +++++++++++    image    +++++++++++  */
#cs-profile-image-preview-wrap {
    margin: 0 auto 20px;
    max-height: 640px;
    text-align: center;
    vertical-align: middle;
}
.cs-team-img img {
    max-height: 500px;
    width: auto;
}


/* +++++++++++    link    +++++++++++  */
/* タグリンク */
tr.cs-tr-link,
td.cs-td-link,
li.cs-li-link {
    cursor: pointer;
}
tr.cs-tr-link td a,
td.cs-td-link a,
li.cs-li-link a {
    display: block;
}

.cs-collapse-link {
    margin-left: 0 !important;
    padding-left: 5px;
}


/* +++++++++++    list table    +++++++++++  */
.cs-list-table {
    font-size: 14px;
}
.cs-list-table .lt-th {
    vertical-align: middle;
}

/* trホバー（w2uiの実装に合わせること） */
.cs-lt-tr-hover,
.cs-lt-tr-hover td {
    background-color: #e6f0fe !important;
    border-color: #e6f0fe !important;
}
@media screen and (min-width: 769px) {
    /* PCの場合のみチェック解除後にhoverのスタイルを適用するための対応 */
    .cs-lt-tr-hover-pc,
    .cs-lt-tr-hover-pc td {
        background-color: #e6f0fe !important;
        border-color: #e6f0fe !important;
    }
}
/* trチェック（w2uiの実装に合わせること） */
.cs-lt-tr-checked {
    background-color: #b7d5fe;
    border-color: #b7d5fe;
}

/* フッター */
tfoot .cs-lt-foot-th {
    background-color: #F5F5F6;
    border-top: 0;
}
tfoot .cs-lt-foot-td {
    border-top: 0;
}

/* チェックボックス */
th.cs-ls-check {
    min-width: 35px;
    width: 35px;
}
th.cs-ls-check,
td.cs-ls-check {
    position: relative;
}
th.cs-ls-check label,
td.cs-ls-check label {
    display: block;
    margin: 10px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
th.cs-ls-check input[type="checkbox"],
td.cs-ls-check input[type="checkbox"],
th.cs-ls-check input[type="radio"],
td.cs-ls-check input[type="radio"] {
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

th.cs-lt-sort-th {
    width: 50px;
}

/* sticky */
table.lt-table-sticky {
    border-collapse: separate;
    border-spacing: 0;
    border-top: 0 !important;
}
table.lt-table-sticky .lt-th {
    border-bottom: 1px solid #e7eaec;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
}
table.lt-table-sticky th.lt-th-sticky {
    border-right: 1px solid #e7eaec !important;
    z-index: 120;
}
table.lt-table-sticky-matrix thead th[col = "0"] {
    width: 200px !important;
}
table.lt-table-sticky th.lt-th-sticky + th {
    border-left: 0 !important;
}
table.lt-table-sticky td.lt-td-sticky {
    border-right: 1px solid #e7eaec !important;
    position: -webkit-sticky;
    position: sticky;
    z-index: 90;
}
table.lt-table-sticky td.lt-td-sticky + td {
    border-left: 0 !important;
}
table.lt-table-sticky-matrix td.lt-td-sticky[col="0"] {
    background-color: #f5f5f6;
    font-weight: bold;
}

/* +++++++++++    label    +++++++++++  */
/* @todo 個別実装箇所の修正後、削除 */
.cs-label-radio,
.cs-label-checkbox {
    margin: 0 0 0 5px !important;
}

.cs-label-past {
    color: #eb5568;
    background-color: #eb5568;
    border-color: #eb5568;
}
.cs-label-now {
    color: #26b394;
    background-color: #26b394;
    border-color: #26b394;
}
.cs-label-feature {
    color: #2fb7c7;
    background-color: #2fb7c7;
    border-color: #2fb7c7;
}


/* +++++++++++    Login    +++++++++++  */
.cs-login {
    margin: 0 auto;
}

.cs-login-help-link {
    margin-top: 15px;
}
.cs-login-help-link ul {
    margin-bottom: 0;
    padding-left: 15px;
}
.cs-login-help-link ul li {
    list-style: none;
    padding-left: 15px;
    position: relative;
}
.cs-login-help-link ul li:not(:first-child) {
    margin-top: 5px;
}
.cs-login-help-link ul li:before {
    border-color: transparent transparent transparent #455a64;
    border-style: solid;
    border-width: 5px;
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    top: .35em;
    left: 0;
}


/* +++++++++++    logo    +++++++++++  */
@media screen and (min-width: 769px) {
    .cs-logo {
        width: 200px;
    }
}
@media screen and (max-width: 320px) {
    .cs-logo {
        margin-left: 10px !important;
        width: 100px;
    }
}
@media screen and (min-width: 321px) and (max-width: 768px) {
    .cs-logo {
        margin-left: 10px !important;
        width: 135px;
    }
}


/* +++++++++++    Manual    +++++++++++  */
.cs-manual-li-td {
    padding: 5px 10px;
}


/* +++++++++++    margin    +++++++++++  */
.cs-m-t-none {
    margin-top: 0 !important;
}
.cs-m-t-xs {
    margin-top: 5px !important;
}
.cs-m-t-sm {
    margin-top: 10px !important;
}
.cs-m-t {
    margin-top: 15px !important;
}
.cs-m-t-md {
    margin-top: 20px !important;
}
.cs-m-t-lg {
    margin-top: 30px !important;
}
.cs-m-t-n-xs {
    margin-top: -5px !important;
}
.cs-m-t-n-sm {
    margin-top: -10px !important;
}
.cs-m-t-n {
    margin-top: -15px !important;
}
.cs-m-b-none {
    margin-bottom: 0 !important;
}
.cs-m-b-xs {
    margin-bottom: 5px !important;
}
.cs-m-b-sm {
    margin-bottom: 10px !important;
}
.cs-m-b {
    margin-bottom: 15px !important;
}
.cs-m-b-md {
    margin-bottom: 20px !important;
}
.cs-m-b-lg {
    margin-bottom: 30px !important;
}
.cs-m-b-n-xs {
    margin-bottom: -5px !important;
}
.cs-m-b-n-sm {
    margin-bottom: -10px !important;
}
.cs-m-b-n {
    margin-bottom: -15px !important;
}
.cs-m-r-none {
    margin-right: 0 !important;
}
.cs-m-r-xs {
    margin-right: 5px !important;
}
.cs-m-r-sm {
    margin-right: 10px !important;
}
.cs-m-r {
    margin-right: 15px !important;
}
.cs-m-r-md {
    margin-right: 20px !important;
}
.cs-m-r-lg {
    margin-right: 30px !important;
}
.cs-m-r-n-xs {
    margin-right: -5px !important;
}
.cs-m-r-n-sm {
    margin-right: -10px !important;
}
.cs-m-r-n {
    margin-right: -15px !important;
}
.cs-m-l-none {
    margin-left: 0 !important;
}
.cs-m-l-xs {
    margin-left: 5px !important;
}
.cs-m-l-sm {
    margin-left: 10px !important;
}
.cs-m-l {
    margin-left: 15px !important;
}
.cs-m-l-md {
    margin-left: 20px !important;
}
.cs-m-l-lg {
    margin-left: 30px !important;
}
.cs-m-l-n-xs {
    margin-left: -5px !important;
}
.cs-m-l-n-sm {
    margin-left: -10px !important;
}
.cs-m-l-n {
    margin-left: -15px !important;
}


/* +++++++++++    Menu    +++++++++++  */
/* メニューコンテンツ */
.cs-wrapper-content {
    -ms-flex: 0 0 98%;
    flex: 0 0 98%;
    max-width: 98%;
    margin: auto auto 0;
}
.cs-mn-h-auth-list {
    margin: auto;
}

/* サイドメニュー */
@media (max-width: 768px) {
    .cs-mn-side-party-name {
        padding: 6px 10px;
    }
}

.cs-mn-side-tab-event-off {
    pointer-events: none;
}

.cs-mn-side-li {
    padding-bottom: 6px;
}

.cs-mn-side-btn {
    padding: 10px 6px !important;
}
.cs-mn-side-btn > li {
    border-radius: 3px;
}
.cs-mn-side-btn li.active > a {
    background: #19b293;
    border-radius: 3px 3px 0 0;
}
.cs-mn-side-btn ul li {
    border-top: none;
}
.cs-mn-side-btn ul li:last-child {
    border-radius: 0 0 3px 3px;
    padding-bottom: 0 !important;
}
.cs-mn-side-btn ul a {
    color: #455a64;
    padding-left: 34px !important;
}
.cs-mn-side-btn li ul,
.cs-mn-side-btn li li {
    background: #ffffff;
}
.cs-mn-side-btn a.on {
    font-weight: normal;
}
.cs-mn-side-btn span.arrow:before {
    color: #ffffff;
}
@media (max-width: 768px) {
    .cs-mn-side-btn span.nav-label {
        width: 85%;
    }
}

.cs-mn-side-li-icon::before {
    color: #ffffff;
}

.cs-mn-side-unimplemented {
    color: #ff0000;
}

/* メニューヘッダ */
/* 顔写真 */
.cs-prof-elem-img {
    height: 42px;
    object-fit: cover;
}
@media (max-width: 768px) {
    .cs-prof-elem-img {
        height: 32px;
    }
}
/* 顔写真（ドロップダウン） */
.cs-prof-elem-img-dd {
    height: 76px;
    object-fit: cover;
}
@media (max-width: 768px) {
    .cs-prof-elem-img-dd {
        height: auto;
        max-width: 100%;
        width: 100%;
    }
}

/* メンバー情報（ドロップダウン） */
.cs-prof-elem-member-info-dd {
    padding-right: 10px !important;
}

/* メニューヘッダアイコン＆顔写真 */
@media (max-width: 768px) {
    .cs-sp-nav-right > li {
        float: left;
    }
}

/* マウスホバーで文字色変更（a:hoverのオーバーライド用） */
.cs-menu-hover:hover a {
    color: #19b293;
}

/* ヘッダメニュー */
.cs-header-menu-icon {
    padding: 10px !important;
    text-align: center;
}
@media (max-width: 768px) {
    .cs-header-menu-icon {
        padding: 10px 0 10px 5px !important
    }
}
.cs-header-menu-icon .cs-icon-name {
    color:#fff !important;
    font-size: 11px;
    margin-top: 3px;
}
@media (max-width: 768px) {
    .cs-header-menu-icon .cs-icon-name {
        font-size: 9px;
    }
}

/* +++++++++++    note    +++++++++++  */
.cs-before-note {
    margin: 0 0 6px;
    white-space: normal;
}
.cs-after-note {
    margin: 6px 0 0;
    white-space: normal;
}


/* +++++++++++    padding    +++++++++++  */
.cs-p-none {
    padding: 0 !important;
}
.cs-p-xs {
    padding: 10px !important;
}
.cs-p-t-none {
    padding-top: 0 !important;
}
.cs-p-t {
    padding-top: 15px !important;
}
.cs-p-b-none {
    padding-bottom: 0 !important;
}
.cs-p-b {
    padding-bottom: 15px !important;
}
.cs-p-r-none {
    padding-right: 0 !important;
}
.cs-p-r-xxs {
    padding-right: 5px !important;
}
.cs-p-l-none {
    padding-left: 0 !important;
}
.cs-p-l-xxs {
    padding-left: 5px !important;
}


/* +++++++++++    Profile    +++++++++++  */
.cs-profile-img {
    margin: 0 auto 20px;
    text-align: center;
    width: 100%;
}
@media only screen and (max-width: 991px) {
    .cs-profile-img {
        max-width: 360px;
        width: 75%;
    }
}
.cs-profile-img > img {
    height: auto;
    max-width: 100%;
}
.cs-profile-img > .latest-update-datetime {
    background-color: #ffffff;
    margin: auto;
    padding: 0 6px 6px;
}
.cs-profile-mail-address-label {
    width: 90% !important;
}
.cs-profile-mail-address-btn button {
    float: right;
}
@media (max-width: 768px) {
    .cs-profile-mail-address-label {
        padding-right: 20px;
        width: 80% !important;
    }
    .cs-profile-mail-address-btn {
        width: 15% !important;
    }
    .cs-profile-mail-address-btn button {
        margin-right: 5px !important;
    }
}


/* +++++++++++    ProxyApply    +++++++++++  */
.cs-draft-list-form-table {
    min-width: 100%;
    table-layout: fixed;
}
/*@todo 直書き以外での対応を検討*/
.cs-draft-list-form-table th:first-of-type {
    width: 140px;
}
.cs-draft-list-form-table th:nth-of-type(4) {
    width: 430px;
}
.cs-draft-list-form-table th:nth-of-type(5) {
    width: 430px;
}
.cs-draft-list-form-table th:nth-of-type(6) {
    width: 430px;
}
.cs-draft-list-form-table td {
    width: 400px;
    min-height: 200px;
}
.cs-draft-list-form-table th {
    width: 400px;
}
.cs-draft-list-form-table th.lt-th-sticky,
.cs-draft-list-form-table td.lt-td-sticky {
    left: 0;
}

.cs-member-proxy-apply-continue-li .cs-member-proxy-apply-reserve-li .cs-member-proxy-apply-select {
    margin: 0 auto;
    width: 5%;
}


/* +++++++++++    radio    +++++++++++  */
/* tdラジオボタン */
td.cs-td-radio {
    cursor: pointer;
    padding: 0 !important;
}
td.cs-td-radio label {
    cursor: pointer;
    display: block;
    padding: .75rem;
}


/* +++++++++++    search    +++++++++++  */
.cs-search-condition {
    border: none !important;
}
.cs-search-condition th,
.cs-search-condition td {
    background-color: #ffffff !important;
}
@media screen and (min-width: 1081px) {
    .cs-search-condition th {
        width: 10%;
        vertical-align: middle !important;
    }
    .cs-search-condition td {
        border-left: none !important;
    }
    .cs-search-condition tr:first-child th,
    .cs-search-condition tr:first-child td {
        border-top: none !important;
    }
    .cs-search-condition tr:last-child th,
    .cs-search-condition tr:last-child td {
        border-bottom: none !important;
    }
}
@media (max-width: 1080px) {
    .cs-search-condition th,
    .cs-search-condition td {
        border: none !important;
        border-bottom: 1px solid #e7eaec !important;
        display: block;
        height: auto;
        width: 100%;
    }
    .cs-search-condition tr:last-child td {
        border: none !important;
    }
}
.cs-search-condition-partition {
    border-top: 1px solid #d9d8d8;
    margin: 0 calc(50% - 50vw);
    width: 100vw;
}

.cs-search-result {
    height: 600px;
}


/* +++++++++++    stepbar    +++++++++++  */
@media screen and (min-width: 769px) {
    .cs-step {
        display: none !important;
    }
}
@media (max-width: 768px) {
    .cs-step {
        min-height: 30px;
    }
    .cs-step-title {
        padding: 3px 10px;
        width: 15%;
    }
    .cs-step-name {
        padding: 3px 10px 3px 0;
        width: 85%;
    }
}


/* +++++++++++    table    +++++++++++  */
/* ボーダー */
.cs-border-top-none {
    margin-bottom: 30px;
}

.cs-tbl-td-bd-side-none {
    border: none;
    border-bottom: 1px solid #e7eaec !important;
}


/* +++++++++++    text    +++++++++++  */
.cs-txt-deco-under {
    text-decoration: underline;
}


/* +++++++++++    textarea    +++++++++++  */
.cs-textarea {
    border: 2px solid #e7eaec;
    overflow-x: auto;
    overflow-y: auto;
    padding: 17px;
    width: 100%;
    word-break: break-all;
}

.cs-inline-textarea {
    overflow-x: auto;
    overflow-y: auto;
    white-space: normal;
    word-break: break-all;
}


/* +++++++++++    title    +++++++++++  */
.cs-title {
    margin: 10px 0 0 !important;
    padding-bottom: 20px !important;
    font-size: 25px;
}
@media (max-width: 768px) {
    .cs-title {
        font-size: 19px;
        padding-bottom: 15px !important;
    }
}


/* +++++++++++    white space    +++++++++++  */
.cs-white-space-normal {
    white-space: normal !important;
}


/* +++++++++++    width    +++++++++++  */
.cs-w-auto {
    width: auto !important;
}

/* +++++++++++    QualifierList    +++++++++++  */
.cs-qualifier-list-attention {
    background-color: #f7bbc1;
}