/* dashboard */
.dashboard-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.dashboard-left-sidebar-wrapper {
    position: sticky;
    top: 50px;
    left: 0;
    height: 100vh;
    display: none;
    padding-top: 20px;
    padding-bottom: 40px;
}

.dashboard-left-sidebar-wrapper ul {
    list-style: none;
    padding-inline-start: 20px!important;
    margin-inline-end: 20px!important;
    font-size: 13px;
}

.dashboard-left-sidebar-wrapper li {
    margin: auto;
    height: 40px;
    position: relative;
}

.dashboard-left-sidebar-wrapper a {
    color: #888888;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    line-height: 40px;
    padding-left: 10px;
}

.dashboard-left-sidebar-wrapper li:hover {
    background-color: #ece7e2;
    border-radius: 4px;
}

.dashboard-left-sidebar-wrapper li:hover a {
    color: #444444;
}

.dashboard-left-sidebar-staff-title {
    font-size: 12px;
    font-weight: 600;
    margin: 20px auto 5px;
    padding-inline-start: 30px!important;
    margin-inline-end: 20px!important;
}

.dashboard-right-sidebar-wrapper {
    display: none;
}

.dashboard-title {
    margin-left: 10px;
    margin-bottom: 5px;
    font-weight: 300;
}

.dashboard-title-number {
    margin-right: 5px;
}

.dashboard-center-wrapper {
    position: relative;
    width: 100%;
    margin: 10px auto;
    padding: 0 15px;
}

.dashboard-center-container {
    margin: 10px auto;
    padding: 20px 15px;
    background-color: #fff;
    border-radius: 5px;
}

.dashboard-center-container__list {
    margin-top: 5px;
    padding-inline-start: 15px;
    font-size: 13px;
    color: #666666;
}

@media (min-width:768px) {
    .dashboard-left-sidebar-wrapper {
        display: block;
        width: 20%;
        overflow: scroll;
    }
    .dashboard-right-sidebar-wrapper {
        display: block;
        width: 20%;
        overflow: scroll;
    }
    .dashboard-center-wrapper {
        padding: 5px 20px;
        width: 80%;
    }
}

.dashboard-center-back-btn {
    position: relative;
    padding: 5px 10px;
    margin: 0px auto 5px 0;
    font-weight: 300;
    text-align: left;
    font-size: 13px;
    height: 30px;
    width:-moz-fit-content; /* Firefox */
    width:fit-content; /* other browsers */
}

.dashboard-center-back-btn a {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.dashboard-center-btn {
    position: relative;
    border: solid 1px #c3b5a5;
    border-radius: 4px;
    margin: 0 0 10px auto;
    background-color: #fff;
    font-weight: 300;
    text-align: center;
    width: 200px;
    max-width: 150px;
    height: 40px;
    color: #bcad9b;
    font-size: 13px;
    line-height: 40px;
}

.dashboard-center-btn:hover {
    background-color: #c3b5a5;
    color: #fff;
}

.dashboard-center-btn a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    width: 100%;
    height: 100%;
}

.dashboard-home-customer-link-btn {
    position: relative;
    padding: 8px 4px;
    margin-bottom: 20px;
    background-color: #dddddd;
    border-radius: 100px;
    text-align: center;
}

.dashboard-home-customer-link-btn a {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #fff;
    line-height: 40px;
    font-size: 13px;
    cursor: pointer;
}

.dashboard-home-customer-link-btn i {
    margin-right: 10px;
}

.dashboard-home-title {
    margin-top: 40px;
    margin-bottom: 5px;
    font-size: 16px;
}

.dashboard-home-title i {
    margin-right: 5px;
}

.dashboard-home-info-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.dashboard-home-info-box {
    background-color: #ece7e2;
    border-radius: 4px;
    margin: 4px;
    padding: 10px 4px;
    width: 50%;
    text-align: center;
}

@media (min-width:768px) {
    .dashboard-home-info-wrapper {
        justify-content: left;
    }    
    .dashboard-home-info-box {
        width: 25%;
    }
}

.dashboard-home-info-number {
    font-size: 40px;
}

.dashboard-home-info-number-sm {
    font-size: 20px;
}

.dashboard-home-graph {
    margin: 20px auto;
    max-height: 300px;
    width: 100%;
}

.dashboard-brand-container {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 20px;
}

.dashboard-brand-username {
    color: #888888;
    font-weight: 300;
    font-size: 13px;
}

.dashboard-brand-username i.dashboard-brand-username-ok {
    margin-left: 2px;
    padding: 0 5px;
    color: #c3b5a5;
    cursor: pointer;
}

.dashboard-brand-username i.dashboard-brand-username-ng {
    margin-left: 8px;
    color: #CC0033;
    cursor: pointer;
}

.dashboard-brand-icon {
    width: 45px;
    height: 45px;
    margin-right: 15px;
}

.dashboard-brand-icon img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.dashboard-brand-list {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    height: 70px;
    padding: 10px;
}

.dashboard-brand-list i {
    font-size: 18px;
}

.dashboard-brand-list-title {
    width: 100%;
    margin-left: 30px;
    font-weight: 500;
}

.dashboard-brand-list-title i {
    margin-left: 8px;
    font-size: 13px;
    color: #d34d74;
}

.dashboard-brand-list-detail {
    font-weight: 300;
    font-size: 13px;
    text-decoration: none;
}

.dashboard-brand-list .dashboard-brand-list-icon-fixed {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    color: #888888;
}

.dashboard-brand-list-txt {
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    color: #888888;
    font-size: 13px;
}

.dashboard-brand-list-txt .unregistered {
    color: #d34d74;
}

.dashboard-brand-list a {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0 20px;
    text-decoration: none;
    color: #888888;
    font-weight: 300;
    line-height: 40px;
    font-size: 13px;
    cursor: pointer;
}

.dashboard-brand-list:hover {
    background-color: #f3f0ec;
}

.dashboard-profile-title {
    margin-top: 40px;
    margin-bottom: 5px;
    font-size: 15px;
}

.dashboard-profile-txt {
    font-size: 13px;
    word-break: break-all;
    color: #666666;
}

.dashboard-photo-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.dashboard-photo-item {
    position: relative;
    padding: 10px;
    width: 50%;
}

.dashboard-photo-item img {
    width: 100%;
    height: 100%;
}

@media (min-width:768px) {
    .dashboard-photo-item {
        width: 25%;
    }
}

.dashboard-photo-item-icon {
    position: absolute;
    top: 10px;
    right: 15px;
    padding: 5px;
    z-index: 99;
    font-size: 18px;
    cursor: pointer;
}

.dashboard-center-container .form-group label {
    margin-top: 10px;
}

.dashboard-form-txt {
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 16px;
}

.dashboard-form-txt i {
    margin-right: 10px;
}

.dashboard-form-txt i.help {
    padding: 0 5px;
    color: #888888;
    cursor: pointer;
}

.dashboard-form-flex {
    display: flex;
}

.dashboard-form-flex .form-group {
    flex: auto;
}

.dashboard-form-flex .dashboard-form-left {
    width: 100%;
    margin-right: 5px;
}

.dashboard-form-flex .dashboard-form-center {
    width: 100%;
}

.dashboard-form-flex .dashboard-form-right {
    width: 100%;
    margin-left: 5px;
}

.dashboard-center-container .submit-btn {
    margin: 20px auto auto;
}

.dashboard-form-title {
    font-weight: 600;
    margin: 20px auto auto;
}

.dashboard-form-title i {
    margin-right: 10px;
}

/* account */
.dashboard-account-img {
    position: relative;
}

.dashboard-account-bg {
    position: relative;
    width: 100%;
}

.dashboard-account-bg img {
    width: 100%;
    aspect-ratio: 4/1;
    object-fit: cover;
}

.dashboard-account-icon {
    position: relative;
    margin-left: 15px;
    margin-top: -15px;
}

.dashboard-account-icon img {
    width: 75px;
    height: 75px;
    object-fit: cover;
    border-radius: 50%;
    border: solid 4px #fff;
}

.dashboard-account-icon label img, .dashboard-account-bg label img {
    cursor: pointer;
}

.dashboard-account-icon input[type=file], .dashboard-account-bg input[type=file] {
    display: none;
}

.black-bg-for-bg {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: #666666;
    opacity: .5;
    color: #fff;
    text-align: center;
    cursor: pointer;
}

.black-bg-txt-for-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    font-size: 28px;
    color: #fff;
}

.black-bg-for-thumbnail {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 75px;
    height: 75px;
    background-color: #666666;
    border-radius: 50%;
    border: solid 4px #fff;
    opacity: .5;
    color: #fff;
    text-align: center;
    cursor: pointer;
}

.black-bg-txt-for-thumbnail {
    position: absolute;
    top: 24px;
    left: 27px;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
}

.dashboard-payment-wrapper {
    margin-top: 20px;
}

.dashboard-payment-container {
    margin-bottom: 20px;
}

.dashboard-payment-container-title {
    font-size: 18px;
    font-weight: 600;
}

.dashboard-payment-container-title-icon {
    font-size: 13px;
    color: #888888;
    padding: 2px 5px;
    cursor: pointer;
}

.dashboard-payment-container-flex-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.dashboard-payment-container-detail {
    margin: 10px auto 10px 0;
    font-size: 20px;
    font-weight: 600;
    text-align: left;
}

.dashboard-payment-container-sub {
    font-size: 12px;
    color: #888888;
}

.dashboard-payment-container-detail-btn {
    position: relative;
    width: 100px;
    text-align: center;
    padding: 8px 10px;
    border: solid 1px #c3b5a5;
    border-radius: 4px;
    color: #c3b5a5;
}

@media (min-width:768px) {
    .dashboard-payment-container-detail-btn {
        width: 140px;
    }
}

.dashboard-payment-container-detail-btn a {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0 20px;
    font-weight: 300;
    line-height: 40px;
    font-size: 13px;
}

.dashboard-payment-container-entry-btn {
    position: relative;
    width: 100px;
    text-align: center;
    padding: 8px 10px;
    background-color: #c3b5a5;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
}

@media (min-width:768px) {
    .dashboard-payment-container-entry-btn {
        width: 140px;
    }
}

.dashboard-payment-container-entry-btn a {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0 20px;
    font-weight: 300;
    line-height: 40px;
}

.dashboard-payment-info {
    color: #888888;
    font-size: 12px;
    margin-top: 20px;
    margin-bottom: 10px;
}

.dashboard-payment-list-container {
    font-size: 13px;
    text-align: center;
    border-top: solid 1px #eeeeee;
}

.dashboard-payment-list-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 0;
    border-bottom: solid 1px #eeeeee;
    font-size: 12px;
}

.dashboard-payment-list-status-info {
    width: 30%;
    color: #888888;
}

.dashboard-payment-list-date-info {
    width: 35%;
    color: #888888;
}

.dashboard-payment-list-payment-info {
    width: 35%;
    color: #d34d74;
}

.dashboard-payment-list-br {
    display: block;
}

@media (min-width:768px) {
    .dashboard-payment-list-br {
        display: none;
    }
}

.dashboard-payment-list-detail-btn-box {
    width: 20%;
}

.dashboard-payment-list-payment-detail-btn {
    position: relative;
    text-decoration: underline;
    padding: 5px 10px;
}

.dashboard-payment-list-payment-detail-btn a {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 5px 10px;
    font-weight: 300;
    line-height: 40px;
}

.dashboard-payment-modal-open {
    background-color: #fff;
    color: #ed7483;
    text-decoration: underline;
    margin-top: 4px;
    font-size: 11px;
}

.dashboard-payment-modal-area {
    display: none;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.dashboard-payment-modal-bg {
    width: 100%;
    height: 100%;
    background-color: rgba(30,30,30,0.9);
}

.dashboard-payment-modal-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
    width: calc(100% - 30px);
    max-width: 500px;
    padding: 20px 10px;
    background-color: #fff;
    border-radius: 4px;
    line-height: 1.2;
}

.dashboard-payment-modal-content {
    font-size: 13px;
}

.dashboard-payment-modal-content-img img {
    width: 100%;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.dashboard-payment-modal-content-txt {
    margin-top: 15px;
    padding: 0 10px;
}

.dashboard-payment-modal-open a {
    cursor: pointer;
}

.dashboard-payment-modal-close {
    position: absolute;
    top: 0px;
    right: 5px;
    cursor: pointer;
    font-size: 18px;
    padding: 4px;
}

.dashboard-payment-modal-btn-box {
    display: flex;
    justify-content: flex-end;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    padding-top: 40px;
}

.dashboard-payment-modal-attention {
    font-size: 11px;
    color: #888888;
    margin-top: 10px;
}

.dashboard-payment-modal-attention-checkbox {
    margin-top: 20px;
}

.dashboard-payment-modal-back-btn {
    background-color: #efefef;
    border-radius: 4px;
    color: #666666;
    position: relative;
    padding: 8px 15px;
    cursor: pointer;
    margin-right: 10px;
}

.dashboard-payment-modal-list {
    margin: 5px auto;
    display: flex;
    justify-content: flex-end;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
}

.dashboard-payment-modal-list-end {
    border-top: 1px solid #dddddd;
    padding-top: 5px;
}

.dashboard-payment-modal-list-title {
    width: 40%;
}

.dashboard-payment-modal-list-detail {
    width: 60%;
    text-align: right;
}

.dashboard-payment-modal-list-detail-highlight {
    color: #d34d74;
}

.dashboard-modal-ticket-wrapper {
    position: relative;
}

.dashboard-modal-ticket-wrapper .date {
    color: #888888;
    font-size: 11px;
}

.dashboard-modal-ticket-wrapper .txt {
    margin-top: 10px;
}

.dashboard-modal-ticket-wrapper .detail {
    margin-top: 10px;
    font-weight: 600;
}

.brand-edit-container .brand-edit-image-box {
    margin: 0 auto;
    text-align: center;
    width: 100%;
    position: relative;
    max-width: 400px;
    cursor: pointer;
}

.brand-edit-container .brand-edit-image-box img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    overflow: hidden;
    border-radius: 50%;
    border: solid 1px #dddddd;
}

.brand-edit-container .brand-edit-image-box input[type=file] {
    display: none;
}

.brand-edit-container .brand-image-bg-txt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    font-size: 32px;
    color: #fff;
    cursor: pointer;
}

/* pricing */
.pricing-title {
    text-align: center;
    font-size: 1.3rem;
    padding: 10px;
    margin-bottom: 10px;
    font-weight: 600;
}

.pricing-table td, .pricing-table th {
    padding: 1rem 0.75rem;
    text-align: center;
}

.pricing-table head {
    text-align: center;
}

.pricing-table__header {
    text-align: center;
    font-size: 14px;
}

@media (min-width:768px) {
    .pricing-table__header {
        font-size: 18px;
    }
}

.pricing-table__column {
    background-color: #f5f5f5;
}

.pricing-table__column__txt {
    font-size: 16px;
    font-weight: 600;
}

@media (min-width:768px) {
    .pricing-table__column__txt {
        font-size: 18px;
    }
}

.pricing-table__column--title {
    text-align: left!important;
}

.pricing-table__row--header .submit-btn {
    margin: 0;
}

.pricing-table__row--title {
    font-weight: 600;
    font-size: 16px;
    padding: .5rem 0.75rem!important;
}

@media (min-width:768px) {
    .pricing-table__row--title {
        font-size: 18px;
    }
}

.pricing-table__spacer {
    width: 1.5rem;
}

.pricing-table__column.v--plan {
    min-width: 2rem;
    max-width: 180px;
}

.pricing-table__row--feature:hover {
    background-color: rgba(187, 187, 187, 0.3);
}

.pricing-box {
    margin-top: 40px;
}

.pricing-box .pricing-box__title {
    font-size: 20px;
    font-weight: 600;
}

.pricing-box .pricing-box__price {
    font-size: 20px;
    font-weight: 600;
    margin: 20px auto;
}

@media (min-width:768px) {
    .pricing-wrapper-sm {
        display: none;
    }
}

.pricing-box__txt__wrapper {
    margin: 30px auto;
}

.pricing-box .pricing-box__txt {
    margin: 2px auto;
}

.pricing-box .pricing-box__txt__style {
    border-bottom: 2px dotted #bbbbbb;
}

.pricing-box .pricing-box__txt i {
    margin-right: 5px;
}

.plan-txt-box {
    border: solid 1px #dddddd;
    border-radius: 4px;
    padding: 10px;
    max-height: 120px;
    overflow-y: scroll;
}

.plan-txt-box .title {
    font-weight: 600;
    color: #666666;
}

/* qr */
.qr-wrapper {
    margin: auto;
    text-align: center;
}

.qr-container {
    margin: auto;
    padding: 20px 20px 10px 20px;
    max-width: 360px;
    width: 100%;
    border: solid 2px #a8937c;
}

.qr-wrapper_title {
    font-size: 32px;
    margin: 5px auto 20px;
}

.qr-wrapper_subtitle {
    font-size: 18px;
    margin: 10px auto 5px;
    color: #888888;
}

.qr-container .img {
    max-width: 100px;
    margin: auto;
}

.qr-container .img img {
    width: 100%;
}

.qr-wrapper_border {
    max-width: 400px;
    width: 100%;
    border: dashed 1px #efefef;
    padding: 20px;
    margin: auto;
}

.qr-wrapper_txt {
    text-align: left;
    margin: 20px auto;
    font-size: 10px;
}

.qr-wrapper_url-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #f5f5f5;
    border-radius: 4px;
    margin: auto auto 10px;
    padding: 8px 4px;
    font-size: 9px;
}

.qr-wrapper_url-box .txt {
    width: 80%;
    padding: 0 5px;
}

.qr-wrapper_url-box i {
    margin-left: 5px;
}

.qr-wrapper_url-box .img {
    width: 20%;
}

.qr-wrapper_url--txt {
    color: #888888;
    font-size: 11px;
    border-bottom: dotted 1px #dddddd;
}

.qr-wrapper_logo {
    color: #888888;
    font-size: 10px;
    margin-top: 10px;
}

.qr-wrapper_logo--txt {
    font-family: 'Caveat', cursive;
    font-size: 16px;
}

.qr_title {
    margin-top: 10px;
    font-size: 14px;
    color: #666666;
}


/* dashboard tab */
.dashboard-tab-box-item {
    padding: 8px 20px;
    border-radius: 20px;
    background-color: #dddddd;
    color: #888888;
    margin-right: 5px;
    cursor: pointer;
    font-size: 12px;
}

@media (min-width:768px) {
    .dashboard-tab-box-item {
        font-size: 13px;
        margin-right: 10px;
        text-align: center;
    }
}

/*選択されているタブのスタイルを変える*/
.dashboard-tab-box-item_checked {
    padding: 8px 20px;
    border-radius: 20px;
    background-color: #bcad9b;
    color: #fff;
    margin-right: 5px;
    cursor: pointer;
    font-size: 12px;
}

@media (min-width:768px) {
    .dashboard-tab-box-item_checked {
        font-size: 13px;
        margin-right: 10px;
        text-align: center;
    }
}

.tab_content {
    display: none;
    clear: both;
    overflow: hidden;
}

.tab_content_checked {
    display: block;
}

/* dashboard list */
.dashboard-list-box-wrapper {
    display: flex;
    border-bottom: solid 1px #eeeeee;
    position: relative;
}

.dashboard-list-box {
    position: relative;
    margin: auto;
    padding: 10px 10px 10px 20px;
    min-height: 40px;
    height: auto;
    cursor: pointer;
    width: 100%;
}

.dashboard-list-box a.dashboard-list-box_link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.dashboard-list-box_icon {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    z-index: 1;
    width: 30px;
    aspect-ratio: 1/1;
    font-size: 16px;
    line-height: 40px;
    text-align: center;
}

.dashboard-list-box_icon i {
    width: 100%;
    height: 100%;
    object-fit: cover;
    color: #888888;
}

.dashboard-list-box_url i {
    color: #33CC99;
    font-weight: 600;
    padding-right: 5px;
}

@media (min-width:768px) {
    .dashboard-list-box {
        padding: 10px 10px 10px 30px;
    }    
    .dashboard-list-box_url {
        margin-right: 100px;
    }
    .dashboard-list-box_icon {
        left: 10px;
        font-size: 18px;
    }
}

.dashboard-list-box_date {
    font-size: 11px;
    color: #888888;
}

.dashboard-box-number-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
}

.dashboard-box-number-box__txt {
    background-color: #dddddd;
    border-radius: 10px;
    font-weight: 400;
    padding: 2px 10px;
    font-size: 10px;
    color: #888888;
}

.dashboard-list-box_memo {
    background-color: #bcad9b;
    color: #fff;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 10px;
}

.dashboard-box-img {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    z-index: 1;
    width: 50px;
    aspect-ratio: 1/1;
}

.dashboard-box-img img {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    object-fit: cover;
}

@media (min-width:768px) {
    .dashboard-box-img {
        width: 80px;
    }
    .dashboard-box-name {
        margin-right: 100px;
    }
}

.dashboard-dropdown-wrapper {
    display: none;
    position: absolute;
    top: 50px;
    right: 0;
    width: 40%;
    min-width: 150px;
    max-width: 200px;
    background-color: #fff;
    border: solid 1px #dddddd;
    border-radius: 5px;
    z-index: 4;
    box-shadow:0 0 5px #dddddd;
    -webkit-box-shadow:0 0 5px #dddddd;
    -moz-box-shadow:0 0 5px #dddddd;
    padding: 5px 0;
}

.dashboard-dropdown-wrapper::before {
    content: "";
    position: absolute;
    top: -20px;
    right: 16px;
    border: 10px solid transparent;
    border-bottom: 10px solid #fff;
    z-index: 2;
}

.dashboard-dropdown-wrapper::after {
    content: "";
    position: absolute;
    top: -24px;
    right: 14px;
    border: 12px solid transparent;
    border-bottom: 12px solid #dddddd;
    z-index: 1;
}

.dashboard-list-dropdown-wrapper {
    top: 40px;
}

ul.dashboard-dropdown-box {
    list-style: none;
}

.dashboard-dropdown-list {
    height: 40px;
    background-color: #fff;
    transition: all .3s;
    position: relative;
    text-align: left;
    z-index: 1;
    color: #888888;
    cursor: pointer;
}

.dashboard-dropdown-list:hover {
    background-color: #f9f8f7;
}

.dashboard-dropdown-list a {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0 20px;
    text-decoration: none;
    color: #888888;
    font-weight: 300;
    line-height: 40px;
    font-size: 13px;
}

@media (min-width:768px) {
    .dashboard-link-pc {
        display: none;
    }
    .dashboard-dropdown-wrapper {
        top: 65px;        
    }
    .dashboard-list-wrapper .dashboard-dropdown-wrapper {
        top: 40px;
    }    
}

.dashboard-link-invisible {
    display: none;
}

.dashboard-link-delete a {
    color: #d34d74;
}

.dashboard-link-btn {
    position: absolute;
    top: 50%;
    right: 10px;
    padding: 8px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    z-index: 3;
    cursor: pointer;
}

.dashboard-link-btn i {
    font-size: 20px;
}

.dashboard-link-btn a {
    color: #888888;
}

.dashboard-box-wrapper {
    display: flex;
    border-bottom: solid 1px #eeeeee;
    position: relative;
}

.dashboard-box-wrapper-inactive {
    background-color: #f3f0ec;
}

.dashboard-box {
    position: relative;
    margin: auto;
    padding: 10px 10px 10px 80px;
    height: auto;
    cursor: pointer;
    width: 100%;
}

@media (min-width:768px) {
    .dashboard-box {
        min-height: 100px;
        padding: 10px 10px 10px 110px;
    }
}

.dashboard-box-name {
    font-weight: 500;
}

.dashboard-box-txt {
    font-size: 11px;
}

.dashboard-box-date {
    font-weight: 400;
    font-size: 11px;
    margin-top: 2px;
    color: #888888;
}

.dashboard-box-location {
    font-weight: 400;
    font-size: 11px;
    color: #888888;
}

.dashboard-box a.dashboard-box-link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.dashboard-box-wrapper-inactive {
    background-color: #f3f0ec;
}

@media (min-width:768px) {
    .dashboard-pc {
        display: none;
    }
}

.dashboard-invisible {
    display: none;
}

.dashboard-delete a {
    color: #d34d74;
}

.dashboard-btn {
    position: absolute;
    top: 50%;
    right: 10px;
    padding: 8px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    z-index: 3;
    cursor: pointer;
}

.dashboard-btn i {
    font-size: 20px;
}

.dashboard-btn a {
    color: #888888;
}

.dashboard-modal-area {
    display: none;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.dashboard-modal-bg {
    width: 100%;
    height: 100%;
    background-color: rgba(30,30,30,0.9);
}

.dashboard-modal-wrapper {
    position: absolute;
    top: 380px;
    left: 50%;
    transform:translate(-50%,-50%);
    width: 80%;
    max-width: 500px;
    height: 60vh;
    overflow-y: scroll;
    padding-bottom: 10px;
    background-color: #fff;
    border-radius: 4px;
    line-height: 1.2;
}

@media (min-width:768px) {
    .dashboard-modal-wrapper {
        top: 55%;
    }
}

.dashboard-modal-content {
    font-size: 14px;
    padding: 0 15px 5px;
}

.dashboard-modal-content__helptext {
    margin-top: 20px;
    color: #888888;
    font-size: .8em;
    font-weight: 600;
}

.dashboard-modal-content-img {
    width: 100%;
    max-width: 200px;
    margin: 20px auto 10px;
    aspect-ratio: 1/1;
}

.dashboard-modal-content-img img {
    width: 100%;
    height: 100%;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    object-fit: cover;
}

.dashboard-modal-content-txt {
    margin-top: 20px;
}

.dashboard-modal-content-txt .name {
    font-weight: 600;
    margin-bottom: 10px;
    word-break: break-all;
}

.dashboard-modal-content-txt .name i {
    color: #888888;
}

.dashboard-modal-content-txt .time {
    color: #888888;
    font-size: .9em;
    margin-bottom: 5px;
}

.dashboard-modal-content-txt .location {
    color: #888888;
    font-size: .9em;
    margin-bottom: 10px;
}

.dashboard-modal-content-txt .txt {
    margin-top: 20px;
    font-size: .9em;
    line-height: 1.4;
    word-break: break-all;
}

.dashboard-modal-content-txt i {
    margin-right: 5px;
}

.dashboard-modal-open {
    cursor: pointer;
}

.dashboard-modal-close {
    position: absolute;
    top: 120px;
    right: 10%;
    cursor: pointer;
    font-size: 24px;
    padding: 4px;
    color: #fff;
    z-index: 99;
}

@media (min-width:768px) {
    .dashboard-modal-close {
        top: 140px;
        right: 30%;
    }
}

.event-helptext {
    color: #888888;
    font-size: .8em;
}

.content-edit-container .content-edit-image-box {
    margin: 0 auto;
    text-align: center;
    width: 100%;
    position: relative;
    max-width: 400px;
    cursor: pointer;
}

.content-edit-container .content-edit-image-box img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    overflow: hidden;
    border: solid 1px #efefef;
}

.content-edit-container .content-edit-image-box input[type=file] {
    display: none;
}

.content-edit-container .content-image-bg-txt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    font-size: 32px;
    color: #fff;
    cursor: pointer;
}

.card-edit-container .card-edit-image-box {
    margin: 0 auto;
    text-align: center;
    width: 100%;
    position: relative;
    max-width: 400px;
    cursor: pointer;
}

.card-edit-container .card-edit-image-box img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    overflow: hidden;
    border: solid 1px #dddddd;
    border-radius: 20px;
    box-shadow: 0 1px 3px 0 #e6ebf1;
    cursor: pointer;
}

.card-edit-container .card-edit-image-box input[type=file] {
    display: none;
}

.card-edit-container .card-image-bg-txt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    font-size: 32px;
    color: #888888;
    cursor: pointer;
}

.card-wrapper {
    margin: auto auto 30px;
    max-width: 900px;
}

.card-wrapper .title {
    text-align: center;
    margin-bottom: 15px;
    color: #666666;
    text-decoration: underline;
}
.card-wrapper .title a {
    color: #666666;
}

.card-wrapper .name {
    text-align: center;
    color: #666666;
    text-decoration: underline;
}

.card-wrapper .name a {
    color: #666666;
}

.card-container .canvas {
    width: 100%;
    max-height: 400px;
}

.card-container .qr-txt {
    text-align: center;
    padding: 40px;
    background-color: #f1f1f1;
}

.card-container .oupput {
    padding: 10px;
}

.card-container .card-image-box {
    margin: 10px auto;
    text-align: center;
    width: 100%;
    position: relative;
    max-width: 400px;
    cursor: pointer;
}

.card-container .card-image-box img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    overflow: hidden;
    border: solid 1px #dddddd;
    border-radius: 20px;
    box-shadow: 0 1px 3px 0 #e6ebf1;
    cursor: pointer;
}

.card-container .card-image-box a {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0 20px;
    text-decoration: none;
    font-weight: 300;
    line-height: 40px;
}

.card-flex-box {
    max-width: 400px;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 20px auto;
    text-align: center;
}

.card-txt-box {
    color: #666666;
    width: 50%;
}

.card-txt-box .txt {
    margin-top: 5px;
    font-size: 28px;
}

.checkin-btn {
    margin: auto;
    position: relative;
    width: 100%;
    max-width: 500px;
    height: 45px;
    font-size: 13px;
    text-align: center;
    padding: 13px 0;
    color: #fff;
    background-color: #c3b5a5;
}

.checkin-btn a {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #fff;
    line-height: 40px;
    font-size: 13px;
    cursor: pointer;
}

.checkin-btn:hover {
    opacity: .9;
}

.checkin-done-btn:hover {
    opacity: 0.9;
    color: #fff;
}

.checkin-done-btn {
    margin: auto;
    position: relative;
    width: 100%;
    max-width: 500px;
    height: 45px;
    font-size: 13px;
    text-align: center;
    padding: 13px 0;
    color: #fff;
    background-color: #bbbbbb;
    border-radius: 10px;
}

.checkin-done-btn a {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #fff;
    line-height: 45px;
    font-size: 13px;
    cursor: pointer;
}

.dashboard-container-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 20px;
}

.dashboard-container-btn {
    position: relative;
    border: solid 1px #c3b5a5;
    border-radius: 4px;
    padding: 0 10px;
    margin-left: 10px;
    background-color: #fff;
    font-weight: 300;
    text-align: center;
    max-width: 150px;
    height: 30px;
    line-height: 30px;
    color: #bcad9b;
    font-size: 12px;
}

.dashboard-container-btn:hover {
    background-color: #c3b5a5;
    color: #fff;
}

.dashboard-container-btn a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    width: 100%;
    height: 100%;
}

.dashboard-card-box-wrapper {
    position: relative;
}

.dashboard-card-box-wrapper .dashboard-box {
    position: relative;
    margin: auto;
    padding: 30px 10px 30px 130px;
    height: auto;
    cursor: pointer;
    width: 100%;
}

.dashboard-card-box-wrapper .dashboard-box-img {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    z-index: 1;
    width: 100px;
    aspect-ratio: 16/9;
}

.dashboard-card-box-wrapper .dashboard-box-img img {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    object-fit: cover;
}

.mail-history-wrapper table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.mail-history-wrapper table thead th, .mail-history-wrapper table thead td{
    padding: 6px 0;
    text-align: center;
}

.mail-history-wrapper table tbody th, .mail-history-wrapper table tbody td{
    padding: 10px 0;
    text-align: center;
}

.mail-history-wrapper thead tr td, .mail-history-wrapper thead tr th{
    background-color: #ece7e2
}

.mail-history-wrapper td {
    font-weight: normal;
    font-size: 12px;
}

.mail-history-wrapper tbody tr {
    border-top: dashed 1px #778ca3;
}