/* ------------------------------------------------------------------------------------------------------------------ */
/* 診断トップページ */

.custom-top-diagnosis-page {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
    background: #fff;
    font-weight: 500;
}

.diagnosis-top img {
    max-width: 100%;
    height: auto;
    display: block;
}

.diagnosis-start-button {
    background-color: #E9528E;
    color: #ffffff;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-radius: 62.4375rem;
    display: inline-block;
    font-size: 1rem;
    padding: 0.75rem 2rem;
    width: 18.75rem;
    text-align: center;
    margin-top: 3rem;
    margin-left: auto;
    margin-right: auto;
}


.diagnosis-list-title {
    font-weight: 500;
    color: #7D40A0;
    text-align: center;
    font-size: 1.5rem;
    margin-top: 5rem;
    display: flex;
    align-items: center;
    text-align: center;    
}

.diagnosis-list-title::before,
.diagnosis-list-title::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #7D40A0;
  margin: 0 10px;
}

.diagnosis-list-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin: 1.5rem 0 3rem;
    padding: 0 1rem;
    box-sizing: border-box;
    justify-items: center;
}

.diagnosis-card {
    margin: 0;
}

.diagnosis-card img {
    width: 100%;
    height: auto;
    display: block;
}

.diagnosis-card-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
    width: 100%;
}

.diagnosis-btn {
    width: 100%;
    padding: 0.625rem 0.625rem;
    border-radius: 100px;
    border: 1px solid #7D40A0;
    background: #fff;
    color: #7D40A0;
    font-weight: 500;
    font-size: 0.8rem;
    cursor: pointer;
    text-align: center;
}

.diagnosis-about-section {
    padding: 0 1rem;
}

.diagnosis-about-title {
    text-align: center;
    font-size: 1rem;
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px dashed #AAAAAC;
    color: #535353;
}

.diagnosis-about-card {
    display: grid;
    grid-template-columns: 168px 1fr;
    gap: 1rem;
    align-items: start;
}

.diagnosis-about-thumb img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}

.diagnosis-about-body p {
    margin: 0 0 0.75rem;
    color: #535353;
    font-size: 0.85rem;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 診断スタートページ */

.custom-diagnosis-page {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
    background: #fff;
    font-weight: 500;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 診断結果ページ */

.custom-result-diagnosis-page {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
    background: #fff;
    font-weight: 500;
    text-align: center;
}

.diagnosis-result img {
    max-width: 100%;
    height: auto;
    display: block;
}

.custom-result-diagnosis-error {
    margin-top: 40px;
    font-size: 1rem;
    color: #AAAAAC;
}

.custom-diagnosis-actions {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 40px;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.custom-diagnosis-retry-button {
    border-radius: 62.4375rem;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.1875;
    margin-top: 0.75rem;
    padding: 0.8125rem 1rem 0.875rem;
    position: relative;
    text-align: center;
    width: 18.5625rem;
    background-color: #ffffff;
    color: #E9528E;
    border: 1px solid #E9528E;  
    margin: 0 auto;
    display: block;  
}

.custom-share-actions-section {
    background: #F5F5F5;
    padding-bottom: 2.5rem;
    padding-top: 2.5rem;
}

.custom-share-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.custom-share-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #7D40A0;
    font-size: 0.875rem;
    padding: 0;
    min-width: 100px;  
}

.custom-share-button img {
    height: 3.75rem;
    margin-bottom: 0.375rem;
    width: 3.75rem;
}

.diagnosis-article {
    padding: 1.25rem;
    text-align: left;
    margin-top: 40px;
}

.diagnosis-header {
    text-align: center;
    font-weight: bold;
}

.diagnosis-title {
    margin: 0;
    font-weight: bold;
    font-size: 2rem;
    color: #7D40A0;
}

.diagnosis-mbti {
    color: #535353;
    font-size: 1rem;
}

.diagnosis-catch {
    margin: 0.75rem 0 0;
    color: #535353;
    line-height: 1.8;
    font-size: 1.2rem;
}

.diagnosis-divider.dotted {
    margin: 1rem auto;
    border-bottom: 2px dotted #AAAAAC;
    width: 100%;
}

.diagnosis-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    align-items: center;
    margin-top: 1rem;
}

.diagnosis-hero-illust img {
    width: 100%;
    height: auto;
    display: block;
}

.diagnosis-paragraph {
    color: #535353;
    line-height: 1.9;
    margin: 0;
}

.diagnosis-section {
    margin-top: 1.75rem;
}

.diagnosis-section-title {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
    color: #535353;
    font-weight: 700;
}

.diagnosis-list {
    margin: 0.5rem 0 0 1.25rem;
    padding: 0;
    list-style: disc;
    color: #535353;
}

.diagnosis-list li {
    line-height: 1.9;
    margin: 0.25rem 0;
}

.diagnosis-gap {
    margin-top: 2rem;
    background: #555555;
    color: #ffffff;
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
}

.diagnosis-gap-title {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: #ffffff;
}

.diagnosis-gap-body {
    margin: 0;
    line-height: 1.9;
}

.diagnosis-tags {
    margin-top: 2rem;
}

.diagnosis-tags-title {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
    color: #535353;
    font-weight: 700;    
}

.diagnosis-tags .diagnosis-divider.dotted {
    margin-top: 0.25rem;
}

.diagnosis-search-therapist-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top:40px;
}

.diagnosis-search-therapist {
    border-radius: 62.4375rem;
    display: inline-block;
    font-size: 1rem;
    margin-top: 0.0625rem;
    padding: 0.75rem 2rem;
    width: 18.75rem;
    background-color: #E9528E;
    color: #ffffff;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-align: center;    
}

.diagnosis-search-therapist-highlight {
    font-size: 1rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: -0.6875rem;
    position: relative;
    width: -moz-fit-content;
    width: fit-content;
    color: #E9518E;
    font-weight: 700;
}

.diagnosis-search-therapist-highlight::before, 
.diagnosis-search-therapist-highlight::after {
    background: #E9518E;
    content: "";
    display: inline-block;
    height: 1.6875rem;
    position: absolute;
    top: 30%;
    transform: translateY(-50%);
    width: 0.125rem;
}

.diagnosis-search-therapist-highlight::before {
    left: -0.9375rem;
    rotate: -22deg;
}

.diagnosis-search-therapist-highlight::after {
    right: -0.9375rem;
    rotate: 22deg;
}

.diagnosis-tags-list {
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
    color: #535353;
}

.diagnosis-tags-list li {
    margin: 0.25rem 0;
    line-height: 1.8;
}

/* 相性がいいセラピスト */
.diagnosis-match-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 1rem;
}

.diagnosis-match-card {
    padding: 1rem;
    background: #fff;
}

.diagnosis-match-title {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: #535353;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.t-type {
    color: #7D40A0;
    display: inline-block;
}


.diagnosis-match-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    position: relative;
}

.diagnosis-match-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.diagnosis-match-desc {
    margin: 0.5rem 0 0.75rem;
    color: #535353;
    line-height: 1.8;
    font-size: 0.95rem;
}


/* ------------------------------------------------------------------------------------------------------------------ */
/* ユーザー診断スタートページ */

.custom-user-diagnosis-page {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
    background: #fff;
    font-weight: 500;
    text-align: center;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* about us */

.custom-about-us-page {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
    background: #fff;
    font-weight: 500;
}

.cau-sub-content {
    scroll-margin-top: 4.625rem;
    margin-top: 2.5rem;
}

.cau-title {
    font-weight: 500;
    color: #E9528E;
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 2.5rem;
}

.cau-text {
    font-size: 0.875rem;
    color: #535353;
    margin-top: 20px;
}

.cau-logo-img {
    width: 100px;
    height: auto;
    display: block;
    margin-left: auto;
    margin-top: 20px;
}

.cau-signature {
    font-size: 1rem;
    color: #535353;
    text-align: right;
    margin-top: 20px;
}

.cau-company-info {
    margin-top: 20px;
    margin-bottom: 40px;
}

.cau-company-name {
    color: #535353;
    text-align: left;
    font-size: 1rem;
}

.cau-company-dl {
    display: grid;
    grid-template-columns: 80px 1fr;
    row-gap: 10px;
    column-gap: 10px;
    margin: 0;
    margin-top: 20px;
    color: #535353;
    font-size: 1rem;
}

.cau-company-dl dt {
    font-weight: 500;
}

.cau-company-dl a {
  color: #E9528E;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 店舗申請 */

.custom-apply-store-page {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
    background: #fff;
}

.cas-page-required-badge {
    background-color: #E9518E;
    white-space: nowrap;
    color: #ffffff;
    font-size: 0.75rem;
    padding: 2px 6px;
    margin-left: 8px;
    border-radius: 10px;
    line-height: 1;
    display: inline-block;
}

.cas-error-message {
    font-size: 0.875rem;
    color: #E9518E;
    display: block;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* フロー */

.cas-flow-content {
    height: 100%;
    overflow-y: auto;
}

.cas-flow-title {
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    letter-spacing: 0.05em;
    color: #7D40A0;
    margin-top: 40px;
}

.cas-flow-subtitle {
    font-size: 0.75rem;
    text-align: center;
    color: #7D40A0;
    letter-spacing: 0.1em;
    margin-top: 10px;
}

.cas-flow-steps {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cas-flow-step {
    display: flex;
    color: #535353;
    gap: 10px;
    align-items: center;
}

.cas-flow-step-number {
    background: #7D40A0;
    min-height: 50px;
    min-width: 50px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0px;
}

.cas-flow-step-char {
    font-size: 13px;
    color: #fff;
    font-weight: 500;
    margin-top: 5px;
}

.cas-flow-step-number-digit {
    font-size: 1.5rem;
    color: #fff;
    font-weight: 500;
    margin-top: -10px;
}

.cas-flow-text {
    font-size: 0.875rem;
    color: #535353;
    flex: 1;
}

.cas-flow-button-wrapper {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 40px;
}

.cas-flow-message {
    font-size: 0.875rem;
    color: #535353;
    text-align: center;
    margin-top: 20px;
}


.cas-flow-button {
    position: relative;
    text-align: center;
    width: 250px;
    padding: 12px;
    background-color: #E9518E;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
    margin: 10px auto 0 auto;
}

.cas-flow-button::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 26px;
    width: 7px;
    height: 7px;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 利用規約 */

.cas-terms-content {
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cas-terms-title {
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    letter-spacing: 0.05em;
    color: #7D40A0;
    margin-top: 40px;
}

.cas-terms-sentence {
    flex: 1;
    margin-top: 40px;
    font-size: 0.875rem;
    border: 1px solid #AAAAAC;
    padding: 10px;
    overflow-y: auto;
}

#terms-end {
    display: block;
    height: 1px;
    visibility: hidden;
}

.cas-terms-button-wrapper {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 40px;
}

.cas-terms-button {
    position: relative;
    text-align: center;
    width: 250px;
    padding: 12px;
    background-color: #E9518E;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
    margin: 0px auto 0 auto;
}

.cas-terms-button::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 26px;
    width: 7px;
    height: 7px;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}

.cas-terms-button:disabled {
    background-color: #AAAAAC;
    opacity: 1;
    cursor: not-allowed;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 反社規約 */

.cas-antisocial-content {
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cas-antisocial-title {
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    letter-spacing: 0.05em;
    color: #7D40A0;
    margin-top: 40px;
}

.cas-antisocial-sentence {
    flex: 1;
    margin-top: 40px;
    font-size: 0.875rem;
    border: 1px solid #AAAAAC;
    padding: 10px;
    overflow-y: auto;
}

#antisocial-end {
    display: block;
    height: 1px;
    visibility: hidden;
}

.cas-antisocial-button-wrapper {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 40px;
}

.cas-antisocial-button {
    position: relative;
    text-align: center;
    width: 250px;
    padding: 12px;
    background-color: #E9518E;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
    margin: 0px auto 0 auto;
}

.cas-antisocial-button::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 26px;
    width: 7px;
    height: 7px;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}

.cas-antisocial-button:disabled {
    background-color: #AAAAAC;
    opacity: 1;
    cursor: not-allowed;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 署名 */

.cas-signature-content {
    height: 100dvh;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

.cas-signature-title {
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    letter-spacing: 0.05em;
    color: #7D40A0;
    margin-top: 40px;
}

.cas-signature-form-group {
    margin-top: 40px;
}

.cas-signature-form-group label {
    font-size: 1rem;
    color: #333;
    margin-bottom: 8px;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}

.cas-signature-canvas {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    border: 1px solid #AAAAAC;
    background-color: #f9f9f9;
    touch-action: none;
}

.signature-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.cas-signature-clear-button {
    padding: 8px 24px;
    width: 100px;
    font-size: 1rem;
    background-color: #AAAAAC;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 10px;
    display: block;
    margin-left: auto; 
}

.cas-signature-form-group-checkbox-section {
    display: flex;
    gap: 10px;
    flex-direction: column;
}


.cas-signature-form-group-checkbox-section label {
    position: relative;
    padding-left: 30px;
    font-size: 1rem;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: color 0.3s ease;
}


.cas-signature-form-group-checkbox-section input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.cas-signature-form-group-checkbox-section label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 2px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}


.cas-signature-form-group-checkbox-section input[type="checkbox"]:checked + label::before {
    background-color: rgb(233, 81, 142);
    border-color: rgb(233, 81, 142);
}


.cas-signature-form-group-checkbox-section label::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg) scale(0);
    width: 6px;
    height: 12px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transition: transform 0.3s ease;
}

.cas-signature-form-group-checkbox-section input[type="checkbox"]:checked + label::after {
    transform: translateY(-50%) rotate(45deg) scale(1);
}

.cas-signature-button-wrapper {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 40px;
}

.cas-signature-button {
    position: relative;
    text-align: center;
    width: 250px;
    padding: 12px;
    background-color: #E9518E;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
    margin: 0px auto 0 auto;
}

.cas-signature-button::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 26px;
    width: 7px;
    height: 7px;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}

.cas-signature-button:disabled {
    background-color: #AAAAAC;
    opacity: 1;
    cursor: not-allowed;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 申請 */
 
.cas-fill-content {
    height: 100%;
    overflow-y: auto;
}

.cas-fill-title {
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    letter-spacing: 0.05em;
    color: #7D40A0;
    margin-top: 40px;
    margin-bottom: 40px;
}

#cas-fill-form {
    display: flex;
    flex-direction: column;
}

.cas-fill-form-group {
    margin-bottom: 20px;
}

.cas-fill-form-group label {
    font-size: 1rem;
    color: #333;
    margin-bottom: 8px;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}

.cas-fill-form-group-label-note {
    font-size: 0.75rem;
    margin-bottom: 8px;
    margin-top: -8px;
    color: #333;
}

.cas-fill-form-control-wrapper {
    margin-bottom: 0;
    position: relative;
}

.cas-fill-form-control-wrapper::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 26px;
    width: 9px;
    height: 9px;
    border-top: 1px solid #6F6F6F;
    border-left: 1px solid #6F6F6F;
    transform: translatey(-50%) rotate(-135deg);
}

.cas-fill-form-group input,
.cas-fill-form-group select {
    width: 100%;
    color: #333;
    font-size: 14px
}

.cas-fill-form-group input {
    padding: 13px;
    margin-top: 5px;
    margin-bottom: 0;
    border: none;
    border-radius: 25px;
    background-color: #F5F5F5;
}

.cas-fill-form-group select {
    padding: 13px;
    border: none;
    border-radius: 25px;
    background-color: #F5F5F5;
    margin-top: 5px;
    margin-bottom: 0;
    color: #AAAAAC;
}

.cas-fill-form-group-checkbox-section {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    margin-top: 15px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}


.cas-fill-form-group-checkbox-section label {
    position: relative;
    padding-left: 30px;
    font-size: 1rem;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: color 0.3s ease;
}


.cas-fill-form-group-checkbox-section input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.cas-fill-form-group-checkbox-section label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 2px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}


.cas-fill-form-group-checkbox-section input[type="checkbox"]:checked + label::before {
    background-color: rgb(233, 81, 142);
    border-color: rgb(233, 81, 142);
}


.cas-fill-form-group-checkbox-section label::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg) scale(0);
    width: 6px;
    height: 12px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transition: transform 0.3s ease;
}

.cas-fill-form-group-checkbox-section input[type="checkbox"]:checked + label::after {
    transform: translateY(-50%) rotate(45deg) scale(1);
}

.cas-fill-button {
    position: relative;
    text-align: center;
    width: 200px;
    padding: 12px;
    background-color: #E9518E;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
    margin: 10px auto 0 auto;
    margin-bottom: 40px;
}

.cas-fill-button::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 26px;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}

#cas-business_license-preview-image img {
    max-width: 400px;
    height: auto;
    margin-top: 10px;
    padding: 4px;
    border-radius: 8px;
}

.cas-store-block-title {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    letter-spacing: 0.05em;
    color: #7D40A0;
    margin-top: 20px;
    margin-bottom: 20px;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 完了 */

.cas-success-content {
    height: 100dvh;
    overflow: hidden;
}

.cas-success-title {
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    letter-spacing: 0.05em;
    color: #7D40A0;
    margin-top: 40px;
}

.cas-success-message {
    font-size: 0.875rem;
    color: #535353;
    text-align: center;
    margin-top: 40px;
}

.cas-success-button-wrapper {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 40px;
}

.cas-success-button {
    position: relative;
    text-align: center;
    width: 250px;
    padding: 12px;
    border: solid 1px #7D40A0;
    background-color: #fff;
    color: #7D40A0;
    border-radius: 50px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
    margin: 0 auto 0 auto;
    display: inline-block;
}

.cas-success-button::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    left: 10px;
    width: 10px;
    height: 10px;
    border-bottom: 1px solid #7D40A0;
    border-left: 1px solid #7D40A0;
    -webkit-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 覚書案内 */

.cas-memorandum-flow-content {
    height: 100%;
    overflow-y: auto;
}

.cas-memorandum-flow-text {
    font-size: 0.875rem;
    color: #535353;
    margin-top: 20px;
}

.cas-memorandum-flow-list {
  list-style: disc;
  margin: 8px 0 16px;
  padding-left: 1.25rem;
  line-height: 1.7;
}

.cas-memorandum-flow-list li {
  margin: 4px 0;
}

.cas-memorandum-flow-list--new {
  border-left: 3px solid #E9528E;
  padding-left: 10px;
}

.cas-memorandum-flow-list--old {
  border-left: 3px solid #AAAAAC;
  padding-left: 10px;
}

.cas-memo-bank-transfer {
  font-weight: bold;
  background: #FDF1FC;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 署名 */

.cas-memorandum-signature-content {
    height: 100dvh;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 退会手続き画面 */

.custom-cancel-membership-page {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
    background: #fff;
    font-weight: 500;
}

.custom-not-cancel-membership-page {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
    background: #fff;
    font-weight: 500;
}

.custom-cancel-membership-user-message,
.custom-cancel-membership-store-and-therapist-message {
    text-align: center;
    font-size: 0.875rem;
    color: #535353;
    margin-top: 40px;
}

.custom-cancel-membership-page-content {
    height: 100%;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}

.custom-cancel-membership-page-content::-webkit-scrollbar {
    display: none;
}

.custom-cancel-membership-title-area {
    margin-top: 40px;
}
  

.custom-cancel-membership-title {
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    letter-spacing: 0.05em;
    color: #7D40A0;
    margin-top: 8px;
}

.custom-cancel-membership-sub-title {
    font-size: 0.75rem;
    text-align: center;
    color: #7D40A0;
    letter-spacing: 0.1em;
    margin-top: 4px;
}

.custom-cancel-membership-page-required-badge {
    background-color: #E9518E;
    white-space: nowrap;
    color: #ffffff;
    font-size: 0.75rem;
    padding: 2px 6px;
    margin-left: 8px;
    border-radius: 10px;
    line-height: 1;
    display: inline-block;
}

#custom-cancel-membership-page-form {
    display: flex;
    flex-direction: column;
    margin-top: 40px;
    padding-bottom: 40px;
}

.custom-cancel-membership-page-form-group {
    margin-bottom: 40px;
}

.custom-cancel-membership-page-form-group label {
    font-size: 1rem;
    color: #535353;
    margin-bottom: 8px;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}

.custom-cancel-membership-page-form-group-radio-section {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    flex-direction: column;
}


.custom-cancel-membership-page-form-group-radio-section label {
    position: relative;
    padding-left: 30px;
    font-size: 1rem;
    color: #535353;
    cursor: pointer;
    user-select: none;
    transition: color 0.3s ease;
}


.custom-cancel-membership-page-form-group-radio-section input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.custom-cancel-membership-page-form-group-radio-section label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 2px solid #ddd;
    border-radius: 50%;
    background-color: #fff;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}


.custom-cancel-membership-page-form-group-radio-section input[type="radio"]:checked + label::before {
    background-color: rgb(233, 81, 142);
    border-color: rgb(233, 81, 142);
}


.custom-cancel-membership-page-form-group-radio-section label::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg) scale(0);
    width: 6px;
    height: 12px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transition: transform 0.3s ease;
}

.custom-cancel-membership-page-form-group-radio-section input[type="radio"]:checked + label::after {
    transform: translateY(-50%) rotate(45deg) scale(1);
}

#other_reason_textarea {
    display: none;
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    background-color: #F5F5F5;
    border: none;
    border-radius: 25px;
    font-size: 1rem;
    resize: none;
    height: 150px;
}

.custom-cancel-membership-page-form-opinion-textarea {
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    background-color: #F5F5F5;
    border: none;
    border-radius: 25px;
    font-size: 1rem;
    resize: none;
    height: 150px;
}

/* 退会ボタン */
.custom-cancel-membership-page-btn {
    position: relative;
    text-align: center;
    width: 200px;
    padding: 12px;
    background-color: #E9518E;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
    margin: 10px auto 0 auto;
}

.custom-cancel-membership-page-btn::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 26px;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 退会完了画面 */

.custom-cancel-membership-success-page {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
    background: #fff;
    font-weight: 500;
}

.custom-cancel-membership-success-page-content {
    height: 100%;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    max-width: 600px;
    margin: 0 auto;
}

.custom-cancel-membership-success-page-content::-webkit-scrollbar {
    display: none;
}

.custom-cancel-membership-success-page-message {
    font-size: 1rem;
    color: #535353;
    text-align: left;
    margin-top: 40px;
    font-weight: 500;
}

.custom-cancel-membership-success-page-button {
    color: #535353;
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
    align-items: center;
    position: relative;
    width: 200px;
    padding: 12px;
    margin: 20px auto 0 auto;
}

.custom-cancel-membership-success-page-button::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    left: 10px;
    width: 10px;
    height: 10px;
    border-bottom: 1px solid #535353;
    border-left: 1px solid #535353;
    -webkit-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
}

.custom-cancel-membership-success-page-button a {
    display: inline-block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
    text-align: center;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* フッターメッセージ通知 */

.p-topfooter__link {
    position: relative;
}

.p-topfooter__badge-for-talk {
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(calc(-50% + 2rem / 2));
    width: 15px;
    height: 15px;
    background-color: #E9528E;
    border-radius: 50%;
    display: none;
}

.p-topfooter__badge-for-theralog {
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(calc(-50% + 2rem / 2));
    width: 15px;
    height: 15px;
    background-color: #E9528E;
    border-radius: 50%;
    display: none;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* LINE通知 */

.cls-page {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    background: #fff;
    padding-inline: 1.25rem;
}

.cls-page,
.cls-page * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.cls-page-title {
    font-size: 1.5rem;
    font-weight: 500;
    color: #E9528E;
    text-align: center;
    margin-top: 40px;
}

.cls-line-connect {
    padding: 10px 0px;
    font-size: 0.875rem;
    text-align: center;
    color: #ffffff;
    border-radius: 10px;
    text-decoration: none;
    width: 100%;
    max-width: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    white-space: normal;
    word-wrap: break-word;
    background-color: #06c755;
    margin: 10px auto;
}

.cls-line-disconnect {
    padding: 10px 0px;
    font-size: 0.875rem;
    text-align: center;
    color: #ffffff;
    border-radius: 10px;
    text-decoration: none;
    width: 100%;
    max-width: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    white-space: normal;
    word-wrap: break-word;
    background-color: #808080;
    margin: 10px auto;
}


.cls-line-header {
    text-align: center;
}

.cls-line-title {
    font-size: 1rem;
    font-weight: bold;
    color: #333;
}

.cls-line-lead {
    font-size: 0.875rem;
    color: #333;
    margin-top: 10px;
}

.cls-line-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin: 20px 0;
}

.cls-line-benefit {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 16px;
    width: 100%;
    max-width: 280px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    text-align: center;
    color: #333;
}

.cls-line-label {
    background-color: #06c755;
    color: #fff;
    border-radius: 999px;
    display: inline-block;
    font-size: 13px;
    padding: 4px 10px;
    margin-bottom: 10px;
}

.cls-line-benefit strong {
    display: block;
    margin-top: 6px;
    color: #06c755;
    font-weight: bold;
    font-size: 1.1em;
}

.cls-line-note {
    font-size: 0.75rem;
    color: #666;
    text-align: center;
    margin-bottom: 10px;
}

.cls-toggle-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
}

.cls-toggle-item {
    display: flex;
    flex-direction: column;
}

.cls-toggle-title {
    font-size: 1rem;
    font-weight: bold;
    margin: 0;
    color: #333;
}

.cls-toggle-description {
    font-size: 0.875rem;
    margin: 0 0 5px 0;
    color: #555;
}

.cls-toggle-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
}

.cls-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cls-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 24px;
}

.cls-toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

.cls-toggle-switch input:checked + .cls-toggle-slider {
    background-color: #4caf50;
}

.cls-toggle-switch input:checked + .cls-toggle-slider:before {
    transform: translateX(22px);
}


/* ------------------------------------------------------------------------------------------------------------------ */
/* プッシュ通知 */

.cls-push-notification-toggle-section {
    display: flex;
    flex-direction: row;
    margin-top: 40px;
    align-items: center;
    justify-content: space-evenly;
}

.cls-section-title {
    color: #535353;
    font-size: 1rem;
    width: 100px;
}

.cls-push-notification-switch {
    position: relative;
    display: inline-block;
    width: 85px;
    height: 34px;
}

.cls-push-notification-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cls-push-notification-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #AAAAAC;
    transition: 0.4s;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
}

.cls-push-notification-slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    border-radius: 50px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.4s;
}

.cls-push-notification-text-on,
.cls-push-notification-text-off {
    position: absolute;
    font-size: 0.875rem;
    color: white;
    transition: 0.4s;
}

.cls-push-notification-text-off {
    left: 33px;
    opacity: 1;
}

.cls-push-notification-text-on {
    right: 35px;
    opacity: 0;
}

.cls-push-notification-switch input:checked + .cls-push-notification-slider {
    background-color: #7D40A0;
}

.cls-push-notification-switch input:checked + .cls-push-notification-slider:before {
    transform: translateX(50px); 
}

.cls-push-notification-switch input:checked + .cls-push-notification-slider .cls-push-notification-text-on {
    opacity: 1;
}

.cls-push-notification-switch input:checked + .cls-push-notification-slider .cls-push-notification-text-off {
    opacity: 0;
}

.cls-section-message {
    text-align: center;
    font-size: 0.875rem;
    color: #E9528E;
    display: none;
    margin-top: 10px;
}

#cls-install-btn {
    font-size: 0.875rem;
    color: #fff;
    background: #E9528E;
    height: 30px;
    width: 150px;
    margin: 0 auto;
    border-radius: 30px;
    display: none;
    margin-top: 10px;
}

.cls-install-message {
    text-align: center;
    font-size: 0.875rem;
    color: #E9528E;
    display: none;
    margin-top: 10px;
}


/* ------------------------------------------------------------------------------------------------------------------ */
/* LINE通知 */

.cls-line-notification-toggle-section {
    display: flex;
    flex-direction: row;
    margin-top: 20px;
    align-items: center;
    justify-content: space-evenly;
    border-bottom: 1px solid #7D40A0;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.cls-line-notification-toggle-section-for-store {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    border-bottom: 1px solid #7D40A0;
    margin-bottom: 1.25rem;
    margin-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.cls-line-notification-toggle-section-main {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
}



.cls-line-notification-switch {
    position: relative;
    display: inline-block;
    width: 85px;
    height: 34px;
}

.cls-line-notification-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cls-line-notification-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #AAAAAC;
    transition: 0.4s;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
}

.cls-line-notification-slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    border-radius: 50px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.4s;
}

.cls-line-notification-text-on,
.cls-line-notification-text-off {
    position: absolute;
    font-size: 0.875rem;
    color: white;
    transition: 0.4s;
}

.cls-line-notification-text-off {
    left: 33px;
    opacity: 1;
}

.cls-line-notification-text-on {
    right: 35px;
    opacity: 0;
}

.cls-line-notification-switch input:checked + .cls-line-notification-slider {
    background-color: #7D40A0;
}

.cls-line-notification-switch input:checked + .cls-line-notification-slider:before {
    transform: translateX(50px); 
}

.cls-line-notification-switch input:checked + .cls-line-notification-slider .cls-line-notification-text-on {
    opacity: 1;
}

.cls-line-notification-switch input:checked + .cls-line-notification-slider .cls-line-notification-text-off {
    opacity: 0;
}

.cls-add-friend-btn {
    background: #06c755;
    color: #fff;
    border-radius: 100px;
    width: 140px;
    height: 40px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    margin: 0 auto;
    display: block;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    gap: 5px;
}

.cls-add-friend-btn img {
    width: 35px;
    height: auto;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* LINE通知 */

.cls-line-sub-section {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #AAAAAC;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.cls-sub-section-title {
    font-size: 1rem;
    color: #7D40A0;
}

.cls-sub-section-description {
    font-size: 0.875rem;
    color: #535353;
    margin-top: 10px;
}

.cls-line-sub-section-togle-content {
    display: flex;
    flex-direction: row;
    margin-top: 20px;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.cls-line-sub-section-togle-content-title {
    color: #535353;
    font-size: 1rem;
    width: 100px;
}

.cls-sub-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 27px;
}

.cls-sub-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cls-sub-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #AAAAAC;
    transition: 0.4s;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
}

.cls-sub-switch-slider:before {
    position: absolute;
    content: "";
    height: 21px;
    width: 21px;
    border-radius: 50px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
}

.cls-sub-switch input:checked + .cls-sub-switch-slider {
    background-color: #7D40A0;
}

.cls-sub-switch input:checked + .cls-sub-switch-slider:before {
    transform: translateX(30px);
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 店舗用 LINEアカウント追加ボタン */

#cls-store-add-line-account-btn {
    font-size: 0.875rem;
    color: #06c755;
    background-color: #ffffff;
    border: 1px solid #06c755;
    border-radius: 999px;
    padding: 6px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.08s ease;
}

#cls-store-add-line-account-btn::before {
    content: "＋";
    font-size: 0.875rem;
    line-height: 1;
}


/* ------------------------------------------------------------------------------------------------------------------ */
/* LINEアカウント一覧 */

.cls-line-list {
    margin-top: 10px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 350px;
}

.cls-line-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    background-color: #fff;
    border: 1px solid #06c755;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    box-sizing: border-box;
}

.cls-line-item-for-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    background-color: #fff;
    border: 1px solid #06c755;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    box-sizing: border-box;
}

.cls-line-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.cls-line-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #AAAAAC;
}

.cls-line-texts {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cls-line-name {
    font-size: 0.875rem;
    color: #535353;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.cls-line-controls {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}


.cls-line-account-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid #AAAAAC;
    background-color: #ffffff;
    color: #AAAAAC;
    font-size: 0.875rem;
    cursor: pointer;
    line-height: 1.4;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.08s ease;
    min-width: 90px;
    text-align: center;
}

.cls-line-account-switch::after {
    content: "連携解除";
}

.cls-line-account-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.cls-line-account-slider,
.cls-line-account-round {
    display: none;
}
    
/* ------------------------------------------------------------------------------------------------------------------ */
/* 店舗用：空状態メッセージ */

.cls-store-line-empty {
    font-size: 0.875rem;
    margin-top: 0.625rem;
    color: #E9528E;
    text-align: center;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* ローディングモーダル */

html.no-scroll,
body.no-scroll {
    overflow: hidden;
    height: 100%;
    width: 100%;
    touch-action: none;
}
 
.custom-loading-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    touch-action: none;
}


.custom-loading-modal,
.custom-loading-modal * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.custom-loading-modal-content {
    width: 100%;
    height: 100dvh;
    margin: 0 auto;
    box-sizing: border-box;
    font-family: 'Noto Sans JP', sans-serif;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 5px;
    justify-content: center;
    background-color: #fff;
}

.custom-loading-wrapper{
    width:200px;
    height:60px;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
}

.custom-loading-circle{
    width:20px;
    height:20px;
    position: absolute;
    border-radius: 50%;
    background-color: #E9528E;
    left:15%;
    transform-origin: 50%;
    animation: circle .5s alternate infinite ease;
}

@keyframes circle{
    0%{
        top:60px;
        height:5px;
        border-radius: 50px 50px 25px 25px;
        transform: scaleX(1.7);
    }
    40%{
        height:20px;
        border-radius: 50%;
        transform: scaleX(1);
    }
    100%{
        top:0%;
    }
}
.custom-loading-circle:nth-child(2){
    left:45%;
    animation-delay: .2s;
}
.custom-loading-circle:nth-child(3){
    left:auto;
    right:15%;
    animation-delay: .3s;
}
.custom-loading-shadow{
    width:20px;
    height:4px;
    border-radius: 50%;
    background-color: rgba(0,0,0,.5);
    position: absolute;
    top:62px;
    transform-origin: 50%;
    z-index: -1;
    left:15%;
    filter: blur(1px);
    animation: shadow .5s alternate infinite ease;
}

@keyframes shadow{
    0%{
        transform: scaleX(1.5);
    }
    40%{
        transform: scaleX(1);
        opacity: .7;
    }
    100%{
        transform: scaleX(.2);
        opacity: .4;
    }
}
.custom-loading-shadow:nth-child(4){
    left: 45%;
    animation-delay: .2s
}
.custom-loading-shadow:nth-child(5){
    left:auto;
    right:15%;
    animation-delay: .3s;
}
.custom-loading-wrapper span{
    position: absolute;
    top:75px;
    font-size: 20px;
    letter-spacing: 12px;
    color: #E9528E;
    left:15%;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* マイマップ */

.cup-map-page {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
    background: #fff;
    font-weight: 500;
}

.cup-map-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

#cup-map {
    height: 100%; 
    width: 100%;
}

/* 全画面ボタン */
.gm-control-active.gm-fullscreen-control {
    display: none;
}

.gm-style-cc {
    display: none;
}

/* 移動ボタン */
gmp-internal-camera-control.gmnoprint {
    display: none;
}

/* グーグルアイコン */
img[alt="Google"] {
    display: none !important;
}

.gmnoprint.gm-style-mtc-bbw {
    display: none;
}

.cup-map-save-button {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    background: #E9528E;
    border-radius: 30px;
    margin-top: 10px;
    font-size: 1rem;
    color: #fff;
    text-align: center;
    width: 150px;
    height: 40px;
    padding: 5px;
}

.cup-map-current-location-button {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 55px;
    height: 55px;
    padding: 0;
    font-size: 0.75rem;
    text-align: center;
    color: #7D40A0;
    border: solid 1px #7D40A0;
    border-radius: 50%;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* マッチングリスト */

.matchings-list-page {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
    font-family: 'Noto Sans JP', sans-serif;
    overflow-y: auto;
    background: #fff;
    font-weight: 500;
}

.matchings-list-page,
.matchings-list-page * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.matchings-list-page-title {
    font-size: 1.5rem;
    font-weight: 500;
    color: #E9528E;
    text-align: center;
    margin-top: 40px;
}


.cml-matching-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
    margin-top: 40px;
    margin-bottom: 40px;
    justify-items: center;
}

.cml-matching-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.cml-matching-card.unconfirmed {
    background: rgba(233, 81, 142, 0.2);
}

button.cml-pin-button,
button.cml-pin-button-for-user {
    position: absolute;
    left: 5px;
    top: 5px;
    background-color: rgba(240, 240, 240, 0.8);
    border-radius: 50%;
    padding: 4px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    z-index: 10;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}

button.cml-pin-button img,
button.cml-pin-button-for-user img {
    width: 24px;
    height: auto;
}

.cml-matching-button-for-user {
    position: absolute;
    right: 5px;
    bottom: 5px;
    background-color: rgba(240, 240, 240, 0.8);
    border-radius: 50%;
    padding: 4px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    z-index: 10;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cml-unconfirmed-matching-budge {
    position: absolute;
    right: 5px;
    bottom: 5px;
    background: #E9528E;
    color: white;
    font-size: 0.75rem;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cml-matching-button-for-user img {
    width: 24px;
    height: auto;
}

.cml-matching-avatar {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    position: relative;
}

.cml-matching-avatar img {
    width:100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.cml-matching-info {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.cml-user-name {
    font-size: 1.125rem;
    color: #535353;
    margin-top: 10px;
}

.cml-button {
    height: 40px;
    font-size: 1rem;
    background: #fff;
    color: #7D40A0;
    border-radius: 24px;
    width: 100%;
    position: relative;
    text-align: center;
    border: solid 1px #7D40A0;
    padding: 5px;
    margin-top: 10px;
}

.cml-button::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 20px;
    width: 7px;
    height: 7px;
    border-bottom: 1px solid #7D40A0;
    border-left: 1px solid #7D40A0;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}

.cml-no-matching {
    text-align: center;
    font-size: 1rem;
    color: #AAAAAC;
    margin: 40px 0;
}



/* ------------------------------------------------------------------------------------------------------- */
/* NEWS */

.custom-post-text {
    font-size: 1rem;
    line-height: 1.7;
    color: #535353;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.custom-post-sub-title {
    color: #E9518E;
    font-size: 1rem;
    font-size: 1.5rem;
    margin-top: 24px;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.custom-post-link {
    color: #E9518E;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.custom-post-storelink {
    color: #7D40A0;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 口コミ */

.crl-for-therapist-page {
    background: #fff;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
    font-family: 'Noto Sans JP', sans-serif;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 500;
}

.crl-page-content {
    height: 100%;
    overflow-y: auto;
    width: 100%;
}

.crl-page-content-title {
    font-size: 1.5rem;
    font-weight: 500;
    color: #E9528E;
    text-align: center;
    margin-top: 40px;
}

.crl-page-header {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width:100%;
}

.crl-page-header-therapist-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}

.crl-page-header-rate-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    justify-content: center;
    justify-content: space-around;
    min-height: 120px;
    margin-top: 20px;
}

.crl-page-header-five-star {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.crl-page-header-image-container {
    width: 80px;
    height: 80px;
    position: relative;
    display: inline-block;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.crl-page-header-image {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.crl-therapist-name {
    font-size: 1rem;
    color: #535353;
}

#starRatingChart {
    width: 50% !important;
    height: auto !important;
    display: block;
}

.crl-average-rating {
    font-size: 20px;
    display: flex;
    align-items: center;
    gap: 0px;
    color: #E9528E;
    flex-direction: column;
}

.crl-average-rating .average-star {
    color: #AAAAAC;
    transition: color 0.3s, transform 0.2s ease-in-out;
    position: relative;
}

.crl-average-rating .average-star.selected {
    color: #E9528E;
    transform: scale(1.1);
}

.crl-average-rating .average-star.half-selected::before {
    content: "★";
    position: absolute;
    color: #E9528E;
    width: 50%;
    overflow: hidden;
}

.crl-average-rating .average-score {
    font-size: 1.5rem;
    color: #E9528E;
}

.crl-review-count {
    font-size: 0.875rem;
    font-weight: normal;
    color: #535353;
}

.crl-search-container {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-bottom: 1px solid #AAAAAC;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.crl-search-text-content {
    color: #535353;
    border-radius: 8px;
    display: flex;
    justify-content: flex-start;
    gap: 0px;
    width: 100%;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    height: 40px;
    align-items: center;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
}

.crl-search-text-content-image {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.crl-search-text-content-image img {
    width: 100%;
    height: 100%;
}

.crl-review-search {
    font-size: 0.875rem;
    box-sizing: border-box;
    color: #535353;
    font-size: 0.875rem;
    margin-left: 5px;
}


.crl-sort-radio-group-section {
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 100%;
}

.crl-sort-radio-group {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.crl-sort-radio-group input[type="radio"] {
    display: none;
}

.crl-sort-radio-group .radio-label {
    border: 1px solid #AAAAAC;
    background-color: #ffffff;
    padding: 5px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    color: #AAAAAC;
    display: inline-block;
    text-align: center;
}

.crl-sort-radio-group input[type="radio"]:checked + .radio-label {
    background-color: #7D40A0;
    color: #ffffff;
}

.crl-review {
    margin-bottom: 20px;
}

.crl-review-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}

.crl-star-rating {
    font-size: 20px;
    cursor: pointer;
    display: flex;
    justify-content: flex-start;
    gap: 0px;
}

.crl-star-rating .star {
    color: #AAAAAC;
    transition: color 0.3s, transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    transform: scale(1);
}

.crl-star-rating .star.selected {
    color: #E9528E;
    transform: scale(1.1); 
}

.crl-review-created_at {
    color: #535353;
    font-size: 1rem;
}

.crl-review-textarea {
    width: 100%;
    padding: 13px;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 25px;
    border: none;
    background-color: #F5F5F5;
    resize: none;
    box-sizing: border-box;
    pointer-events: none;
    overflow: hidden;
    color: #535353;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin-top: 5px;
}

.crl-no-review-message {
    color: #AAAAAC;
    font-size: 0.875rem;
    text-align: center;
    padding-top: 20px;
}

.crl-review-reply {
    margin-top: 0.3125rem;
    border-radius: 1.5625rem;
    border: 1px solid #AAAAAC;
    background: #fff;
    overflow: hidden;
}

.crl-review-reply > summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0.6rem;
    color: #535353;
    font-size: 0.875rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.crl-review-reply > summary::-webkit-details-marker {
    display: none;
}

.crl-review-reply > summary::after {
    content: "";
    width: 10px;
    height: 10px;
    border-right: 2px solid #AAAAAC;
    border-bottom: 2px solid #AAAAAC;
    transform: rotate(-45deg);
    transition: transform 0.2s ease, border-color 0.2s ease;
    margin-left: 6px;
}

.crl-review-reply[open] > summary::after {
    transform: rotate(45deg);
    border-color: #E9528E;
}

.crl-review-reply-message {
    width: 100%;
    line-height: 1.5;
    border-top: 1px solid #EEEEEE;
    background-color: #F5F5F5;
    resize: none;
    box-sizing: border-box;
    pointer-events: none;
    overflow: hidden;
    color: #535353;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: 0.875rem;
    padding: 0.6rem;
}

.crl-therapist-reply-entry {
    margin-top: 0.3125rem;
    border-radius: 1.5625rem;
    border: 1px solid #AAAAAC;
    background: #fff;
    overflow: hidden;
}

.crl-therapist-reply-open-modal {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0.6rem;
    color: #535353;
    font-size: 0.875rem;
    justify-content: center;
    width: 100%;
}

.crl-post-button {
    position: fixed;
    bottom: 6.5rem !important;
    right: 20px;
    padding: 0.25rem 0.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.125rem;
    height: 3.125rem;
    z-index: 100;
    border-radius: 50%;
    background-color: #E9528E;
    border: none;
}

.crl-post-button img {
    height: 1.5rem;
    width: 1.5rem;
}

@media screen and (min-width: 1024px) {
    .crl-post-button {
        right: calc(13.0208333333% + 1.25rem);
    }
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 店舗 */

.crl-for-store-page {
    background: #fff;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
    font-family: 'Noto Sans JP', sans-serif;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 500;
}

.crl-page-header-store-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}

.crl-store-name {
    font-size: 1rem;
    color: #535353;
}

.crl-for-store-review-header {
    display: flex;
    flex-direction: column;
}

.crl-for-store-review-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}

.crl-for-store-therapist-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.crl-for-store-therapist-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.crl-for-store-therapist-name {
    color: #535353;
    font-size: 0.875rem;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 店舗(管理) */

.crl-for-store-management-page {
    background: #fff;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
    font-family: 'Noto Sans JP', sans-serif;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 500;
}

.crl-for-store-display-btn-content {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 5px;
}

.crl-for-store-non-display-btn {
    font-size: 0.875rem;
    text-align: center;
    color: #7D40A0;
    width: 100px;
    height: 30px;
    border-radius: 30px;
    border: solid 1px #7D40A0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crl-for-store-display-btn {
    font-size: 0.875rem;
    text-align: center;
    color: #fff;
    background: #AAAAAC;
    width: 100px;
    height: 30px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crl-review-hidden {
    position: relative;
}

.crl-review-hidden::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    pointer-events: none;
    border-radius: 10px;
}

.crl-for-store-display-btn {
    position: relative;
    z-index: 1;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* セラピスト(管理) */

.crl-for-therapist-management-page {
    background: #fff;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
    font-family: 'Noto Sans JP', sans-serif;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 500;
}

.crl-for-therapist-display-btn-content {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 5px;
}

.crl-for-therapist-non-display-btn {
    font-size: 0.875rem;
    text-align: center;
    color: #7D40A0;
    width: 100px;
    height: 30px;
    border-radius: 30px;
    border: solid 1px #7D40A0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crl-for-therapist-display-btn {
    font-size: 0.875rem;
    text-align: center;
    color: #fff;
    background: #AAAAAC;
    width: 100px;
    height: 30px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crl-for-therapist-display-btn {
    position: relative;
    z-index: 1;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 検索ページ */

.cs-custom-search-page {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
    background: #fff;
    font-weight: 500;
}

.cs-custom-search-page-content {
    height: 100%;
    overflow-y: auto;
}

.cs-custom-search-page-content-title {
    font-size: 1.5rem;
    font-weight: 500;
    color: #E9528E;
    text-align: center;
    margin-top: 40px;
}

.cs-custom-search-header {
    display: flex;
    border-bottom: 1px solid #AAAAAC;
    z-index: 10;
    width: 100%;
    flex-direction: column;
    margin-top: 40px;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.open-detailed-conditions-modal-button {
    color: #535353;
    border-radius: 8px;
    display: flex;
    justify-content: flex-start;
    gap: 0px;
    width: 100%;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    height: 40px;
    align-items: center;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    margin-top: 10px;
}

.open-detailed-conditions-modal-button-image {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.open-detailed-conditions-modal-button img {
    width: 100%;
    height: 100%;
}



.open-date-conditions-modal-button {
    color: #535353;
    border-radius: 8px;
    display: flex;
    justify-content: flex-start;
    gap: 0px;
    width: 100%;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    height: 40px;
    align-items: center;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    margin-top: 10px;
}

.open-date-conditions-modal-button-day {
    display: flex;
    flex-direction: row;
    align-items: center;
}



.open-date-conditions-modal-button-image {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.open-date-conditions-modal-button img {
    width: 100%;
    height: 100%;
}

.cs-selected-date-content {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

#cs-selected-date {
    font-size: 0.875rem;
    width: 85px;
    margin-left: 10px;
    text-align: left;
    color: #7D40A0;
}

#cs-selected-time {
    font-size: 0.875rem;
    width: 85px;
    margin-left: 10px;
    text-align: left;
    color: #7D40A0;
}

.cs-date-picker {
    width: 100%;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 1rem;
}

.selected-detailed-conditions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    margin-left: 5px;
    flex-grow: 1;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.selected-detailed-conditions::-webkit-scrollbar {
    display: none;
}


.selected-detailed-conditions .cs-selected-tag {
    padding: 5px 10px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.75rem;
    width: auto;
    transition: all 0.2s ease;
    background-color: #7D40A0;
    color: white;
    border-color: #7D40A0;
    white-space: nowrap;
}


.cs-custom-search-result {
    display: grid;
    scrollbar-width: thin;
    position: relative;
    gap: 20px;
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    margin-bottom: 40px;
}

.cs-therapist-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.cs-working-badge {
    position: absolute;
    background-color: #E9528E;
    color: white;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    border-radius: 0.75rem;
    font-size: 0.75rem;
    left: 0.625rem;
    padding: 0.25rem 0.5rem;
    top: 0.625rem;
}

.cs-next-working-badge {
    position: absolute;
    background-color: #7D40A0;
    color: white;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    border-radius: 0.75rem;
    font-size: 0.75rem;
    left: 0.625rem;
    padding: 0.25rem 0.5rem;
    top: 0.625rem;
}

.cs-therapist-image {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    position: relative;
}

.cs-therapist-image-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.cs-heart-wrapper {
    position: absolute;
    right: 5px;
    bottom: 5px;
    background-color: rgba(240, 240, 240, 0.8);
    border-radius: 50%;
    padding: 4px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    z-index: 10;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cs-heart-img {
    width: 24px;
    height: auto;
}

.cs-therapist-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 10px;
}

.cs-therapist-name {
    font-size: 1.125rem;
    color: #535353;
}

.cs-therapist-age,
.cs-therapist-store-name,
.cs-therapist-schedule {
    font-size: 0.875rem;
    color: #535353;
}

.cs-sort-radio-group-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.cs-sort-radio-group {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.cs-sort-radio-group input[type="radio"] {
    display: none;
}

.cs-sort-radio-group .radio-label {
    border: 1px solid #AAAAAC;
    background-color: #ffffff;
    padding: 5px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    color: #AAAAAC;
    display: inline-block;
    text-align: center;
}

.cs-sort-radio-group input[type="radio"]:checked + .radio-label {
    background-color: #7D40A0;
    color: #ffffff;
}

.search-result-empty {
    text-align: center;
    font-size: 1rem;
    color: #AAAAAC;
    margin: 20px 0;
    grid-column: 1 / -1;
    justify-self: center;
}

.cs-reset-all-btn {
    color: #fff;
    font-size: 0.875rem;
    border-radius: 50px;
    border: 1px solid #AAAAAC;
    background-color: #AAAAAC;
    padding: 5px 10px;
    width: 120px;
    margin-left: auto;
}

.cs-custom-search-header-btn-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.custom-search-matching-toast {
    position: absolute;
    bottom: 48px;
    left: -100%;
    transform: translateX(-50%);
    background-color: #E9528E;
    color: #fff;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 20;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    text-align: center;
}

.custom-search-matching-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(-4px);
}

.open-detailed-conditions-modal-button-title,
.open-date-conditions-modal-button-title {
    font-size: 0.875rem;
    color: #535353;
}

.open-date-conditions-modal-button-title {
    margin-top: 20px;
}



/* ------------------------------------------------------------------------------------------------------------------ */

/* モーダル共通 */
.cs-date-conditions-modal,
.cs-detailed-conditions-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.cs-date-conditions-modal,
.cs-detailed-conditions-modal,
.cs-date-conditions-modal *,
.cs-detailed-conditions-modal * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.cs-detailed-conditions-modal-content {
    background: #ffffff;
    width: 100%;
    max-width: 600px;
    height: 100dvh;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    padding-left: 20px;
    padding-right: 20px;
    font-weight: 500;
}

.cs-date-conditions-modal-content {
    background: #ffffff;
    width: 100%;
    max-width: 600px;
    height: 100dvh;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    padding-left: 20px;
    padding-right: 20px;
    font-weight: 500;
}

.cs-date-conditions-modal-close,
.cs-detailed-conditions-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 1.5rem;
    color: #333;
    z-index: 100;
}

.cs-up-button {
    position: fixed;
    bottom: 80px;
    right: 5px;
    padding: 4px 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    z-index: 100;
    border-radius: 50%;
    background: #9E6CBB;
}

.cs-left-slide-card-stack {
    position: fixed;
    bottom: 6.5rem;
    left: 0;
    z-index: 100;
    width: 90px;
    height: calc(90px * 4 / 3 + 12px);
}

.cs-left-slide-card {
    position: absolute;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: #9E6CBB;
    color: #fff;
    font-size: 0.875rem;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    aspect-ratio: 3 / 4;
    width: 90px;
    transform: translateX(calc(-100% + 40px)) rotate(0deg);
    opacity: 0;
    will-change: transform, opacity;
    pointer-events: none;
    animation: csTinderSwipeCycle 9s ease-in-out infinite both;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: transparent;  
}

.card-1 { top: 0;    }
.card-2 { top: 6px;  }
.card-3 { top: 12px; }

@keyframes csTinderSwipeCycle {
    0%   { transform: translateX(calc(-100% + 40px)) rotate(0);   opacity: 1;  pointer-events: auto; }
    8%   { transform: translateX(calc(-100% + 40px)) rotate(0);   opacity: 1;  pointer-events: auto; }
    20%  { transform: translateX(0) rotate(0);                    opacity: 1;  pointer-events: auto; }
    40%  { transform: translateX(0) rotate(0);                    opacity: 1;  pointer-events: auto; }
    55%  { transform: translateX(30vw) translateY(-20px) rotate(16deg); opacity: 0; pointer-events: none; }
    56%  { transform: translateX(-30vw) translateY(0) rotate(-8deg);     opacity: 0; pointer-events: none; }
    70%  { transform: translateX(calc(-100% + 40px)) rotate(0);   opacity: 0;  pointer-events: none; }
    100% { transform: translateX(calc(-100% + 40px)) rotate(0);   opacity: 0;  pointer-events: none; }
}

.card-1 { animation-delay: 0s;   z-index: 3; }
.card-2 { animation-delay: 3s;   z-index: 2; }
.card-3 { animation-delay: 6s;   z-index: 1; }

.cs-left-slide-card-label {
    white-space: nowrap;
    line-height: 1;
}


.cs-left-swipe-finger {
    position: absolute;
    top: 40px;
    left: 8px;
    width: 60px;
    height: auto;
    z-index: 999;
    pointer-events: none;
    opacity: 0;
    animation: csFingerSwipe 3s ease-in-out infinite both;
}

.cs-left-swipe-finger img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2));
}

@keyframes csFingerSwipe {
    0%   { transform: translate(0, 0) rotate(0deg) scale(1);   opacity: 0; }
    10%  { transform: translate(0, 0) rotate(0deg) scale(1);   opacity: 1; }
    40%  { transform: translate(28px, -6px) rotate(6deg) scale(1.01); opacity: 1; }
    60%  { transform: translate(40px, -10px) rotate(10deg) scale(1.02); opacity: 0.9; }
    80%  { transform: translate(35px, -8px) rotate(12deg) scale(1.03); opacity: 0; }
    100% { transform: translate(0, 0) rotate(0deg) scale(1);   opacity: 0; }
}

.cs-left-swipe-guide {
    position: absolute;
    top: -18px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 0.825rem;
    color: #9E6CBB;
    text-shadow: 0 0 4px rgba(0,0,0,0.6);
    opacity: 0;
    animation: csGuideFade 3s ease-in-out infinite both;
    pointer-events: none;
    white-space: nowrap;
    font-weight: bold;
}

@keyframes csGuideFade {
    0%   { opacity: 0; }
    30%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { opacity: 0; }
}

.cs-left-slide-card-stack-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: block;
    background: transparent;
    pointer-events: auto;
    text-decoration: none;
    cursor: pointer;
}

@media screen and (min-width: 1024px) {
    .cs-left-slide-card-stack {
        left: unset;
        right: calc(13.0208333333% + 22.5rem);
    }

    .cs-up-button {
        right: calc(13.0208333333% + 1.25rem) !important;
    }    
}






/* ------------------------------------------------------------------------------------------------------------------ */

/* 日程条件モーダル */

.cs-date-conditions-content {
    height: 100%;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding-bottom: 100px;
}

.cs-date-conditions-content::-webkit-scrollbar {
    display: none;
}


.cs-date-conditions-content-title {
    font-size: 1.5rem;
    font-weight: 500;
    color: #E9528E;
    text-align: center;
    margin-top: 40px;
}

#cs-time-select-container {
    position: relative;
}

.cs-time-select-title {
    font-size: 0.875rem;
    color: #535353;
    text-align: center;
    margin-top: 40px;
}

#cs-time-select-container::before {
    border-left: 1px solid #7D40A0;
    border-top: 1px solid #7D40A0;
    content: "";
    display: block;
    height: 7px;
    position: absolute;
    right: 20px;
    top: 78%;
    transform: translatey(-50%) rotate(-135deg);
    width: 7px;
}

#cs-time-select {
    border: 1px solid #7D40A0;
    padding: 12px 18px;
    border-radius: 30px;
    text-align: center;
    text-align-last: center;
    color: #7D40A0 !important;
    font-size: 1rem;
    background-color: #ffffff;
    transition: all 0.3s ease-in-out;
    width: 180px;
    margin-top: 10px;
    font-weight: 500;
}

#cs-time-select option {
    text-align: center;
}

#cs-calendar {
    height: auto;
    margin-top: 20px;
}

.fc .fc-toolbar {
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.cs-date-conditions-modal .fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 20px;
}

.cs-date-conditions-modal .fc .fc-toolbar-title {
    font-size: 1.125rem;
    margin: 0px;
    color: #535353;
}

.cs-date-conditions-modal thead {
    background: #AAAAAC;
}

.fc .fc-col-header-cell-cushion {
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    background: #AAAAAC;
}

.cs-date-conditions-modal .fc .fc-daygrid-day-number {
    padding: 4px;
    position: relative;
    z-index: 4;
    font-size: 0.875rem;
    color: #535353;
}

.fc .fc-button {
    background-color: #AAAAAC !important;
    border: none;
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
    user-select: none;
    vertical-align: middle;
    transition: all 0.3s ease-in-out;
    color: white;
    padding-bottom: 2px;
    padding-top: 0px;
}

.fc .fc-daygrid-day.fc-day-today {
    background: #F3E7FD !important;
}

.fc .fc-button-group {
    display: inline-flex;
    position: relative;
    vertical-align: middle;
    gap: 5px;
}

button.fc-today-button.fc-button.fc-button-primary {
    display: none;
}

.cs-date-conditions-refine-btn{
    display: inline-block;
    font-size: 1rem;
    color: white;
    text-align: center;
    z-index: 100;
    padding-left: 15px;
    padding-right: 15px;
}

/* ------------------------------------------------------------------------------------------------------------------ */

/* 詳細条件モーダル */

.cs-detailed-conditions-content {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding-bottom: 40px;
}

.cs-detailed-conditions-content::-webkit-scrollbar {
    display: none;
}

.cs-detailed-conditions-section {
    width: 100%;
    padding-top: 40px;
}

.cs-detailed-conditions-section-title {
    font-size: 1.5rem;
    font-weight: 500;
    color: #E9528E;
    text-align: center;
    margin-bottom: 20px;
}

.cs-tags-content {
    margin-bottom: 40px;
}

.cs-tags-content-title,
.cs-age-range-content-title {
    font-size: 1rem;
    color: #7D40A0;
    text-align: center;
    border-bottom: solid 1px #7D40A0;
    width: 100%;
}

.cs-mbti-content-title {
    font-size: 1rem;
    color: #7D40A0;
    text-align: center;
    border-bottom: solid 1px #7D40A0;
    width: 100%;
}


.cs-tags {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cs-tags .cs-tag-button {
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.875rem;
    min-width: 60px;
    transition: all 0.2s ease;
    border: 1px solid #AAAAAC;
    background-color: #ffffff;
    color: #AAAAAC;
}

.cs-tags .cs-tag-button.selected {
    background-color: #7D40A0;
    color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

#cs-mbti-select {
    border: none;
    background-color: #F5F5F5;
    color: #535353;
    width: 100%;
    border-radius: 1.5625rem;
    margin-top: 1.25rem;
    padding: 0.75rem;
}

.cs-mbti-message {
    font-size: 0.875rem;
    color: #AAAAAC; 
    text-decoration: underline;
    margin-top: 0.5rem;
}

.cs-whole-footer {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    background: #fff;
    display: flex;
    flex-direction: row;
    padding: 10px;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1), 0px 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.cs-footer {
    display: flex;
    flex-direction: row;
    gap: 6px;
    background: #E9528E;
    align-items: center;
    min-width: 280px;
    height: 46px;
    justify-content: center;
}

.cs-footer > * {
    position: relative;
}

.cs-footer > *:not(:first-child)::before {
    content: "";
    position: absolute;
    left: -4px;
    top: -3px;
    bottom: -3px;
    width: 1px;
    background-color: #fff;
}

.cs-detailed-conditions-refine-btn {
    display: inline-block;
    font-size: 1rem;
    color: white;
    text-align: center;
    z-index: 100;
    padding-left: 15px;
    padding-right: 15px;
}

.cs-detailed-conditions-reset-btn,
.cs-date-conditions-reset-btn {
    color: #535353;
    font-size: 0.875rem;
    z-index: 100;
}

.cs-hit-count {
    color: #fff;
    z-index: 100;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    padding-right: 10px;
    padding-left: 10px;
}

.cs-hit-count-title {
    font-size: 0.875rem;
    margin-right: 5px;
}

.cs-hit-count-number-wrapper {
    margin-bottom: -2px;
}

.cs-hit-count-number
{
    font-size: 1.125rem;
    margin-bottom: -2px;
}

.cs-hit-count-unit {
    font-size: 0.875rem;
    margin-left: 2px;
}

.cs-loader-wrapper {
    display: block;
    width: auto;
    height: auto;
}

.cs-dot-loader {
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 5px;
    flex-wrap: nowrap;
    height: 20px;
    min-width: 20px;
    white-space: nowrap;
    line-height: 0;
    box-sizing: border-box;
    isolation: isolate;
    contain: layout style;
}
  
.cs-dot-loader div {
    width: 5px;
    height: 5px;
    min-width: 5px;
    min-height: 5px;
    background-color: #fff;
    border-radius: 50%;
    animation: wave 1.2s infinite ease-in-out;
    display: block;
    box-sizing: border-box;
}
  
.cs-dot-loader div:nth-child(1) {
    animation-delay: -0.4s;
}
  
.cs-dot-loader div:nth-child(2) {
    animation-delay: -0.2s;
}
  
.cs-dot-loader div:nth-child(3) {
    animation-delay: 0s;
}
  
@keyframes wave {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.5);
    }
}


.cs-place-content {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: 10px;
}

.cs-place-content .radio-group {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.cs-place-content .radio-group .radio-label {
    display: inline-block;
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    font-size: 1rem;
    color: #7D40A0;
    user-select: none;
}

.cs-place-content .radio-group input[type="radio"] {
    display: none;
}

.cs-place-content .radio-group .radio-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 1px solid #7D40A0;
    border-radius: 50%;
    background-color: transparent;
}

.cs-place-content .radio-group input[type="radio"]:checked ~ .radio-label::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #7D40A0;
}

.cs-place-content #range-slider-container,
.cs-place-content #prefecture-dropdown-container {
    width: 300px;
    text-align: center;
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
    position: relative;
}

.cs-place-content #prefecture-dropdown-container::before {
    border-left: 1px solid #6F6F6F;
    border-top: 1px solid #6F6F6F;
    content: "";
    display: block;
    height: 7px;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translatey(-50%) rotate(-135deg);
    width: 7px;
}

.cs-place-content #range-slider-container label {
    font-size: 1rem;
    color: #535353;
    display: block;
}

.cs-place-content #range-value {
    font-size: 1.5rem;
    color: #7D40A0;
}

#current-location-address {
    margin-top: 10px;
    font-size: 0.875rem; 
    color: #535353;
}

.cs-place-content #range-slider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: #ddd;
    border-radius: 5px;
    outline: none;
    opacity: 0.9;
    transition: opacity 0.2s;
}

.cs-place-content #range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    top: -10px;
    border: 1px solid #D9D9D9;
    background: #FFF;
    box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
}

.cs-place-content #range-slider::-moz-range-thumb {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    top: -10px;
    border: 1px solid #D9D9D9;
    background: #FFF;
    cursor: pointer;
    box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
}

.cs-place-content #prefecture-dropdown-container label {
    font-size: 1.1em;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
    display: block;
}

.cs-place-content #prefecture {
    width: 100%;
    background-color: #F5F5F5;
    border: none;
    border-radius: 1.5625rem;
    color: #535353;
    font-size: 0.875rem;
    margin-bottom: 0;
    margin-top: 5px;
    padding: 13px;
}

.cs-place-content #prefecture option {
    text-align: center;
}

.cs-age-range-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;

}

.cs-mbti-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1.875rem;
}

.cs-age-range-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 15px;
    padding: 10px;
    border-radius: 8px;
    width: 90%;
    height: 200px;
}

.cs-age-range-container label {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 8px;
}

#age-range-slider {
    width: 100%;
    height: 10px;
    margin-top: 10px;
    z-index: 0;
}

.cs-age-range-values {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 0.875rem;
    color: #555;
    margin-top: 10px;
}

#age-range-label {
    font-size: 1.125rem;
    font-weight: bold;
    color: rgb(233, 81, 142);
    margin-bottom: 5px;
}

.noUiSlider-wrap .inner-block {
    padding: 50px;

}

.noUiSlider-wrap .text-wrap {
margin: 30px auto;
}

.noUi-horizontal .noUi-handle {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    top: -10px !important;
}

.noUi-horizontal .noUi-tooltip {
    display: none !important;
}

.noUi-horizontal .noUi-handle::before, .noUi-horizontal .noUi-handle::after  {
content: none;
}

.noUi-connect {
    background: linear-gradient(90deg, #9E6CBB 0%, #7D40A0 100%) !important;
}


.cs-age-filter-toggle .checkbox-group {
    margin-top: 1.25rem;
}

.cs-age-filter-toggle .checkbox-group .checkbox-label {
    display: inline-block;
    position: relative;
    padding-left: 1.75rem;
    cursor: pointer;
    font-size: 1rem;
    color: #7D40A0;
    user-select: none;
}

.cs-age-filter-toggle .checkbox-group input[type="checkbox"] {
    display: none;
}

.cs-age-filter-toggle .checkbox-group .checkbox-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 1rem;
    width: 1rem;
    border: 1px solid #7D40A0;
    border-radius: 50%;
    background-color: transparent;
}

.cs-age-filter-toggle .checkbox-group input[type="checkbox"]:checked ~ .checkbox-label::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 0.5rem;
    left: 0.25rem;
    width: 0.5rem;
    border-radius: 50%;
    background-color: #7D40A0;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 店舗一覧 */

.custom-store-list-page {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
    background: #fff;
    font-weight: 500;
}

.custom-store-list-page,
.custom-store-list-page * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.custom-store-list-content {
    height: 100%;
    overflow-y: auto;
}

.custom-store-list-content-title {
    font-size: 1.5rem;
    font-weight: 500;
    color: #E9528E;
    text-align: center;
    margin-top: 40px;
}


.custom-store-list-tabs {
    display: flex;
    flex-direction: row;
    gap: 5px;
    overflow-x: auto;
    scroll-behavior: smooth;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    margin: 40px auto 0px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.custom-store-list-tabs::-webkit-scrollbar {
    display: none;
}

.custom-store-list-tab-button {
    padding: 3px 10px;
    border: 1px solid #AAAAAC;
    background-color: #ffffff;
    color: #AAAAAC;
    font-size: 0.75rem;
    border-radius: 20px;
    cursor: pointer;
    width: 60px;
    transition: all 0.2s ease-in-out;
}

.custom-store-list-tab-button.active {
    background-color: #7D40A0;
    color: #ffffff;
}

.custom-store-list-grid {
    display: flex;
    flex-direction: column;
}

.custom-store-list-tab-content {
    max-width: 600px;
    margin: 40px auto 0 auto;
}

.custom-store-list-card-horizontal {
    display: flex;
    position: relative;
    text-decoration: none;
    color: inherit;
    align-items: flex-start;
    width: 100%;
    border-bottom: 2px solid #AAAAAC;
    flex-direction: column;
    padding-bottom: 40px;
    margin-bottom: 40px;
}

.custom-store-list-page .swiper-container {
    width: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.custom-store-list-page .swiper-wrapper {
    width: 100%;
    display: flex;
}

.custom-store-list-page .swiper-slide {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    overflow: hidden;
    border-radius: 12px;
}

.custom-store-list-page .swiper-slide a {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
}

.custom-store-list-page .swiper-slide a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.custom-store-list-page .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.custom-store-list-page .swiper-pagination {
    position: relative;
    margin-top: 20px;
    text-align: center;
    z-index: 1;
}

.custom-store-list-page .swiper-pagination-bullet {
    background: #AAAAAC;
    opacity: 0.6;
    transition: opacity 0.3s;
}

.custom-store-list-page .swiper-pagination-bullet-active {
    opacity: 1;
    background: #E9528E;
}

.custom-store-list-image-placeholder {
    width: 100%;
    aspect-ratio: 3 / 4;
    background-color: #e0e0e0;
    color: #666;
    font-size: 0.875rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    text-align: center;
}

.custom-store-list-card-header {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-direction: row;
    margin-bottom: 20px;
}

.custom-store-list-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 20px;
}

.custom-store-list-name {
    font-size: 1.5rem;
    color: #535353;
    white-space: nowrap;
    overflow: hidden;
    font-weight: 500;
}

.custom-store-list-info {
    position: relative;
    width: 100%;
    height: 60px;
    border: 1px solid #AAAAAC;
    border-radius: 8px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    background-color: #fff;
    padding-top: 10px;
    color: #535353;
}

.custom-store-list-info::before {
    content: attr(data-label);
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    padding: 5px 0px;
    font-size: 0.75rem;
    color: #7D40A0;
    font-weight: 500;
    border: 1px solid #AAAAAC;
    border-radius: 12px;
    width: 70px;
}

.custom-store-list-card-btn-content {
    display: flex;
    flex-direction: row;
    margin-top: 20px;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.custom-store-list-card-info-content {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.custom-store-list-button {
    height: 40px;
    font-size: 1rem;
    background: #fff;
    color: #7D40A0;
    border-radius: 24px;
    width: 100%;
    position: relative;
    text-align: center;
    border: solid 1px #7D40A0;
    padding: 5px;
}

.custom-store-list-button::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 20px;
    width: 7px;
    height: 7px;
    border-bottom: 1px solid #7D40A0;
    border-left: 1px solid #7D40A0;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}

.custom-store-list-no-message {
    text-align: center;
    font-size: 1rem;
    color: #AAAAAC;
    margin-top: 40px;
}

.csl-up-button {
    position: fixed;
    bottom: 80px;
    right: 5px;
    padding: 4px 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    z-index: 100;
    border-radius: 50%;
    background: #9E6CBB;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* セラピスト管理 */

.cstm-page {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    background: #fff;
    margin-bottom: 40px;
}

.cstm-page, 
.cstm-page * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.cstm-title {
    font-size: 1.5rem;
    font-weight: 500;
    color: #E9528E;
    text-align: center;
    margin-top: 40px;
}

#cstm-search-box {
    font-size: 0.875rem;
    padding: 13px;
    border: none;
    border-radius: 25px;
    background-color: #F5F5F5;
    width: 100%;
    color: #535353;
    margin-top: 40px;
}

.cstm-sort {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-top: 20px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #AAAAAC;
}

.cstm-sort-radio-group {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.cstm-sort-radio-group input[type="radio"] {
    display: none;
}

.cstm-sort-radio-group .radio-label {
    border: 1px solid #AAAAAC;
    background-color: #ffffff;
    padding: 5px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.2s ease;
    color: #AAAAAC;
    display: inline-block;
    text-align: center;
}

.cstm-sort-radio-group input[type="radio"]:checked + .radio-label {
    background-color: #7D40A0;
    color: #ffffff;
}

#cstm-therapist-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    overflow: auto;
    flex-direction: column;
    align-items: center;
}

.cstm-card {
    border-radius: 10px;
    border: 1px solid #AAAAAC;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px;
    margin-bottom: 40px;
    position: relative;
}

.cstm-top {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    border-bottom: solid 1px #AAAAAC;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.cstm-top-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    white-space: nowrap;
    overflow: hidden;
}

.cstm-avatar {
    min-width: 80px;
    max-width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cstm-avatar img {
    border-radius: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cstm-name {
    font-size: 1rem;
    font-weight: bold;
    color: #535353;
    white-space: nowrap;
    overflow: hidden;
}

.cstm-email {
    font-size: 0.875rem;
    color: #535353;
    white-space: nowrap;
    overflow: hidden;
}

.cstm-user-id {
    font-size: 0.75rem;
    color: #535353;
}

.cstm-store-id {
    font-size: 0.75rem;
    color: #535353;
}

.cstm-last-login {
    font-size: 0.875rem;
    color: #535353;
}

.cstm-bottom {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
}


.cstm-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.875rem;
    color: #7D40A0;
    min-width: 68px
}

.cstm-btn img {    
    height: 30px;
    width: auto;
}

.cstm-badge {
    background: #7D40A0;
    color: #fff;
    font-size: 0.875rem;
    position: absolute;
    text-align: center;
    top: 20px;
    right: 20px;
    width: 60px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 25px;
    font-weight: 100;
}

.cstm-error-message {
    text-align: center;
    font-size: 1rem;
    color: #AAAAAC;
    margin: 20px 0;
}

.cstm-register-therapist-button {
    position: fixed;
    bottom: 6.5rem;
    right: 1.25rem;
    padding: 4px 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    z-index: 100;
    border-radius: 50%;
    background-color: #E9528E;
    border: none;
}

@media screen and (min-width: 1024px) {
    .cstm-register-therapist-button {
        right: calc(13.0208333333% + 1.25rem);
    }
}

.cstm-register-therapist-button img {
    width: 24px;
    height: 24px;
}

.cstm-delete-btn {
    background: #AAAAAC;
    color: #fff;
    font-size: 0.875rem;
    text-align: center;
    width: 60px;
    height: 25px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    margin-left: auto;
    margin-right: 0;
}


/* -------------------------------------------------------------------------------- */

.cstm-invite-page {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    background: #fff;
}

.cstm-invite-page, 
.cstm-invite-page * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.cstm-invite-form-section {
    margin-top: 2.5rem;
    display: flex;
    flex-direction: column;
    position: relative;
}

.cstm-invite-form-section label {
    font-size: 1rem;
    color: #535353;
    display: flex;
    flex-direction: row;
    align-items: center;
}

#cstm-invite-form-name,
#cstm-invite-form-email {
    border: none;
    background-color: #F5F5F5;
    color: #535353;
    width: 100%;
    resize: none;
    border-radius: 1.5625rem;
    margin-top: 0.3125rem;
    padding: 0.75rem;
}

.cstm-invite-form-counter {
    color: #AAAAAC;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    bottom: 0.3125rem;
    font-size: 0.875rem;
    right: 0.625rem;    
}

#cstm-invite-submit {
    display: flex;
    position: relative;
    background-color: #E9528E;
    color: white;
    text-decoration: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 1.875rem;
    font-size: 1rem;
    gap: 0.1875rem;
    padding: 0.75rem 1.25rem;
    width: 18.625rem;
    margin: 0 auto;
    margin-top: 40px;
}

#cstm-invite-submit.is-disabled {
    background-color: #AAAAAC;
    color: #fff;
    cursor: not-allowed;
    pointer-events: none;
    transition: none;
}

#cstm-invite-submit::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    height: 0.625rem;
    right: 1.625rem;
    width: 0.625rem;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}

.cstm-invite-store {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-top: 20px;
}

.cstm-invite-store-avatar-wrap {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #fff;
}

.cstm-invite-store-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cstm-invite-store-meta {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.cstm-invite-store-label {
    font-size: 0.875rem;
    color: #AAAAAC;
}

.cstm-invite-store-name {
    font-size: 1rem;
    color: #535353;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cstm-invite-status {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 0.375rem;
    padding: 0.75rem 1rem;
    margin-top: 20px;
    background: #FAFAFA;
    border-radius: 0.875rem;
    border: 1px solid #EFEFEF;
}

.cstm-status-item {
    font-size: 0.875rem;
    color: #535353;
    word-break: break-word;
}

.cstm-invite-status-invalid {
    color: #AAAAAC;
    text-align: center;
}


/* -------------------------------------------------------------------------------- */

.cstm-invite-success-page {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    background: #fff;
}

.cstm-invite-success-page-message {
    margin-top: 20px;
    font-size: 1rem;
    text-align: center;
    color: #535353;
}

.cstm-invite-success-desc {
    margin-top: 20px;
    color: #535353;
    text-align: center;
    font-size: 1rem;
}

.cstm-invite-success-tips {
    margin-top: 40px;
    background: #F9F9F9;
    border-radius: 10px;
    padding: 1rem;
    color: #535353;
}

.cstm-invite-success-tips-title {
    font-size: 1rem;
    margin-bottom: 10px;
    color: #535353;
}

.cstm-invite-success-tips ul {
    margin: 0;
    padding-left: 1.2rem;
}

.cstm-invite-success-tips li {
    line-height: 1.8;
    font-size: 0.825rem;
}


.cstm-invite-success-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 40px;
    flex-wrap: wrap;
}

.cstm-invite-success-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #E9528E;
    color: #fff;
    text-decoration: none;
    border-radius: 1.875rem;
    padding: 0.65rem 1.25rem;
    min-width: 10rem;
    font-size: 0.95rem;
}

.cstm-invite-success-btn.is-secondary {
    background: #F0F0F0;
    color: #535353;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* Swal */

/* 全体 */
.swal2-warning,
.swal2-info,
.swal2-question {
    border-color: #E9528E !important;
    color: #E9528E !important;
    height: 60px;
    width: 60px;
    margin: 40px auto 10px !important;
}

.swal2-error {
border-color: #E9528E !important;
color: #E9528E !important;
transform: scale(0.8);
}

.swal2-success {
    transform: scale(0.8);
    border-color: #E9528E !important;
    color: #E9528E !important;
}

.swal2-error .swal2-x-mark-line-left,
.swal2-error .swal2-x-mark-line-right {
background-color: #E9528E !important;
}

.swal2-icon-content {
    font-size: 40px !important;
}

div:where(.swal2-icon).swal2-success {
    border-color: #E9528E !important;
    color: #E9528E !important;
}

div:where(.swal2-icon).swal2-success [class^=swal2-success-line] {
    background-color: #E9528E !important;
}

div:where(.swal2-icon).swal2-success [class^=swal2-success-line] {
    background-color: #E9528E !important;
}

div:where(.swal2-icon).swal2-success .swal2-success-ring {
    border: .25em solid #E9528E !important;
}

div:where(.swal2-container) div:where(.swal2-validation-message)::before {
    background-color: #E9528E !important;
}

/* htmlコンテナ */
#swal2-html-container {
    width: 100%;
    overflow: hidden;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    font-size: 1rem;
    color: #535353;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* ボタンコンテナ */
.swal2-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    margin-bottom: 40px;
}

/* エラーOKボタン */
.custom-error-ok-button {
    font-size: 0.875rem;
    background: #E9528E;
    color: #fff;
    border-radius: 100px;
    width: 120px;
    height: 30px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    margin: 0 auto;
    display: block;
    position: relative;
}

.custom-ok-button {
    font-size: 0.875rem;
    background: #E9528E;
    color: #fff;
    border-radius: 100px;
    width: 120px;
    height: 30px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    margin: 0 auto;
    display: block;
    position: relative;
}

.custom-bluesky-button {
    background: #1185FE;;
    color: #fff;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    margin: 0 auto;
    display: block;
    position: relative;
    border-radius: 6.25rem;
    font-size: 0.875rem;
    height: 1.875rem;
    width: 7.5rem; 
}

.custom-login-guidance-button {
    font-size: 0.875rem;
    background: #E9528E;
    color: #fff;
    border-radius: 100px;
    width: 140px;
    height: 30px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    margin: 0 auto;
    display: block;
    position: relative;
}

.custom-cancel-button {
    font-size: 0.875rem;
    background-color: #AAAAAC;
    color: #fff;
    border-radius: 100px;
    width: 120px;
    height: 30px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    margin: 0 auto;
    display: block;
    position: relative;
}

/* 今後表示しないチェックボックス */
.custom-not-show-again-checkbox-wrapper {
    position: relative;
    padding-left: 30px;
    font-size: 1rem;
    cursor: pointer;
    user-select: none;
    display: inline-block;
    margin-top: 20px;
}

.custom-not-show-again-checkbox-wrapper input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.custom-not-show-again-checkbox-wrapper label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.custom-not-show-again-checkbox-wrapper label::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg) scale(0);
    width: 6px;
    height: 12px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transition: transform 0.3s ease;
}

.custom-not-show-again-checkbox-wrapper input[type="checkbox"]:checked + label::before {
    background-color: #E9528E;
    border-color: #E9528E;
}

.custom-not-show-again-checkbox-wrapper input[type="checkbox"]:checked + label::after {
    transform: translateY(-50%) rotate(45deg) scale(1);
}

/* 全画面 */
.custom-swal-popup-wide {
    width: 100% !important;
    max-width: 600px !important;
    height: auto;
    display: grid !important;
    margin: 0 auto !important;
}

/* 画像用 */
.swal-popup-wide img.swal2-image {
    width: 100%;
    height: auto;
    max-height: 90vh;
    object-fit: contain;
}

/* 黒背景 */
.swal-container-dark.swal2-backdrop-show {
    background: rgba(0, 0, 0, 1) !important;
}

div:where(.swal2-container) div:where(.swal2-footer) {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* トップ */

.ct-swal-logo {
    width: 150px;
    height: auto;
    margin-bottom: 20px;
    margin-top: 40px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.custom-age-ok-button {
    font-size: 0.875rem;
    background: #E9528E;
    color: #fff;
    border-radius: 100px;
    width: 120px;
    height: 50px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    margin: 0 auto;
    display: block;
    position: relative;
}

.custom-age-cancel-button {
    font-size: 0.875rem;
    background-color: #AAAAAC;
    color: #fff;
    border-radius: 100px;
    width: 120px;
    height: 50px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    margin: 0 auto;
    display: block;
    position: relative;
}

.custom-ct-ad-image {
    border-radius: 10px;
    overflow: hidden;
}

.custom-ct-close-button {
    all: unset;
    font-size: 20px;
    color: #E9528E;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
}

.custom-ct-close-button:focus,
.custom-ct-close-button:active {
  outline: none;
  color: #E9528E;
  background: transparent;
  box-shadow: none;
}



/* ------------------------------------------------------------------------------------------------------------------ */
/* 退会画面 */

.custom-ccm-button {
    font-size: 0.875rem;
    background: #E9528E;
    color: #fff;
    border-radius: 100px;
    width: 120px;
    height: 30px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    margin: 0 auto;
    display: block;
    position: relative;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* スライド */

.custom-csp-login-button,
.custom-csp-register-button {
    font-size: 0.875rem;
    background: #E9528E;
    color: #fff;
    border-radius: 100px;
    width: 120px;
    height: 30px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    margin: 0 auto;
    display: block;
    position: relative;
}

.custom-csp-close-button {
    all: unset;
    font-size: 1.125rem;
    color: #AAAAAC;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
}

.custom-csp-close-button:focus,
.custom-csp-close-button:active {
  outline: none;
  color: #AAAAAC;
  background: transparent;
  box-shadow: none;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* プロフィール編集 */

.custom-cup-change-button,
.custom-cup-delete-button {
    font-size: 0.875rem;
    background: #E9528E;
    color: #fff;
    border-radius: 100px;
    width: 120px;
    height: 30px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    margin: 0 auto;
    display: block;
    position: relative;
}

.custom-cup-close-button {
    all: unset;
    font-size: 1.125rem;
    color: #AAAAAC;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
}

.custom-cup-close-button:focus,
.custom-cup-close-button:active {
  outline: none;
  color: #AAAAAC;
  background: transparent;
  box-shadow: none;
}

.cup-profile-continue,
.cup-profile-view,
.cup-role-publish {
    border: none;
    cursor: pointer;
    border-radius: 6.25rem;
    font-size: 0.875rem;
    margin: 0 0.625rem;
    padding: 0.5rem 1rem;
}

.cup-swal-btn-content {
    margin-top: 20px;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cup-profile-continue {
    background-color: #AAAAAC;
    color: white;
}

.cup-profile-view {
    background-color: #E9528E;
    color: white;
}

.cup-role-publish {
    background-color: #E9528E;
    color: white;
}

.cup-swal-status-notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    margin-top: 1.25rem;
}

.cup-swal-status-description {
    color: #E9528E;
}


/* ------------------------------------------------------------------------------------------------------------------ */
/* 予約モーダル */

.ctr-stop-reservation-button,
.ctr-back-button {
    width: 120px;
    padding: 8px 16px;
    margin: 0 10px;
    font-size: 0.875rem;
    border: none;
    border-radius: 100px;
    cursor: pointer;
}

.ctr-stop-reservation-button {
    background-color: #AAAAAC;
    color: white;
}

.ctr-back-button {
    background-color: #E9528E;
    color: white;
}

.ctr-store-contect-button {
    width: 150px;
    padding: 8px 16px;
    margin: 0 10px;
    font-size: 0.875rem;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    background-color: #E9528E;
    color: white;
}

.ctr-reservation-detail-button {
    width: 150px;
    padding: 8px 16px;
    margin: 0 10px;
    font-size: 0.875rem;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    background-color: #E9528E;
    color: white;
}

.cp-swal-container {
    height: 75dvh;
    width: 100%;
    padding-inline: 1.25rem;
    display: flex;
    flex-direction: column;
}

.cp-grid-note {
    margin-top: 10px;
}

.cp-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    flex: 1;
    overflow: auto;
    width: 100%;
    margin-top: 20px;
    justify-items: center;
    align-items: start;
    align-content: start;
}

.cp-grid .cp-empty {
    grid-column: 1 / -1;
    justify-self: center;
    text-align: center;
    color: #AAAAAC;;
}
  
.cp-card {
    border: 1px solid #AAAAAC;
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.cp-card.selected {
    border-color: #7D40A0;
    background: #F3E7FD;
}

.cp-name {
    font-size: 0.825rem;
    color: #535353;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
    min-width: 0;
    text-align: left;
}

.cp-meta {
    margin-top: 5px;
    font-size: 0.825rem;
    display: flex;
    gap: 10px;
    flex-direction: row;
    align-items: center;
}

.cp-price {
    color: #535353;
}

.cp-badge {
    display: inline-block;
    background: #AAAAAC;
    color: #fff;
    padding: 3px 5px;
    border-radius: 9999px;
    min-width: 70px;
}

.course-picker-trigger {
    margin-top: 10px;
    transition: all 0.2s ease;
    border: 1px solid #7D40A0;
    background-color: #ffffff;
    color: #7D40A0;
    border-radius: 1.25rem;
    font-size: 0.875rem;
    min-width: 3.75rem;
    padding: 0.5rem 0.9375rem;
}

.course-picker-trigger--selected {
    background-color: #7D40A0;
    color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.cp-toolbar{
    margin: 20px auto 0;
    width: 100%;
    max-width: 400px;
}

.cp-search input{
    background-color: #F5F5F5;
    border: none;
    border-radius: 25px;
    border-radius: 1.5625rem;
    font-size: 0.875rem;
    font-size: 0.875rem;
    margin-bottom: 0;
    margin-top: 5px;
    margin-top: 0.3125rem;
    padding: 13px;
    padding: 0.8125rem;
    width: 100%;
    max-width: 400px;
}

.cp-summary{
    width: 100%;
    max-width: 400px;
    margin: 10px auto 0;
}

.cp-kpis{
    display:grid; 
    grid-template-columns:repeat(3,1fr); 
    gap:10px;
}

.cp-kpi{
    border-radius: 10px;
    padding: 10px;
    display: flex;
    gap: 5px;
    flex-direction: column;
    background-color: #fff;
    border: solid 1px #535353;
}

.cp-kpi .label{
    font-size: 1rem;
    color: #535353;
}

.cp-kpi .value{
    font-size: 1rem;
    color: #535353;
}

.cp-qty{
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
}

.cp-qty-val{
    min-width: 2.25rem;
    text-align: center;
    font-weight: 500;
    font-size: 1rem;
    color: #535353;
}

.cp-qty-btn{
    -webkit-tap-highlight-color: transparent;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    border: 1px solid #AAAAAC;
    background: #fff;
    color: #7D40A0;
    font-size: 1.125rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, transform .06s ease, box-shadow .2s ease, color .2s ease;
    box-sizing: border-box;
}

.cp-qty-btn:hover{
    background: #F3E7FD; 
    border-color: #7D40A0;
}

.cp-qty-btn:active{
    transform: scale(0.96);
}

.cp-qty-btn:focus-visible{
    outline: none;
    box-shadow: 0 0 0 3px rgba(125,64,160,0.25);
    border-color: #7D40A0;
}

.cp-qty-btn[aria-disabled="true"],
.cp-qty-btn.is-disabled{
    opacity: .45;
    cursor: default;
    pointer-events: none;
}

.cp-card.selected .cp-qty-val{
  color: #7D40A0;
}
.cp-card.selected .cp-qty-btn{
  border-color: #7D40A0;
}

.cp-card.selected .cp-qty-btn:hover{
  background: #EAD6FA;
}




/* ------------------------------------------------------------------------------------------------------------------ */
/* セラピスト予約管理 */

.ctrm-add-shift-button {
    width: 120px;
    padding: 8px 16px;
    margin: 0 10px;
    font-size: 0.875rem;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    background-color: #7D40A0;
    color: white;
}

.ctrm-add-reservation-button {
    width: 120px;
    padding: 8px 16px;
    margin: 0 10px;
    font-size: 0.875rem;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    background-color: #E9528E;
    color: white;
}

.ctrm-add-reservation-button.is-disabled{
    background-color: #AAAAAC;
}


.ctrm-reservation-change-button {
    width: 120px;
    padding: 8px 16px;
    margin: 0 10px;
    font-size: 0.875rem;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    background-color: #E9528E;
    color: white;
}

.ctrm-reservation-delete-button {
    width: 7.5rem;
    padding: 0.5rem 1rem;
    margin: 0 0.625rem;
    font-size: 0.875rem;
    border: solid 1px red;
    border-radius: 6.25rem;
    cursor: pointer;
    background-color: #fff;
    color: red;
}

.ctrm-reservation-delete-cancel-button {
    width: 7.5rem;
    padding: 0.5rem 1rem;
    margin: 0 0.625rem;
    font-size: 0.875rem;
    border: none;
    border-radius: 6.25rem;
    cursor: pointer;
    background-color: #AAAAAC;
    color: #fff;
}

.ctrm-close-button {
    all: unset;
    font-size: 1.125rem;
    color: #AAAAAC;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
}

.ctrm-close-button:focus,
.ctrm-close-button:active {
  outline: none;
  color: #AAAAAC;
  background: transparent;
  box-shadow: none;
}

.ctrm-swal-input-area {
    margin-top: 20px;
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ctrm-swal-input-area label {
    font-size: 1rem;
    color: #535353;
}

.ctrm-swal-input {
    font-size: 0.875rem;
    padding: 13px;
    border: none;
    border-radius: 25px;
    background-color: #F5F5F5;
    width: 100%;
    color: #535353;
    margin-top: 10px;
}

.ctrm-swal-note {
    font-size: 0.75rem;
    color: #E9528E;
}

.ctrm-share-store-textarea {
    height: 150px;
    padding: 13px;
    font-size: 0.875rem;
    border: none;
    border-radius: 25px;
    box-sizing: border-box;
    background-color: #F5F5F5;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin-top: 10px;
    color: #535353;
    width: 90%;
}

.csrm-swal-calendar {
    width: 100%;
    margin-top: 20px;
}

.ctrm-swal-select {
    font-size: 0.875rem;
    padding: 13px;
    border: none;
    border-radius: 25px;
    background-color: #F5F5F5;
    width: 100%;
    color: #535353;
    margin-top: 10px;
    text-align: center;
}

.flatpickr-day.today {
    border-color: #7D40A0 !important;
}

.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
    background: #7D40A0 !important;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #fff;
    border-color: #7D40A0 !important;
}

.csrm-swal-result-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.csrm-swal-result-title {
    font-weight: bold;
    font-size: 1rem;
    color: #7D40A0;
    border-bottom: solid 1px #7D40A0;
}

.csrm-swal-result-time {
    font-size: 0.875rem;
    color: #535353;
    margin-top: 10px;
}

.csrm-swal-result-list {
    margin-top: 10px;
}

.csrm-swal-result-list li {
    position: relative;
    font-size: 0.875rem;
    color: #535353;
}

.csrm-swal-result-title-warning {
    font-size: 0.75rem;
    color: #E9528E;
    margin-top: 10px;
}


.payment-method-after-start-radio-group-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 10px;
    justify-items: center;
}

.payment-method-after-start-radio-group {
    display: flex;
    flex-direction: column;
    width: 160px;
}

.payment-method-after-start-radio-group input[type="radio"] {
    display: none;
}

.payment-method-after-start-radio-group .radio-label {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.875rem;
    min-width: 60px;
    transition: all 0.2s ease;
    color: #333;
    display: inline-block;
    margin: 5px;
    text-align: center;
}

.payment-method-after-start-radio-group input[type="radio"]:checked + .radio-label {
    background-color: #7D40A0;
    color: white;
    transform: translateY(-2px);
}

.ctrm-share-url-box {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 10px;
    background-color: #F5F5F5;
    border-radius: 5px;
    color: #535353;
    font-size: 1rem;
    width: 90%;
    white-space: nowrap;
    overflow-x: auto;
}

#ctrm-share-url-input {
    color: #535353;
    font-size: 0.875rem;
    width: 100%;
}

.ctrm-share-message {
    color: #E9528E;
}

.csrm-swal-warning {
    color: #E9528E;
    display: inline;
    white-space: nowrap;
}

.csrm-reservation-details-cancelled-form {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.csrm-reservation-details-cancelled-form-text {
    margin-bottom: 20px;
}

.ctrm-calendar-container-message {
    margin-top: 1.25rem;
}

.ctrm-add-schedule-btn-message {
    font-size: 1rem;
    color: #AAAAAC;
    margin-bottom: 20px;
}


/* ------------------------------------------------------------------------------------------------------------------ */
/* 店舗コース情報管理 */

.csim-swal-input-area {
    margin-top: 20px;
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.csim-swal-input-area label {
    font-size: 1rem;
    color: #535353;
}

.csim-swal-input {
    font-size: 0.875rem;
    padding: 13px;
    border: none;
    border-radius: 25px;
    background-color: #F5F5F5;
    width: 100%;
    color: #535353;
    margin-top: 10px;
}

.csim-close-button {
    all: unset;
    font-size: 1.125rem;
    color: #AAAAAC;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
}

.csim-close-button:focus,
.csim-close-button:active {
  outline: none;
  color: #AAAAAC;
  background: transparent;
  box-shadow: none;
}

.csim-swal-note {
    font-size: 0.75rem;
    color: #E9528E;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* ポイント管理 */

.cupm-swal-input-area {
    margin-top: 20px;
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cupm-swal-input {
    font-size: 0.875rem;
    padding: 13px;
    border: none;
    border-radius: 25px;
    background-color: #F5F5F5;
    width: 100%;
    color: #535353;
    margin-top: 10px;
}

.cupm-about-wrapper {
    padding-inline: 1.25rem;
    color: #535353;
}

.cupm-about-intro {
    color: #E9528E;
    font-size: 1.2rem;
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}

.cupm-about-plan {
    border: 1px solid #AAAAAC;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 20px;
    text-align: left;
}

.cupm-about-plan h4 {
    margin: 0 0 10px;
    font-size: 1rem;
}

.cupm-about-plan p {
    margin: 0;
}


.cupm-about-badge {
    display: inline-block;
    font-size: 0.825rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fff;
    color: #AAAAAC;
}

.cupm-about-badge--point {
    border: 1px solid #E9528E;
    color: #E9528E;
}
.cupm-about-badge--coupon {
    border: 1px solid #7D40A0;
    color: #7D40A0;
}

.cupm-about-note {
    font-size: 0.875rem;
}


/* ------------------------------------------------------------------------------------------------------------------ */
/* セラログ */

.ct-mylog-area-label-radio-group-content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.ct-mylog-area-label-radio-group {
    display: flex;
    flex-direction: column;
    width: 120px;
}

.ct-mylog-area-label-radio-group input[type="radio"] {
    display: none;
}

.ct-mylog-area-label-radio-group .radio-label {
    background-color: #ffffff;
    border: 1px solid #AAAAAC;
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.875rem;
    min-width: 60px;
    transition: all 0.2s ease;
    color: #AAAAAC;
    display: inline-block;
    margin: 5px;
    text-align: center;
}

.ct-mylog-area-label-radio-group input[type="radio"]:checked + .radio-label {
    background-color: #7D40A0;
    color: #fff;
    transform: translateY(-2px);
}

.ct-close-button {
    all: unset;
    font-size: 1.125rem;
    color: #AAAAAC;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
}

.ct-close-button:focus,
.ct-close-button:active {
  outline: none;
  color: #AAAAAC;
  background: transparent;
  box-shadow: none;
}

#reply-candidates-list {
    width: 100%;
    margin-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

#reply-candidates-list-message {
    font-size: 1rem;
    color: #535353;
    margin-bottom: 20px;
}

.reply-candidates-list-message-note {
    font-size: 0.875rem;
    color: #E9528E;
}

.reply-candidates-section {
    margin-bottom: 20px;
}

.reply-candidates-section-title {
  display: flex;
  align-items: center;
  text-align: center;
  color: #535353;
  font-size: 1rem;
  margin-bottom: 10px;
}

.reply-candidates-section-text {
    width: 65px;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.reply-candidates-section-title::before,
.reply-candidates-section-title::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #AAAAAC;
  margin: 0 10px;
}

.reply-candidates-empty {
    font-size: 0.875rem;
    color: #AAAAAC
}

.reply-candidate-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    cursor: pointer;
    font-size: 1rem;
    color: #535353;
    justify-content: space-between;
}

.reply-candidate-item-content {
    gap: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.reply-candidate-item img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.reply-candidate-item-role {
    background: #fff;
    color: #7D40A0;
    border-radius: 100px;
    font-size: 0.875rem;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    width: 100px;
    border: solid 1px #7D40A0;
}

.ct-comment-image {
    width: 90%;
    height: auto;
    margin-bottom: 20px;
    margin-top: 40px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.cs-register-button {
    font-size: 0.875rem;
    background: #E9528E;
    color: #fff;
    border-radius: 100px;
    width: 120px;
    height: 30px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    margin: 0 auto;
    display: block;
    position: relative;
}

.cs-login-button {
    font-size: 0.875rem;
    background: #E9528E;
    color: #fff;
    border-radius: 100px;
    width: 120px;
    height: 30px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    margin: 0 auto;
    display: block;
    position: relative;
}

.ct-bluesky-connection-image {
    width: 90%;
    height: auto;
    margin-bottom: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* シェア */

.cup-share-explain-title {
    font-size: 1rem;
    color: #E9528E;
    margin-top: 20px;
}

.cup-share-explain-warning {
    font-size: 1rem;
    color: #535353;
}

.cup-share-explain-warning-no-login {
    font-size: 1rem;
    color: #535353;
    margin-top: 20px;    
}

.cup-share-url-swal-message {
    font-size: 1rem;
    color: #E9528E;
    margin-top: 20px;
}


.cup-share-url-box {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 10px;
    background-color: #F5F5F5;
    border-radius: 5px;
    color: #535353;
    font-size: 1rem;
    width: 90%;
    white-space: nowrap;
    overflow-x: auto;
}

.cup-share-feature-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.cup-share-feature-list li {
    display: flex;
    align-items: center;
}

.cup-share-feature-list-checkbox-wrapper {
    position: relative;
    padding-left: 30px;
    font-size: 1rem;
    cursor: pointer;
    user-select: none;
    display: inline-block;
}

.cup-share-feature-list-checkbox-wrapper input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.cup-share-feature-list-checkbox-wrapper label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background-color: #fff;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.cup-task label::before {
    border: 1px solid #AAAAAC !important;
}

.cup-share-feature-list-checkbox-wrapper label::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg) scale(0);
    width: 6px;
    height: 12px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transition: transform 0.3s ease;
}

.cup-share-feature-list-checkbox-wrapper input[type="checkbox"]:checked + label::before {
    background-color: #E9528E;
    border-color: #E9528E;
}

.cup-share-feature-list-checkbox-wrapper input[type="checkbox"]:checked + label::after {
    transform: translateY(-50%) rotate(45deg) scale(1);
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* セラピスト管理 */

.cstm-swal-input-area {
    margin-top: 20px;
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cstm-swal-input-area label {
    font-size: 1rem;
    color: #535353;
}

.ctrm-swal-label-note {
    font-size: 0.75rem;
    color: #E9528E;
}

.cstm-swal-input {
    font-size: 0.875rem;
    padding: 13px;
    border: none;
    border-radius: 25px;
    background-color: #F5F5F5;
    width: 100%;
    color: #535353;
    margin-top: 10px;
}

.cstm-swal-note {
    font-size: 0.75rem;
    color: #535353;
    margin-top: 20px;
}

.cstm-swal-button {
    margin-top: 10px;
    font-size: 0.875rem;
    border: none;
    border-radius: 30px;
    background-color: #7D40A0;
    color: white;
    width: 120px;
    height: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.cstm-delete-input {
    font-size: 0.875rem;
    padding: 13px;
    border: none;
    border-radius: 25px;
    background-color: #F5F5F5;
    color: #535353;
    margin-top: 10px;
}

.cstm-swal-btn-content {
    display: flex;
    flex-direction: column;
    margin-bottom: 2.5rem;
    margin-top: 1.25rem;
}

.cstm-mail-btn, 
.cstm-invite-btn {
    border-radius: 6.25rem;
    font-size: 0.875rem;
    margin: 0 0.625rem;
    padding: 0.5rem 1rem;
    border: none;
    background-color: #E9528E;
    color: white;
}

.cstm-method-line {
    display: flex;
    align-items: center;
    text-align: center;
    color: #535353;
    font-size: 1rem;
    margin: 20px 0;
}

.cstm-method-line::before, 
.cstm-method-line::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid #AAAAAC;
    margin: 0 10px;
}

.cstm-swal-expires-note {
    font-size: 0.875rem;
    color: #E9528E;
    margin-top: 10px;
}

#cstm-copy-invite {
    background: #E9528E;
    color: #fff;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    margin: 0 auto;
    display: block;
    position: relative;
    border-radius: 6.25rem;
    font-size: 0.875rem;
    height: 1.875rem;
    width: 7.5rem;
    margin-top: 20px;
}


/* ------------------------------------------------------------------------------------------------------------------ */
/* マイページ */

.cup-swal-icon {
    width: 150px;
    height: 150px;
    margin-bottom: 20px;
    margin-top: 40px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 20px;
    border: 2px solid #ddd;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); 
    object-fit: cover;
    background-color: #fff; 
}

.custom-install-ok-button {
    font-size: 0.875rem;
    background: #E9528E;
    color: #fff;
    border-radius: 100px;
    width: 120px;
    height: 30px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    margin: 0 auto;
    display: block;
    position: relative;
}

.custom-install-cancel-button {
    font-size: 0.875rem;
    background-color: #AAAAAC;
    color: #fff;
    border-radius: 100px;
    width: 120px;
    height: 30px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    margin: 0 auto;
    display: block;
    position: relative;
}

.cup-swal-install-procedure {
    width: 90%;
    height: auto;
    margin-bottom: 20px;
    margin-top: 40px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 検索 */

.cs-location-flow {
    width: 90%;
    height: auto;
    margin-bottom: 20px;
    margin-top: 40px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 運営 */

.cacasm-swal-input-area {
    margin-top: 20px;
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cacasm-swal-input-area label {
    font-size: 1rem;
    color: #535353;
}

.cacasm-swal-input {
    font-size: 0.875rem;
    padding: 13px;
    border: none;
    border-radius: 25px;
    background-color: #F5F5F5;
    width: 100%;
    color: #535353;
    margin-top: 10px;
}

.cacasm-swal-select {
    font-size: 0.875rem;
    padding: 13px;
    border: none;
    border-radius: 25px;
    background-color: #F5F5F5;
    width: 100%;
    color: #535353;
    margin-top: 10px;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 通知設定 */

.cls-swal-strong {
    margin-top: 20px;
    margin-bottom: 10px;
}

#line-enable-btn {
    background: #E9528E;
    color: #fff;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    margin: 0 auto;
    display: block;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6.25rem;
    font-size: 0.875rem;
    gap: 0.3125rem;
    height: 2.5rem;
    width: 8.75rem;
    margin-bottom: 20px;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 通知設定 */

.therapist-swal-reply-message {
    font-size: 0.875rem;
    margin-top: 10px;
    color: #535353;
}

#therapist-swal-reply-textarea {
    height: 50dvh;
    padding: 13px;
    font-size: 0.875rem;
    border: none;
    border-radius: 25px;
    box-sizing: border-box;
    background-color: #F5F5F5;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin-top: 10px;
    color: #535353;
    width: 90%;
}

#therapist-swal-reply-count {
    margin-top: 5px;
    font-size: 0.75rem;
    color: #535353;
    display: flex;
    justify-content: flex-end;
    width: 90%;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 口コミ */

.crl-flow-image {
    width: 90%;
    height: auto;
    margin-top: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.crl-swal-text {
    margin-top: 20px;
}

.crl-swal-note {
    color: #E9528E;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* セラピスト個別ページ */

.cup-reservation-about-wrapper {
    padding-inline: 1.25rem;
    color: #535353;
}

.cup-reservation-about-intro {
    color: #E9528E;
    font-size: 1.2rem;
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}

.cup-reservation-about-plan {
    border: 1px solid #AAAAAC;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 20px;
    text-align: left;
}

.cup-reservation-about-plan h4 {
    margin: 0 0 10px;
    font-size: 1rem;
}

.cup-reservation-about-plan p {
    margin: 0;
}

.cup-reservation-about-plan.is-active {
    border-color: #7D40A0;
    background: #F3E7FD;
    box-shadow: 0 0 0 2px rgba(125, 64, 160, .08) inset;
}

.cup-reservation-about-badge {
    display: inline-block;
    font-size: 0.825rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: #F5F5F5;
    color: #AAAAAC;
}

.cup-reservation-about-plan.is-active .cup-reservation-about-badge {
    background: #7D40A0;
    color: #fff;
}

.cup-reservation-about-note {
    font-size: 0.875rem;
}

.cup-reservation-about-plan.plan-standard.is-active {
    border-color: #E9528E;
    background: #FDE7F1;
    box-shadow: 0 0 0 2px rgba(233, 82, 142, .08) inset;
}
.cup-reservation-about-plan.plan-standard.is-active .cup-reservation-about-badge {
    background: #E9528E;
    color: #fff;
}

.cup-reservation-about-plan.plan-lite.is-active {
    border-color: #7D40A0;
    background: #F3E7FD;
    box-shadow: 0 0 0 2px rgba(125, 64, 160, .08) inset;
}
.cup-reservation-about-plan.plan-lite.is-active .cup-reservation-about-badge {
    background: #7D40A0;
    color: #fff;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 顧客管理ページ */

.cci-merge-dialog-section {
    width: 80%;
    margin: 0 auto;
}

.cci-merge-dialog-section-title {
    margin-top: 20px;
}

.cci-merge-dialog-select-option {
    display: block;
    margin-top: 10px;
    cursor: pointer;
}

.cci-merge-dialog-select-option input[type="radio"] {
    display: none;
}

.cci-merge-dialog-select-button {
    padding: 10px 12px;
    border: 1px solid #AAAAAC;
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    transition: all 0.2s ease;
    color: #AAAAAC;
}

.cci-merge-dialog-select-option input[type="radio"]:checked + .cci-merge-dialog-select-button {
    background: #7D40A0;
    color: #fff;
    border-color: #7D40A0;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* セラログ */

.ct-list-page {
    background: #fff;
    width: 100%;
    max-width: none !important;
    margin: 0 auto;
    box-sizing: border-box;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    min-height: 100dvh;
}

.ct-tab-menu {
    display: flex;
    justify-content: space-around;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 5rem !important;
    transition: transform 0.2s ease;
    will-change: transform;
    flex-direction: column;
    background: #F5F5F5;
    background: rgba(245, 245, 245, 0.75);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.ct-tab-menu.ct-tab-hidden {
    transform: translateY(-100%);
}

.ct-tab-title {
    margin: 0;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #E9528E;
}

.ct-tab-switch {
    height: 2.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.ct-tab-button {
    flex: 1;
    font-size: 1rem !important;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #AAAAAC;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease;
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ct-tab-button.active {
    color: #7D40A0;
    border-bottom-color: currentColor;
}

.ct-tab-avatar {
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid transparent;
}

.ct-tab-button.active .ct-tab-avatar {
  border-color: currentColor;
}

.ct-theralog-card-area {
    color: #535353;
    border: 1px solid #535353;
    text-align: center;
    border-radius: 1.25rem;
    font-size: 0.75rem;
    height: unset;
    line-height: 1;
    padding-block: 0.125rem 0.25rem;
    width: 5.4375rem;    
}

.ct-theralog-card-bsky-icon {
    display: inline-flex;
    align-items: center;
}

.ct-theralog-card-bsky-icon img {
    height: 1rem;
    width: auto;
}

.ct-tab-content {
    background-color: #ffffff;
    padding: 0px;
    border-top: none;
    position: relative;
    z-index: 1;
    flex: 1;
    overflow: auto;
    margin-top: 50px;
}

.ct-post-mylog-button {
    position: fixed;
    bottom: 6.5rem !important;
    right: 20px;
    padding: 4px 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    z-index: 100;
    border-radius: 50%;
    background-color: #E9528E;
    border: none;
}

.ct-post-mylog-button img {
    width: 24px;
    height: 24px;
}

.ct-reaction-mylog-button {
    position: fixed;
    bottom: 6.5rem !important;
    left: 20px;
    padding: 4px 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    z-index: 100;
    border-radius: 50%;
    background: #AAAAAC;
    border: none;
}

.ct-reaction-mylog-button img {
    width: 24px;
    height: 24px;
    filter: invert(1);
}

.ct-reaction-mylog-button .ct-reaction-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #E9528E;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 50%;
    line-height: 1;
    z-index: 1;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.ct-region-slider {
    display: flex;
    flex-direction: row;
    gap: 5px;
    overflow-x: auto;
    scroll-behavior: smooth;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    -ms-overflow-style: none;
    scrollbar-width: none;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 20px;
}

.ct-region-slider::-webkit-scrollbar {
    display: none;
}

.ct-region-button {
    padding: 3px 10px;
    border: 1px solid #AAAAAC;
    background-color: #ffffff;
    color: #AAAAAC;
    font-size: 0.75rem;
    border-radius: 20px;
    cursor: pointer;
    width: 60px;
    transition: all 0.2s ease-in-out;
}

.ct-region-button.selected {
    background-color: #7D40A0;
    border: none;
    color: #ffffff;
}

.ct-no-mylog,
.ct-no-timeline {
    text-align: center;
    font-size: 1rem;
    color: #AAAAAC;
    margin-top: 40px;
    margin-bottom: 20px;   
}

.ct-login-guidance-button {
    font-size: 1rem;
    background: #E9528E;
    color: #fff;
    border-radius: 100px;
    width: 282px;
    height: 40px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    margin: 0 auto;
    display: block;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ct-login-guidance-button::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 20px;
    width: 7px;
    height: 7px;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}

.ct-theralog-card {
    display: flex;
    align-items: flex-start;
    background: white;
    padding: 0.9375rem 0.5rem 1.25rem !important;
    border-bottom: 1px solid #AAAAAC;
}

.ct-reported-post {
    position: relative;
    overflow: hidden;
    height: 300px;
}

.ct-reported-modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #F5F5F5;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    flex-direction: column;
}

.ct-reported-modal img {
    width: 70px;
    height: auto;

}

.ct-reported-modal-message {
    color: #535353;
    font-size: 1rem;
    text-align: center;
    pointer-events: none;
    margin-top: 20px;
}

.ct-reported-modal-link-message {
    font-size: 0.875rem;
    color: #535353;
    margin-top: 20px;
    position: relative;
}

.ct-reported-modal-link-message::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: -10px;
    width: 7px;
    height: 7px;
    border-bottom: 1px solid #535353;
    border-left: 1px solid #535353;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}

.ct-theralog-card.ct-user-post {
    background-color: #FDF1FC;
}

.ct-theralog-card-avatar {
    flex: 0 0 50px;
    margin-right: 0px !important;
}

.ct-theralog-card-avatar img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.ct-theralog-card-content {
    flex: 1;
    width: calc(100% - 60px);
}


.ct-theralog-card-content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ct-theralog-card-username {
    font-weight: bold;
    color: #535353;
    font-size: 1rem;
}

.ct-theralog-card-content-header-date-and-btn {
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
}

.ct-theralog-card-content-header-date-and-btn img {
    width: 14px;
    height: 14px;
}

.ct-theralog-card-post-date {
    font-size: 0.875rem;
    color: #535353;
}

.ct-theralog-card-main-contents {
    font-size: 1rem;
    color: #535353;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.ct-theralog-card-main-contents a {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    color: #7D40A0;
    word-break: break-word;
}

.ct-theralog-card-image {
    display: block;
    border-radius: 10px;
    margin-top: 10px;
    width: 100%;
    object-fit: cover;
}

.ct-theralog-card-video {

}

.ct-theralog-card-buttons {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    margin-top: 5px;
    align-items: center;
}


.ct-theralog-card-like-btn,
.ct-theralog-card-comment-btn,
.ct-theralog-card-share-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}


.ct-theralog-card-like-btn img,
.ct-theralog-card-comment-btn img {
    height: auto;
    margin-right: 0.3125rem;
    width: 1.15rem !important;
}

.ct-theralog-card-share-btn img {
    height: auto;
    width: 1.4375rem;
}

.ct-theralog-card-like-readonly,
.ct-theralog-card-comment-readonly {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.ct-theralog-card-like-readonly img, 
.ct-theralog-card-comment-readonly img {
    height: auto;
    margin-right: 0.3125rem;
    width: 1.15rem !important;
}

.ct-theralog-card-like-count,
.ct-theralog-card-comment-count {
    font-size: 0.875rem;
    color: #535353;
}

.ct-list-page .plyr video {
    display: block;
    border-radius: 10px;
    margin-top: 10px;
    width: 100%;
    aspect-ratio: 33 / 25;
    object-fit: cover;
}

.ct-list-page :not(:fullscreen) > .plyr__video-wrapper {
    background: transparent !important;
}

.ct-list-page .plyr__video-wrapper {
    display: flex;
}

.ct-list-page .plyr:fullscreen video {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0px;
    object-fit: contain;

}

.ct-list-page .plyr--video .plyr__controls {
    background: transparent !important;
}

.ct-list-page .plyr__control--overlaid
{
    background: #E9528E !important;
}

.ct-list-page .plyr__menu {
    display: none;
}

.ct-list-page .plyr--pip-supported [data-plyr=pip] {
    display: none;
}

.ct-list-page .plyr__volume {
    display: none;
}

.ct-list-page .plyr__control[data-plyr="airplay"] {
    display: none !important;
}

.ct-list-page .plyr--full-ui input[type=range] {
    color: #E9528E !important;
}

.ct-list-page .plyr--video .plyr__control:hover, .plyr--video .plyr__control[aria-expanded=true] {
    background: #E9528E !important;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.ct-list-page .ct-inline-loader{
    width:100%;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom: 40px;
}

.ct-list-page .ct-inline-loader-content{
    width:100%;
    max-width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}

.ct-list-page .ct-inline-loading-wrapper{
    width:200px;
    height:60px;
    position:relative;
}

.ct-list-page .ct-inline-loading-circle{
    width:20px;
    height:20px;
    position:absolute;
    border-radius:50%;
    background-color:#E9528E;
    left:15%;
    transform-origin:50%;
    animation:ctcircle .5s alternate infinite ease;
}

@keyframes ctcircle{
    0%{
        top:60px;
        height:5px;
        border-radius:50px 50px 25px 25px;
        transform:scaleX(1.7);
    }
    40%{
        height:20px;
        border-radius:50%;
        transform:scaleX(1);
    }
    100%{
        top:0%;
    }
}

.ct-list-page .ct-inline-loading-circle:nth-child(2){
    left:45%;
    animation-delay:.2s;
}

.ct-list-page .ct-inline-loading-circle:nth-child(3){
    left:auto;
    right:15%;
    animation-delay:.3s;
}

.ct-list-page .ct-inline-loading-shadow{
    width:20px;
    height:4px;
    border-radius:50%;
    background-color:rgba(0,0,0,.5);
    position:absolute;
    top:62px;
    transform-origin:50%;
    z-index:-1;
    left:15%;
    filter:blur(1px);
    animation:ctshadow .5s alternate infinite ease;
}

@keyframes ctshadow{
    0%{
        transform:scaleX(1.5);
    }
    40%{
        transform:scaleX(1);
        opacity:.7;
    }
    100%{
        transform:scaleX(.2);
        opacity:.4;
    }
}

.ct-list-page .ct-inline-loading-shadow:nth-child(4){
    left:45%;
    animation-delay:.2s;
}

.ct-list-page .ct-inline-loading-shadow:nth-child(5){
    left:auto;
    right:15%;
    animation-delay:.3s;
}

.ct-list-page .ct-inline-loading-wrapper span{
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.875rem;
    letter-spacing: 5px;
    color: #E9528E;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* post */

.ct-post-page {
    width: 100%;
    max-width: none !important;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
    background: #fff;
    font-weight: 500;
    padding-left: 20px;
    padding-right: 20px;
    position: relative;
}

.ct-post-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    z-index: 10;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    left: 0;
    padding-left: 20px;
    padding-right: 20px;
}

.ct-post-header-post-btn {
    width: 90px;
    padding: 5px;
    background-color: #E9528E;
    color: #fff;
    border: none;
    border-radius: 40px;
    font-size: 0.875rem;
    cursor: pointer;
    position: relative;
}

.ct-post-header-post-btn::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 10px;
    width: 7px;
    height: 7px;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}

.ct-post-header-cancel-btn {
    width: 50px;
    font-size: 0.875rem;
    color: #535353;
    cursor: pointer;
    border: none;
}

#ct-post-upload-progress {
    width: 90%;
    background-color: #e0e0e0;
    border-radius: 10px;
    height: 12px;
    position: absolute;
    top: 45px;
    left: 50%;
    transform: translateX(-50%);
}

#ct-post-progress-bar {
    height: 100%;
    background: linear-gradient(to right, #7D40A0, #9E6CBB);
    width: 0%;
    border-radius: 8px;
    transition: width 0.4s ease-out;
}

.ct-post-avatar-and-textarea {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    overflow-y: auto;
    flex:1;
    padding-bottom: 40px;
    margin-top: 60px;
}

.ct-post-avatar {
    flex: 0 0 50px;
}

.ct-post-avatar img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.ct-post-pic-and-textarea {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
}

.ct-post-textarea-btn-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    margin-top: 20px;
}

.ct-post-pic-item {
}


.ct-post-pic-item img {
    height: auto;
    width: 30px;
}

.ct-post-textarea-container {
    flex-grow: 1;
    width: 100%;
}

.ct-post-textarea {
    width: 100%;
    font-size: 1rem;
    resize: none;
    box-sizing: border-box;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-y: auto;
    max-height: 30dvh;
    color: #535353;
    padding: 0px;
}

#ct-post-char-count {
    font-size: 0.875rem;
    color: #535353;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-width: 55px;
}

#ct-post-preview-image {
    width: 100%;
    height: auto;
    display: block;
    margin-top: 20px;
    overflow: hidden;
    transition: aspect-ratio 0.3s ease;
}

#ct-post-preview-image img,
#ct-post-preview-image video {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    object-fit: contain;
}

.ct-post-page .plyr video {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.ct-post-page :not(:fullscreen) > .plyr__video-wrapper {
    background: #fff !important;
}

.ct-post-page .plyr__video-wrapper {
    display: flex;
}

.ct-post-page .plyr:fullscreen video {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ct-post-page .plyr--video .plyr__controls {
    background: transparent !important;
}

.ct-post-page .plyr__control--overlaid
{
    background: #E9528E !important;
}

.ct-post-page .plyr__menu {
    display: none;
}

.ct-post-page .plyr--pip-supported [data-plyr=pip] {
    display: none;
}

.ct-post-page .plyr__volume {
    display: none;
}

.ct-post-page .plyr__control[data-plyr="airplay"] {
    display: none !important;
}

.ct-post-page .plyr--full-ui input[type=range] {
    color: #E9528E !important;
}

.ct-post-page .plyr--fullscreen-enabled [data-plyr=fullscreen]
 {
    display: none;
}

.ct-post-page .plyr--video .plyr__control:hover, .plyr--video .plyr__control[aria-expanded=true] {
    background: #E9528E !important;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ct-mylog-area-label {
    display: flex;
    font-size: 0.875rem;
    color: #7D40A0;
    text-align: center;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 130px;
    height: 30px;
    border: 1px solid #7D40A0;
    border-radius: 30px;
    position: relative;
}

.ct-mylog-area-label-name {

}

.ct-mylog-area-label::before {
    border-left: 1px solid #7D40A0;
    border-top: 1px solid #7D40A0;
    content: "";
    display: block;
    height: 7px;
    position: absolute;
    right: 10px;
    top: 46%;
    transform: translatey(-50%) rotate(-135deg);
    width: 7px;
}

.ct-bsky-link-button {
    display: flex;
    position: relative;
    background-color: #1185FE;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    z-index: 1;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 1.875rem;
    font-size: 0.875rem;
    gap: 0.15rem;
    padding: 0.45rem 0.8rem;
    width: 10rem;
    height: 1.875rem;
}

.ct-bsky-link-button::before {
    position: absolute;
    content: "";
    top: 50%;
    height: 0.4375rem;
    right: 0.625rem;
    width: 0.4375rem;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    transform: translateY(-50%) rotate(-135deg);
}

.ct-bsky-already-link-button {
    display: flex;
    position: relative;
    background-color: #fff;
    border: solid 1px #1185FE;
    color: #1185FE;
    text-decoration: none;
    font-weight: 500;
    z-index: 1;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 1.875rem;
    font-size: 0.875rem;
    gap: 0.15rem;
    padding: 0.45rem 0.8rem;
    width: 10rem;
    height: 1.875rem;
}

.ct-post-bsky-linked-icon {
    height: 1.25rem;
    width: auto;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* view */

.ct-view-theralog-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 200;
}

.ct-view-theralog-modal-content {
    background: #fff;
    width: 100%;
    max-width: 600px;
    height: 100dvh;
    margin: 0 auto;
    box-sizing: border-box;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 200;
    touch-action: none;
}

.ct-view-theralog-modal-main-content {
    margin-top: 40px;
}

.ct-view-page {
    background: #fff;
    width: 100%;
    max-width: 1024px;
    height: 100dvh;
    margin: 0 auto;
    box-sizing: border-box;
    font-family: 'Noto Sans JP', sans-serif;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    position: relative;
    padding-bottom: 100px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    flex-grow: 1;
}

.ct-view-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;

}

.ct-view-header-cancel-btn {
    width: 50px;
    font-size: 0.875rem;
    color: #535353;
    cursor: pointer;
    border: none;
}

.ct-view-avatar-and-content {
    display: flex;
    align-items: flex-start;
    background: #fff;
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
    gap: 0px !important;
}

.ct-view-avatar {
    flex: 0 0 50px;
}

.ct-view-avatar img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.ct-view-pic-and-textarea {
    display: flex;
    background: white;
    flex-direction: column;
    width: 100%;
}

.ct-view-pic-and-textarea-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ct-view-pic-and-textarea-header-username,
.ct-view-comment-card-username {
    font-weight: bold;
    color: #535353;
    font-size: 1rem;
}

.ct-view-pic-and-textarea-header-date-and-btn,
.ct-view-comment-card-content-header-date-and-btn {
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
}

.ct-view-pic-and-textarea-header-date-and-btn img,
.ct-view-comment-card-content-header-date-and-btn img {
    width: 14px;
    height: 14px;
}

.ct-view-pic-and-textarea-header-date,
.ct-view-comment-card-content-header-date {
    font-size: 0.875rem;
    color: #535353;
}

.ct-view-textarea-container {
    flex-grow: 1;
    width: 100%;
}

.ct-view-text {
    width: 100%;
    font-size: 1rem;
    box-sizing: border-box;
    white-space: normal;
    word-wrap: break-word;
    overflow-y: hidden;
    color: #535353;
}

.ct-view-text a {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    color: #7D40A0;
    word-break: break-word;
}
  

#ct-view-preview-image {
    width: 100%;
    height: auto;
    display: block;
    margin-top: 20px;
    overflow: hidden;
    transition: aspect-ratio 0.3s ease;
}

#ct-view-preview-image img,
#ct-view-preview-image video {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    object-fit: contain;
}

.ct-view-theralog-modal .plyr video {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.ct-view-theralog-modal :not(:fullscreen) > .plyr__video-wrapper {
    background: #fff !important;
}

.ct-view-theralog-modal .plyr__video-wrapper {
    display: flex;
}

.ct-view-theralog-modal .plyr:fullscreen video {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ct-view-theralog-modal .plyr--video .plyr__controls {
    background: transparent !important;
}

.ct-view-theralog-modal .plyr__control--overlaid
{
    background: #E9528E !important;
}

.ct-view-theralog-modal .plyr__menu {
    display: none;
}

.ct-view-theralog-modal .plyr--pip-supported [data-plyr=pip] {
    display: none;
}

.ct-view-theralog-modal .plyr__volume {
    display: none;
}

.ct-view-theralog-modal .plyr__control[data-plyr="airplay"] {
    display: none !important;
}

.ct-view-theralog-modal .plyr--full-ui input[type=range] {
    color: #E9528E !important;
}

.ct-view-theralog-modal .plyr--video .plyr__control:hover, .plyr--video .plyr__control[aria-expanded=true] {
    background: #E9528E !important;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ct-view-tabs {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 10px;
}

.ct-view-like-tab-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    color: #535353;
}

.ct-view-like-tab-btn img {
    width: 23px;
    height: auto;
    margin-right: 5px;
}

.ct-view-comment-tab-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    color: #535353;
}

.ct-view-comment-tab-btn img {
    width: 23px;
    height: auto;
    margin-right: 5px;
}

.ct-view-share-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    color: #535353;
}

.ct-view-share-btn img {
    width: 1.4375rem;
    height: auto;
}

.ct-view-bsky-icon {
    display: inline-flex;
    align-items: center;
}

.ct-view-bsky-icon img {
    height: 1rem;
    width: auto;
}


.ct-view-card-area {
    color: #535353;
    border: 1px solid #535353;
    border-radius: 20px;
    font-size: 0.75rem;
    width: auto;
    text-align: center;
    width: 87px;
    height: 20px;
}

.ct-view-likers {
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
}

.ct-view-liker-card {
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #AAAAAC;
    gap: 10px;
    flex-direction: row;
}

.ct-view-liker-card-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.ct-view-liker-card-name {
    font-weight: bold;
    color: #535353;
    font-size: 1rem;
}

.ct-view-no-likes,
.ct-view-no-comments,
.ct-no-reaction {
    text-align: center;
    font-size: 1rem;
    color: #AAAAAC;
    margin: 40px 0;   
}

.ct-view-comments {
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
}


.ct-view-comment-card {
    display: flex;
    border-bottom: 1px solid #AAAAAC;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    align-items: flex-start;
    gap: 10px;
}

.ct-view-comment-card-header {
    flex: 0 0 50px;
}

.ct-view-comment-card-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.ct-view-comment-card-content {
    flex: 1;
    width: calc(100% - 60px);
}

.ct-view-comment-card-content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ct-view-comment-text {
    width: 100%;
    font-size: 1rem;
    box-sizing: border-box;
    white-space: normal;
    word-wrap: break-word;
    overflow-y: hidden;
    color: #535353;
}

.ct-view-comment-text a {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    color: #7D40A0;
    word-break: break-word;
}

.ct-same-role-user {
    pointer-events: none;
    cursor: default;
    background: #F5F5F5;
}

.ct-view-comment-footer {
    background-color: #fff;
    border-top: 1px solid #AAAAAC;
    display: flex;
    align-items: center;
    position: relative;
    flex-direction: column;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding-right: 20px;
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;  
}

#ct-view-comment-form {
    display: flex;
    width: 100%;
    gap: 10px;
    align-items: center;
}

#ct-view-comment-textarea {
    flex: 1;
    border: 1px solid #AAAAAC;
    padding: 5px;
    border-radius: 8px;
    resize: none;
    font-size: 1rem;
    max-height: 200px;
    overflow-y: auto;
    color: #535353;
    box-sizing: border-box;
    white-space: pre-wrap;
    word-wrap: break-word;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
}

#ct-view-comment-send-button {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    padding: 4px 4px;
}

#ct-view-comment-send-button img {
    width: 100%;
    height: 100%;
}

#ct-view-reply-to {
    text-align: left;
    width: 100%;
    font-size: 1rem;
    color: #AAAAAC;
}

#ct-view-reply-to span {
    color: #9E6CBB;
}

.ct-comment-reply-to {
    text-align: left;
    width: 100%;
    font-size: 1rem;
    color: #AAAAAC;
}

.ct-comment-reply-to-name {
    color: #9E6CBB;
}

#ct-view-comment-progress {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #e0e0e0;
    border-radius: 10px;
}

#ct-view-comment-bar {
    height: 100%;
    background: linear-gradient(to right, #7D40A0, #9E6CBB);
    width: 0%;
    border-radius: 8px;
    transition: width 0.4s ease-out;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* reaction */

.ct-reaction-mylog-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.ct-reaction-mylog-modal-content {
    background: #ffffff;
    width: 100%;
    max-width: 1024px;
    height: 100dvh;
    margin: 0 auto;
    box-sizing: border-box;
    font-family: 'Noto Sans JP', sans-serif;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 100;
}

.ct-reaction-mylog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

.ct-reaction-mylog-header-cancel-btn {
    width: 50px;
    font-size: 0.875rem;
    color: #535353;
    cursor: pointer;
    border: none;
}

.ct-reaction-mylog-modal-main-content {
    height: 100%;
    overflow: auto;
}

.ct-reaction-cards {
    display: flex;
    flex-direction: column;
}

.ct-reaction-card {
    display: flex;
    align-items: flex-start;
    width: 100%;
    border: none;
    border-bottom: 1px solid #AAAAAC;
    text-align: left;
    background: #fff;
    cursor: pointer;
    gap: 10px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.ct-reaction-card-icon-area {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.ct-reaction-type-icon {
    width: 30px;
    height: auto;
}

.ct-reaction-card-content-area {
    flex: 1;
    width: calc(100% - 50px);
}

.ct-reaction-card-header {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    color: #535353;
}

.ct-reaction-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.ct-reaction-username {
    color: #535353;
    font-weight: bold;
    font-size: 0.875rem;
}

.ct-reaction-card-body {
    color: #535353;
    box-sizing: border-box;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
}

.ct-reaction-card-footer {
    font-size: 0.875rem;
    color: #AAAAAC;
    text-align: right;
    margin-top: 10px;
}

.ct-reaction-unconfirmed {
    background: #FDF1FC;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* トップ */

.custom-top-page {
    background: #ffffff;
    width: 100%;
    max-width: 1024px;
    height: auto;
    margin: 0 auto;
    box-sizing: border-box;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    position: relative;
    font-family: 'Noto Sans JP', sans-serif;
}

.custom-top-page .swiper-container {
    width: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.custom-top-page .swiper-wrapper {
    width: 100%;
    display: flex;
}

.custom-top-page .swiper-slide {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    overflow: hidden;
}

.custom-top-page .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.custom-top-page .swiper-pagination {
    position: relative;
    margin-top: 10px;
    text-align: center;
    z-index: 1;
}

.custom-top-page .swiper-pagination-bullet {
    background: #E1E1E1;
    opacity: 0.6;
    transition: opacity 0.3s;
}

.custom-top-page .swiper-pagination-bullet-active {
    opacity: 1;
    background: #E9528E;
}

.custom-top-button-swiper-overlay {
    position: absolute;
    bottom: 33px;
    left: 0;
    width: 100%;
    padding: 10px;
    background-color: rgba(109, 99, 115, 0.2);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    box-sizing: border-box;
    z-index: 5;
    pointer-events: auto;
    border-bottom: 1px solid #E9528E;
    justify-items: center;
}

.custom-top-button-swiper-overlay-btn {
    padding: 12px;
    font-size: 1rem;
    font-weight: 500;
    background: #ffffff;
    color: #7D40A0;
    border: 1px solid #7D40A0;
    border-radius: 24px;
    cursor: pointer;
    transition: background 0.2s ease;
    display: flex;
    justify-content: space-between;
    gap: 5px;
    align-items: center;
    flex-direction: row;
    width: 180px;
    height: 48px;
}

.custom-top-button-swiper-overlay-btn-icon {
    width: 20px;
    height: auto;
    object-fit: contain;
}

.custom-top-button-swiper-overlay-btn-char {
    flex: 1;
    text-align: left;
}

.custom-top-swiper-image-placeholder {
    width: 100%;
    height: 100%;
    background-color: #eee;
    color: #999;
    font-size: 1rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    border: 1px dashed #ccc;
}

/* ------------------------------------------------------------------------------------------------------------------ */

.custom-top-register-section {
    padding: 24px 16px;
    text-align: center;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.custom-top-register-point-message {
    font-size: 1rem;
    color: #E9518E;
    margin-bottom: 0.3125rem;
    font-weight: 700;
}

.custom-top-register-point-highlight {
    font-size: 1rem;
    color: #E9518E;
    font-weight: 700;
    margin: 0;
}

.custom-top-register-point-value {
    font-size: 30px;
    margin-right: -7px;
}

.custom-top-register-button {
    width: 300px;
    margin-top: 8px;
    background-color: #E9528E;
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 12px 32px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.custom-top-register-login-link {
    font-size: 0.875rem;
    color: #848484;
    margin: 0;
    margin-top: 10px;
    font-weight: 500;
}

.custom-top-register-login-link a {
    color: #E9528E;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
}

/* ------------------------------------------------------------------------------------------------------------------ */


.custom-top-news-section-title {
    font-size: 42px;
    text-align: center;
    font-weight: 300;
    color: #9E6CBB;
}

/* ------------------------------------------------------------------------------------------------------------------ */

.custom-top-ranking-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-bottom: 1px solid #7D40A0;
    background: linear-gradient(100deg, #FDE7F8, #FEF7FF, #E5CEF1);
}

.custom-top-ranking-section-title {
    font-size: 60px;
    text-align: center;
    font-weight: 300;
    color: #9E6CBB;
}

.custom-top-ranking-sub-section {
    overflow-x: auto;
    margin-bottom: 15px;
}

.custom-top-ranking-sub-section-title {
    width: 350px;
    background-color: #9E6CBB;
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 8px 32px;
    font-size: 1.125rem;
    margin: 0 auto;
    display: block;
    margin-bottom: 15px;
    text-align: center;
}

.custom-top-ranking-by-area-btn {
    width: 300px;
    background-color: #ffffff;
    color: #7D40A0;
    border: 1px solid #7D40A0;
    border-radius: 999px;
    padding: 12px;
    font-size: 1rem;
    margin: 0 auto;
    display: block;
    margin-top: 15px;
    text-align: center;
    position: relative;
}


.custom-top-ranking-slider {
    display: flex;
    gap: 16px;
    /* scroll-snap-type: x mandatory; */
    overflow-x: auto;
    padding-bottom: 8px;
    /* -webkit-overflow-scrolling: touch; */
    align-items: flex-end;
}

.custom-top-ranking-slider::-webkit-scrollbar {
    display: none;
}

.custom-top-ranking-card {
    flex: 0 0 auto;
    width: 120px;
    height: 180px;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    scroll-snap-align: start;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    color: #fff;
    overflow: hidden;
    border: 1px solid #6D6373;
}

.custom-top-ranking-first {
    width: 180px;
    height: 270px;
}

.custom-top-ranking-number {
    font-size: 1.25rem;
    font-weight: bold;
    color: #E9528E;
    margin-bottom: 0.5rem;
}

.custom-top-ranking-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(109, 99, 115, 0.7);
    color: #fff;
    padding: 8px 12px;
    box-sizing: border-box;
    text-align: left;
}


.custom-top-ranking-user-name {
    font-size: 1rem;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
}

.custom-top-ranking-extra {
    font-size: 0.875rem;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
}

.custom-top-ranking-badge {
    position: absolute;
    top: 0;
    left: 0;
    width: 45px;
    height: 45px;
    background: #ffffff;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 7px;
}

.custom-top-ranking-badge span {
    font-size: 1rem;
    color: #9E6CBB;
    line-height: 1;
}

.custom-top-ranking-badge-first {
    width: 80px;
    height: 80px;
}

.custom-top-ranking-badge-first span {
    font-size: 28px;
}

.custom-top-no-ranking-message {
    text-align: center;
    font-size: 1rem;
    color: #666;
}

/* ------------------------------------------------------------------------------------------------------------------ */

.custom-top-matching-section {
    display: flex;
    flex-direction: column;
    /* overflow-x: auto; */
    background: #ffffff;
}

.custom-top-matching-section-title {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.custom-top-matching-section-main-title {
    font-size: 60px;
    text-align: center;
    font-weight: 300;
    color: #E9528E;
}

.custom-top-matching-section-sub-title {
    font-size: 0.875rem;
    text-align: center;
    font-weight: 500;
    color: #E9528E;
    margin-bottom: -25px;
}

.custom-top-matching-section-main-title-matching-what {
    font-size: 1.5rem;
    text-align: center;
    font-weight: 500;
    color: #E9528E;
    margin-top: -10px;
}

.custom-top-matching-image-bird {
    text-align: center;
    margin-top: 15px;
}

.custom-top-matching-image-bird img {
    width: 150px;
    height: auto;
    display: inline-block;
}

.custom-top-matching-image-slide {
    text-align: center;
    margin-top: 20px;
}

.custom-top-matching-image-slide img {
    width: 330px;
    height: auto;
    display: inline-block;
}

.custom-top-matching-description {
    font-size: 0.875rem;
    color: #535353;
    font-weight: 500;
    max-width: 450px;
    margin: 20px auto;
}

.custom-top-matching-slide-btn,
.custom-top-matching-store-list-btn {
    width: 300px;
    background-color: #ffffff;
    color: #7D40A0;
    border: 1px solid #7D40A0;
    border-radius: 999px;
    padding: 12px;
    font-size: 1rem;
    margin: 0 auto;
    display: block;
    margin-bottom: 15px;
    text-align: center;
    position: relative;
}

.custom-top-matching-section-headline {
    font-size: 1.5rem;
    font-weight: 500;
    color: #E9528E;
    text-align: center;
}

.custom-top-matching-image-beginner {
    text-align: center;
    margin-top: 15px;
}

.custom-top-matching-image-beginner img {
    width: 270px;
    height: auto;
    display: inline-block;
}

.custom-top-matching-image-store {
    text-align: center;
    margin-top: 15px;
}

.custom-top-matching-image-store img {
    width: 200px;
    height: auto;
    display: inline-block;
}

.custom-top-matching-user-flow {
    border: solid 1px #E9528E;
    padding: 10px;
    border-radius: 10px;
    max-width: 400px;
    margin: 0 auto;
}

.custom-top-matching-user-flow-title {
    font-size: 1.5rem;
    text-align: center;
    font-weight: 500;
    color: #E9528E;
}

.custom-top-matching-user-flow-step {
    position: relative;
}

.custom-top-matching-user-flow-step-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.custom-top-matching-user-flow-step-number {
    background: #E9528E;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0px;
}

.custom-top-matching-user-flow-number-step-char {
    font-size: 13px;
    color: #fff;
    font-weight: 500;
    margin-top: 5px;
}

.custom-top-matching-user-flow-step-number-digit {
    font-size: 1.5rem;
    color: #fff;
    font-weight: 500;
    margin-top: -10px;
}

.custom-top-matching-user-flow-step-header-title {
    font-size: 1.125rem;
    font-weight: 500;
    color: #E9528E;
}

.custom-top-matching-user-flow-step-content {
    font-size: 0.875rem;
    font-weight: 500;
    color: #535353;
    padding: 5px;
}

.custom-top-matching-image-down-arrow {
    text-align: center;
}

.custom-top-matching-image-down-arrow img {
    width: 22px;
    height: auto;
    display: inline-block;
}

.custom-top-matching-image-step1 {
    text-align: center;
    position: absolute;
    right: 5px;
    top: 10px;
}

.custom-top-matching-image-step1 img {
    width: 118px;
    height: auto;
    display: inline-block;
}

.custom-top-matching-image-step2-1 {
    text-align: center;
    position: absolute;
    right: 30px;
    top: 50px;
    z-index: 10;

}

.custom-top-matching-image-step2-1 img {
    width: 85px;
    height: auto;
    display: inline-block;
}

.custom-top-matching-image-step2-2 {
    text-align: center;
    position: absolute;
    right: 5px;
    top: 10px;
    z-index: 5;
}

.custom-top-matching-image-step2-2 img {
    width: 70px;
    height: auto;
    display: inline-block;
}

.custom-top-matching-image-step3-1 {
    text-align: center;
    position: absolute;
    right: 65px;
    top: 10px;
    z-index: 10;
}

.custom-top-matching-image-step3-1 img {
    width: 50px;
    height: auto;
    display: inline-block;
}

.custom-top-matching-image-step3-2 {
    text-align: center;
    position: absolute;
    right: 5px;
    top: 10px;
    z-index: 5;
}

.custom-top-matching-image-step3-2 img {
    width: 60px;
    height: auto;
    display: inline-block;
}

/* ------------------------------------------------------------------------------------------------------------------ */

.custom-top-bar-section {
    margin-top: 50px;
}

.custom-top-bar-image-border {
    text-align: center;
    position: relative;
    width: 390px;
    margin: 0 auto;
}

.custom-top-bar-image-border img {
    width: 390px;
    height: auto;
    display: inline-block;
}

.custom-top-bar-image-center {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 63px;
    height: auto;
    pointer-events: none;
}

.custom-top-bar-image-glass {
    position: absolute;
    top: 15px;
    right: 5px;
    width: 44px;
    height: auto;
    pointer-events: none;
}

.custom-top-bar-sub-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -90%);
    color: #535353;
    font-size: 22px;
    font-weight: 500;
    pointer-events: none;
    white-space: nowrap;
}

.custom-top-bar-main-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -10%);
    color: #9E6CBB;
    font-size: 42px;
    font-weight: 500;
    pointer-events: none;
    white-space: nowrap;
}

.custom-top-bar-content {
    font-size: 0.875rem;
    font-weight: 500;
    color: #535353;
    padding: 5px;
    width: 390px;
    margin: 0 auto;
}

.custom-top-bar-imnage-content {
    position: relative;
    height: 230px;
    width: 390px;
    margin: 0 auto;
}

.custom-top-bar-image-bar1 {
    text-align: center;
    position: absolute;
    left: 5px;
    top: 10px;
    z-index: 5;
}

.custom-top-bar-image-bar1 img {
    width: 226px;
    height: auto;
    display: inline-block;
}

.custom-top-bar-image-bar2 {
    text-align: center;
    position: absolute;
    right: 45px;
    top: 10px;
    z-index: 3;
}

.custom-top-bar-image-bar2 img {
    width: 107px;
    height: auto;
    display: inline-block;
}

.custom-top-bar-image-bar3 {
    text-align: center;
    position: absolute;
    right: 5px;
    bottom: 10px;
    z-index: 5;
}

.custom-top-bar-image-bar3 img {
    width: 87px;
    height: auto;
    display: inline-block;
}

.custom-top-bar-image-color-box {
    text-align: center;
    position: absolute;
    right: 20px;
    top: 40px;
    z-index: 1;
    width: 107px;
    height: 126px;
    background: #E6CDF5;
}

.custom-top-bar-btn {
    width: 300px;
    background-color: #ffffff;
    color: #7D40A0;
    border: 1px solid #7D40A0;
    border-radius: 999px;
    padding: 12px;
    font-size: 1rem;
    margin: 0 auto;
    display: block;
    margin-bottom: 15px;
    text-align: center;
    position: relative;
}


/* ------------------------------------------------------------------------------------------------------------------ */

.custom-top-theralog-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-bottom: 1px solid #7D40A0;
    overflow-x: hidden;
    background: linear-gradient(45deg, #F3E7FD, #F9F3FF, #E6C7FF);
}

.custom-top-theralog-section-title {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.custom-top-theralog-section-main-title {
    font-size: 60px;
    text-align: center;
    font-weight: 300;
    color: #C694E2;
}

.custom-top-theralog-section-sub-title {
    font-size: 0.875rem;
    text-align: center;
    font-weight: 500;
    color: #C694E2;
    margin-bottom: -30px;
}

.custom-top-theralog-timeline {
    font-size: 1rem;
    text-align: center;
    font-weight: 500;
    color: #6D6373;
}

.custom-top-theralog-slider {
    display: flex;
    gap: 16px;
    /* scroll-snap-type: x mandatory; */
    overflow-x: auto;
    padding-bottom: 8px;
    /* -webkit-overflow-scrolling: touch; */
}

.custom-top-theralog-slider::-webkit-scrollbar {
    display: none;
}

.custom-top-theralog-card {
    flex: 0 0 auto;
    width: 170px;
    height: 260px;
    border-radius: 10px;
    padding: 5px;
    background-color: #ffffff;
    text-align: center;
    scroll-snap-align: start;
}

.custom-top-theralog-user-info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 5px;
    gap: 5px;
}

.custom-top-theralog-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.custom-top-theralog-display-name {
    font-weight: 500;
    font-size: 1rem;
    color: #535353;
    white-space: nowrap;
    overflow: hidden;
}

.custom-top-theralog-image {
    width: 150px;
    height: 115px;
    object-fit: cover;
    margin: 0 auto;
}

.custom-top-theralog-contents {
    font-size: 0.875rem;
    color: #535353;
    box-sizing: border-box;
    word-wrap: break-word;
    text-align: left;
    padding: 5px;
    min-height: 50px;
}

.custom-top-theralog-meta {
    display: flex;
    gap: 10px;
    margin-top: 6px;
    position: relative;
    padding: 5px;
}

.custom-top-theralog-meta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #7D40A0;
    transform: scaleY(0.5);
    transform-origin: top;
}

.custom-top-theralog-likes,
.custom-top-theralog-comments {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.875rem;
    color: #555;
}

.custom-top-theralog-like-icon,
.custom-top-theralog-comment-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    vertical-align: middle;
}

.custom-top-theralog-like-count,
.custom-top-theralog-comment-count {
    font-weight: 500;
    color: #535353;
    font-size: 0.875rem;
}

.custom-top-theralog-btn {
    width: 300px;
    background-color: #ffffff;
    color: #7D40A0;
    border: 1px solid #7D40A0;
    border-radius: 999px;
    padding: 12px;
    font-size: 1rem;
    margin: 0 auto;
    display: block;
    margin-bottom: 15px;
    text-align: center;
    position: relative;
}

.custom-top-no-theralog-message {
    text-align: center;
    font-size: 1rem;
    color: #666;
}

.custom-top-theralog-card.no-image .custom-top-theralog-contents {
    min-height: calc(50px + 115px);
    max-height: none;
    display: block;
    overflow: visible;
}


.custom-top-theralog-section .plyr {
    max-width: 100%;
    min-width: 100%;
}

.custom-top-theralog-section :not(:fullscreen) > .plyr__video-wrapper {
    background: transparent !important;
}

.custom-top-theralog-section .plyr__video-wrapper {
    display: flex;
    height: 7.1875rem !important;
    width: 9.375rem !important;
}

.custom-top-theralog-section .plyr:fullscreen video {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0px;
    object-fit: contain;

}

.custom-top-theralog-section .plyr--video .plyr__controls {
    background: transparent !important;
}

.custom-top-theralog-section .plyr__control--overlaid
{
    background: #E9528E !important;
    pointer-events: none;
}

.custom-top-theralog-section .plyr__controls {
    display: none;
}

.custom-top-theralog-section .plyr__controls .plyr__controls__item:first-child {
    display: none;
}

.custom-top-theralog-section .plyr__controls .plyr__progress__container {
    display: none;
}

.custom-top-theralog-section .plyr__menu {
    display: none;
}

.custom-top-theralog-section .plyr--pip-supported [data-plyr=pip] {
    display: none;
}

.custom-top-theralog-section .plyr__volume {
    display: none;
}

.custom-top-theralog-section .plyr__control[data-plyr="airplay"] {
    display: none !important;
}

.custom-top-theralog-section .plyr--full-ui input[type=range] {
    color: #E9528E !important;
}

.custom-top-theralog-section .plyr--video .plyr__control:hover, .plyr--video .plyr__control[aria-expanded=true] {
    background: #E9528E !important;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ------------------------------------------------------------------------------------------------------------------ */


.custom-top-faq-section {
    background: #F5F5F5;
}


.custom-top-faq-section-title {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.custom-top-faq-section-main-title {
    font-size: 60px;
    text-align: center;
    font-weight: 400;
    color: #EC8DB3;
}

.custom-top-faq-section-sub-title {
    font-size: 1rem;
    text-align: center;
    font-weight: 500;
    color: #6D6373;
}

.custom-top-faq-accordion {
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
}


.custom-top-faq-accordion-item {
    background: #fff;
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 16px;
    transition: all 0.3s ease;
}

.custom-top-faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.custom-top-faq-q-label {
    color: #E9528E;
    font-weight: 500;
    margin-right: 8px;
    font-size: 1.125rem;
}

.custom-top-faq-question-title {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 500;
    color: #535353;
}

.custom-top-faq-a-label {
    color: #535353;
    font-weight: 500;
    margin-right: 8px;
    font-size: 1.125rem;
}

.custom-top-faq-answer {
    margin-top: 12px;
    display: none;
    font-size: 0.875rem;
    color: #535353;
    line-height: 1.6;
    border-top: solid 2px #F5F5F5;
    font-weight: 500;
}

.custom-top-faq-answer.show {
    display: block;
}

.custom-top-faq-toggle {
    font-size: 20px;
    color: #E9528E;
    margin-left: 16px;
    font-weight: 500;
}

/* ------------------------------------------------------------------------------------------------------------------ */

.custom-top-about-us-section {
    background: #fff;
    padding: 40px 20px;
    text-align: center;
}

.custom-top-about-us-btn-content {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 20px 20px;
    font-size: 0.875rem;
    justify-content: space-evenly;
}

.custom-top-about-us-btn {
    color: #535353;
    font-size: 0.875rem;
}


/* ------------------------------------------------------------------------------------------------------------------ */
/* ユーザーページ */


.cup-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.cup-modal-content {
    background: #ffffff;
    border-radius: 12px;
    width: 100%;
    max-width: 600px;
    max-height: 100dvh;
    margin: 0 auto;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    border: solid 1px #333;
    overflow: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 5px;
}

.cup-modal.active {
    display: block;
    animation: crl-fade-in 0.3s ease-out;
}

@keyframes crl-fade-in {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.cup-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 1.5rem;
    color: #333;
    z-index: 100;
}

.cup-modal-title {
    margin-bottom: 5px;
    font-size: 1.8rem;
    color: #333;
    text-align: center;
    font-weight: 500;
}

.cup-modal-content-details {
    max-height: 100vh;
    overflow-y: auto;
}

/* swal */
/* 説明 */
.cup-swal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#hideQrcodeExplanationModal {
    display: inline-block;
    width: 16px;
    height: 16px;
    cursor: pointer;
    border: solid 1px #000;
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
}

.cup-swal-content label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

.qr-capture-wrapper {
    display: inline-block;
    background: transparent;
    padding: 0;
    margin: 0;
}

.qr-overlay-card {
    position: relative;
    width: 300px;
    height: 400px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    background-color: #eee;
    margin: 0 auto;
    margin-top: 20px;
}

.qr-overlay-background {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.75);
    z-index: 1;
}

.qr-overlay-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.qr-overlay-qr {
    padding: 5px;
    background: white;
    border-radius: 16px;
}

.qr-card-footer {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: flex-start;
    justify-content: center;
}

.swal-card-action-button {
    padding: 12px 0px;
    font-size: 10px;
    text-align: center;
    color: #333;
    border-radius: 10px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    white-space: normal;
    word-wrap: break-word;
    width: 80px;
}

.swal-card-action-button img {
    height: 50px;
    width: 50px;
    margin-bottom: 5px;
    border-radius: 50%;
    background-color: white;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #333;
}

.qr-overlay-logo {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 100px;
    height: auto;
    z-index: 10;
}

.qr-save-hint {
    text-align: center;
    font-size: 0.75rem;
    color: #666;
    margin-top: 10px;
    margin-bottom: 5px;
}

#qr-message {
    font-size: 0.875rem;
    color: #333;
    margin-top: 5px;
}

.cup-required-badge {
    background-color: #E9518E;
    color: #ffffff;
    font-size: 0.8em;
    padding: 2px 6px;
    margin-left: 5px;
    border-radius: 10px;
}
/* ------------------------------------------------------------------------------------------------------------------ */

/* アカウント設定ページ */
.cup-setting-page {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    background: #fff;
    padding-left: 20px;
    padding-right: 20px;
}

.cup-setting-page-title {
    font-weight: 500;
    color: #E9528E;
    text-align: center;
    font-size: 1.5rem;
    margin-top: 2.5rem !important; 
    margin-bottom: 2.5rem !important;    
}

.cup-setting-content {
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.cup-setting-sub-section {
    display: flex;
    flex-direction: column;
    margin-top: 0px !important; 
    margin-bottom: 2.5rem !important; 
}

.cup-setting-sub-section label {
    font-size: 1rem;
    color: #535353;
}

.cup-setting-sub-section-label-warning {
    font-size: 0.875rem;
    color: #AAAAAC; 
}

.cup-setting-sub-section input {
    border: none;
    border-radius: 25px;
    background-color: #F5F5F5;
    color: #535353;
    width: 100%;
    padding: 12px;
    margin-top: 10px;
}

.cup-setting-change-password-field input {
    border: none;
    border-radius: 25px;
    background-color: #F5F5F5;
    color: #535353;
    width: 100%;
    padding: 12px;
}

.cup-setting-save-email-button {
    background-color: #E9528E;
    color: white;
    text-align: center;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    white-space: normal;
    word-wrap: break-word;
    border-radius: 6.25rem;
    font-size: 0.875rem;
    height: 2.5rem;
    margin: 1.25rem auto 0rem;
    padding: 0.5rem 0.9375rem;
    width: 17.625rem;    
}

.cup-setting-save-button {
    background-color: #E9528E;
    color: white;
    padding: 8px 15px;
    font-size: 0.875rem;
    text-align: center;
    border-radius: 100px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    white-space: normal;
    word-wrap: break-word;
    width: 282px;
    height: 40px;
    margin: 20px auto 0;
}

.cup-setting-line-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid #06c755;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    border-radius: 10px;
    background: #fff;
    margin-top: 0.625rem;
}

.cup-setting-line-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    background: #AAAAAC;
}

.cup-setting-line-texts {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cup-setting-line-name {
    font-size: 0.875rem;
    color: #535353;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cup-line-link-box{
    border: 1px solid #06C755;
    border-radius: 0.625rem;
    padding: 1.25rem;
    text-align: center;
    margin-top: 0.625rem;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cup-setting-bsky-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid #1185FE;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    border-radius: 10px;
    background: #fff;
    margin-top: 0.625rem;
}

.cup-setting-bsky-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    background: #AAAAAC;
}

.cup-setting-bsky-texts {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cup-setting-bsky-name {
    font-size: 0.875rem;
    color: #535353;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cup-setting-bsky-handle {
    font-size: 0.75rem;
    color: #AAAAAC;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cup-setting-bsky-error {
    color: #535353;
    font-size: 0.8125rem;
    padding: 4px 0;
}

.cup-setting-change-password-text {
    font-size: 1rem;
    text-align: center;
    color: #AAAAAC;
    margin-top: 0.625rem;
}

.cup-bsky-link-box {
    border: 1px solid #1185FE;
    border-radius: 0.625rem;
    padding: 1.25rem;
    text-align: center;
    margin-top: 0.625rem;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;    
}

.cup-bsky-link-title {
    font-size: 1.25rem;
    color: #1185FE;
    font-weight: 500;
}

.cup-bsky-link-text {
    font-weight: 500;
    color: #535353;
    font-size: 0.875rem;
    margin: 0.625rem 0 1.25rem;    
}

.cup-bsky-link-button-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1.25rem;
}

.cup-bsky-link-button {
    display: flex;
    position: relative;
    background-color: #1185FE;
    color: white;
    text-decoration: none;
    font-weight: 500;
    z-index: 1;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 1.875rem;
    font-size: 1rem;
    gap: 0.1875rem;
    padding: 0.75rem 1.25rem;
    width: 18.625rem;    
}

.cur-bsky-link-icon {
    width: 1.5625rem;
    height: auto;
}

.cup-bsky-link-button::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    height: 0.625rem;
    right: 1.625rem;
    width: 0.625rem;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}

.cup-setting-bsky-disconnect-button {
    display: flex;
    position: relative;
    background-color: #fff;
    color: #AAAAAC;
    text-decoration: none;
    font-weight: 500;
    z-index: 1;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 1.875rem;
    border: solid 1px #AAAAAC;
    font-size: 1rem;
    gap: 0.1875rem;
    padding: 0.75rem 1.25rem;
    width: 18.625rem;
    margin: 1.25rem auto 0 auto;  
}

.cup-setting-bsky-disconnect-button::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    height: 0.625rem;
    right: 1.625rem;
    width: 0.625rem;
    border-bottom: 1px solid #AAAAAC;
    border-left: 1px solid #AAAAAC;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}

.cup-setting-bsky-disconnect-button.is-loading {
    opacity: 0.7;
    cursor: wait;
}

.cup-setting-bsky-form {
    width: 100%;
}

.cup-setting-bsky-account-about-btn,
.cup-setting-bsky-app-password-about-btn {
    color: #AAAAAC;
    display: flex;
    flex-direction: row;
    font-size: 0.875rem;
    align-items: center;
    gap: 3px;
    width: 100%;
    justify-content: flex-end;
}

.cup-setting-bsky-account-about-btn .question-icon,
.cup-setting-bsky-app-password-about-btn .question-icon {
    width: 20px;
    height: auto;
}

.bsky-app-pass-swiper {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 20px;
}

.bsky-app-pass-swiper .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.bsky-app-pass-swiper .swiper-slide img {
    margin-top: 0px;
}

.bsky-app-pass-swiper .swiper-pagination {
    position: relative;
}


/* ------------------------------------------------------------------------------------------------------------------ */
/* マイページ */

.cup-user-share-page {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
}

.cup-user-share-page,
.cup-user-share-page * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.cup-user-share-page-content {
    height: 100%;
    overflow-y: auto;
}

.cup-user-share-page-top-section {
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 40px;
}

.cup-user-share-page-title {
    font-size: 1.5rem;
    font-weight: 500;
    color: #E9528E;
    text-align: center;
}

.cup-user-share-page-user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

.cup-user-share-page-profile-image {
    height: 80px;
    width: 80px;
    object-fit: cover;
    border-radius: 50%;
}

.cup-user-share-page-profile-name {
    font-size: 1.5rem;
    color: #535353;
}

.cup-user-share-page-qr-code {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}

.cup-user-share-page-qr-code img {
    height: 196px;
    width: 196px;
}

.cup-user-share-page-bottom-section
 {
    background: #F5F5F5;
    margin-top: 40px;
    padding-top: 40px;
    padding-bottom: 40px;
}

.cup-user-share-page-button-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.cup-user-share-page-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.875rem;
    color: #7D40A0;
    width: 110px;
}

.cup-user-share-page-button img {
    height: 60px;
    width: 60px;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* マイページ */

.cup-user-my-page {
    width: 100%;
    max-width: none !important;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
}

.cup-user-my-page,
.cup-user-my-page * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.cup-user-my-page-content {
    height: 100%;
    overflow-y: auto;
}

.cup-user-my-page-top-section {
    background: #fff;
    padding-left: 20px;
    padding-right: 20px;
    max-width: 37.5rem;
    margin: 0 auto;
}

.cup-user-my-page-bottom-section {
    background: #F5F5F5;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: -100px;
    padding-top: 100px;
}

.cup-user-my-page-main-info-content {
    width: 100%;
    display: flex;
    align-items: flex-start;
    padding-right: 20px;
    padding-left: 20px;
    margin-top: 20px;
    gap: 10px;
}

.cup-user-my-page-main-info-content img {
    height: 100px;
    width: 100px;
    object-fit: cover;
    border-radius: 50%;
}

.cup-img-and-id {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cup-id {
    color: #535353;
    font-size: 0.75rem;
}

.cup-user-my-page-name {
    color: #E9528E;
    font-size: 1.5rem;
}

.cup-user-my-page-matching-count {
    font-size: 0.875rem;
    color: #535353;
}


.cup-user-my-page-button-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    margin: 0 auto;
    gap: 0.625rem;
    margin-top: 1.25rem;
    max-width: 390px;    
}

.cup-user-my-page-button {
    text-align: center;
    display: flex;
    flex-direction: column;
    white-space: normal;
    word-wrap: break-word;
    height: 100%;
    width: 100%;
    color: #7D40A0;
    background: #fff;
    align-items: center;
    position: relative;
    border-radius: 0.625rem;
    font-size: 0.875rem;
    justify-content: unset;
    line-height: 1.4;
    max-width: 7.75rem;
    min-height: 6.875rem;
    padding-block: 0.75rem 0.4375rem;    
}

.cup-user-my-page-button img {
    height: 2.75rem;
    margin-bottom: 0.5rem;
    width: auto;
}

.cup-unconfirmed-review-badge,
.cup-waiting-place-badge,
.cup-edit-profile-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 15px;
    height: 15px;
    background-color: #E9528E;
    border-radius: 50%;
    display: inline-block;
}

.cup-user-my-page-mycred-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0 auto;
    margin-top: 20px;
    max-width: 37.5rem;
}

.cup-user-my-page-mycred-label {
    font-size: 1.125rem;
    color: #535353;
    text-align: center;
}

.cup-user-my-page-mycred-amount {
    font-size: 45px;
    color: #E9528E;
    margin-top: -10px;
}

.cup-user-my-page-mycred-amount.is-na {
  position: relative;
}

.cup-user-my-page-mycred-amount.is-na::after {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 2px;
  background: currentColor;
  vertical-align: middle;
  transform: translateY(0.05em);
}

.cup-user-my-page-mycred-amount-unit {
    font-size: 25px;
}

.cup-user-my-page-mycred-amount-message {
    font-size: 10px;
    color: #AAAAAC;
    white-space: nowrap;
    overflow: hidden;
    margin-top: -8px;
}

.cup-user-my-page-mycred-history-btn {
    position: relative;
    border: solid 1px #7D40A0;
    border-radius: 30px;
    margin-top: 10px;
    font-size: 1rem;
    color: #7D40A0;
    text-align: center;
    width: 18.5rem !important;
    height: 40px;
    padding: 5px;
}

.cup-user-my-page-mycred-history-btn::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 10px;
    width: 7px;
    height: 7px;
    border-bottom: 1px solid #7D40A0;
    border-left: 1px solid #7D40A0;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}

.cup-user-my-page-reservations-container {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 20px;
    padding-left: 20px;
    margin-top: 20px;
    height: 203px;
}

.cup-user-my-page-reservations-container-title {
    font-size: 1.125rem;
    background: #E9528E;
    color: #FFFFFF;
    text-align: center;
    width: 100%;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}


.cup-user-my-page-reservations-card {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid #E9528E;
    align-items: center;
    background: #fff;
    height: 100%;
    justify-content: center;
}

.cup-user-my-page-reservations-card-content {
    width: 100%;
    padding: 20px;
    height: 100%;
    display: flex;
    align-items: center;
}

.cup-user-my-page-reservations-card-content-for-store {
    width: 100%;
    padding: 20px;
    height: 100%;
}

.cup-user-my-page-reservations-card-content-for-store.lite {
    display: flex;
    align-items: center;
}


.cup-user-my-page-reservations-card-therapist-info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.cup-user-my-page-reservations-card-therapist-info img {
    height: 80px;
    width: 80px;
    object-fit: cover;
    border-radius: 50%;
}

.cup-user-my-page-reservations-card-names {
    display: flex;
    flex-direction: column;
}

.cup-user-my-page-reservations-card-therapist-name {
    font-size: 1rem;
    color: #535353;
}

.cup-user-my-page-reservations-card-store-name {
    font-size: 0.875rem;
    color: #535353;
}

.cup-user-my-page-reservations-card-text {
    font-size: 0.875rem;
    color: #535353;
    margin-top: 10px;
}

.cup-user-my-page-no-reservation-message {
    font-size: 1rem;
    color: #AAAAAC;
    text-align: center;
    margin: 0 auto;
}

.cup-user-my-page-sales-container {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 20px;
    padding-left: 20px;
    margin-top: 20px;
}

.cup-user-my-page-sales-container-title {
    font-size: 1.125rem;
    background: #E9528E;
    color: #FFFFFF;
    text-align: center;
    width: 100%;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}


.cup-user-my-page-sales-card {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid #E9528E;
    align-items: center;
    background: #fff;
}

.cup-user-my-page-sales-amount {
    font-size: 45px;
    color: #E9528E;
}

.cup-unconfirmed-matching-budge-content {
    position: relative;
}

.cup-unconfirmed-matching-budge {
    top: 10px;
    right: -15px;
    background: #E9528E;
    color: white;
    font-size: 0.75rem;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    transform: translateY(-50%);
}

.cup-store-my-page-reservations-management-today-title {
    color: #535353;
    font-size: 0.875rem;
    text-align: center;
    margin-bottom: 10px;
}

.cup-store-my-page-reservations-management-today-title span {
    color: #E9528E;
    font-size: 1.5rem;
    margin-left: 10px;
}

.cup-store-my-page-reservations-management-future-title {
    color: #535353;
    margin-bottom: 15px;
    text-align: center;
    font-size: 0.875rem;
}

.cup-store-my-page-reservations-management-future-content {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cup-store-my-page-reservations-management-future-info {
    position: relative;
    width: 100%;
    height: 60px;
    border: 1px solid #AAAAAC;
    border-radius: 8px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    background-color: #fff;
    padding-top: 10px;
    color: #535353;
}

.cup-store-my-page-reservations-management-future-info::before {
    content: attr(data-label);
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    padding: 5px 0px;
    font-size: 0.75rem;
    color: #7D40A0;
    border: 1px solid #AAAAAC;
    border-radius: 12px;
    width: 70px;
}

.cup-user-my-page-advertisement-container {
    text-align: center;
    color: #535353;
    font-size: 1rem;
    margin-top: 1.25rem;
}

.cup-user-my-page-advertisement-link {
    color: #E9528E;
    text-decoration: underline;
}


#thera-get-started.tgs {
    position: fixed;
    right: 10px;
    bottom: 6rem;
    z-index: 90;
    width: 300px;
    background: #F5F5F5;
    color: #535353;
    border-radius: 10px;
    border: solid 1px #535353;
}

@media screen and (min-width: 1024px) {
    #thera-get-started.tgs {
        right: calc(13.0208333333% + 1.25rem);
    }
}

.tgs__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 5px 10px;
    cursor: pointer;
    width: 100%;
    color: #535353;
    font-size: 0.875rem;
}

.tgs__chevron { 
    transition:transform .2s ease; 
}

.tgs--collapsed .tgs__chevron { 
    transform:rotate(180deg); 
}

.tgs__panel {
    padding: 10px 10px 10px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.tgs__progress {
    height:6px;
    border-radius:6px;
    background:#535353;
    overflow:hidden;
    margin:2px 0 10px;
}

.tgs__bar {
    height:100%;
    width:0%;
    background:#E9528E;
    transition:width .2s ease;
}

.tgs__list { 
    list-style:none; 
    margin:0; 
    padding:0; 
}

.tgs__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.tgs__label {
    display: flex;
    align-items: center;
    flex: 1;
    pointer-events: none;
    font-size: 0.875rem;
    color: #535353;
}

.tgs__check {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.tgs__text { 
    flex:1; 
    position: relative;
    padding-left: 26px;
}

.tgs__text::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 1px solid #aaa;
    border-radius: 4px;
    background-color: #fff;
    transition: background-color .3s ease, border-color .3s ease;
}

.tgs__text::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg) scale(0);
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transition: transform .2s ease;
}

.tgs__check:checked + .tgs__text::before {
    background-color: #E9528E;
    border-color: #E9528E;
}

.tgs__check:checked + .tgs__text::after {
    transform: translateY(-50%) rotate(45deg) scale(1);
}

.tgs__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.tgs__go {
    padding:0 10px;
}

.tgs__mute {
    margin-top: 5px;
    color: #AAAAAC;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    font-size: 0.75rem;
}

.tgs__progressline {
    display:flex;
    align-items:center;
    gap:10px;
    padding: 0 10px 5px;
}

.tgs__progressline .tgs__progress {
    flex:1;
    margin:0;
}

.tgs__count{
    font-size:12px;
}

.tgs__badge {
    display:inline-block;
    margin-left:8px;
    padding:2px 6px;
    font-size:10px;
    border-radius:10px;
    vertical-align:middle;
    white-space: nowrap;
}

.tgs__badge--important {
    background:#fff;
    color:#E9528E;
    border: solid 1px #E9528E;
}





/* ------------------------------------------------------------------------------------------------------------------ */
/* セラピスト個別ページ */

.cup-display-therapist-page {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
    background: #fff;
    font-weight: 500;
}

.cup-display-therapist-page,
.cup-display-therapist-page * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.cup-display-therapist-page-content {
    height: 100%;
    overflow-y: auto;
}

.cup-display-therapist-page-section {
    background: #fff;
    padding-bottom: 40px;
    padding-left: 20px;
    padding-right: 20px;
}

.cup-display-therapist-store-name {
    margin-top: 20px;
    color: #535353;
    font-size: 1rem;
    text-decoration: underline;
    text-decoration-color: #535353;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    display: inline-block;
}

.cup-display-therapist-page .swiper-container {
    width: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

.cup-display-therapist-page .swiper-wrapper {
    width: 100%;
    display: flex;
}

.cup-display-therapist-page .swiper-slide {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    overflow: hidden;
    border-radius: 5px;
}

.cup-display-therapist-page .swiper-slide {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    overflow: hidden;
}

.cup-display-therapist-page .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cup-display-therapist-page .swiper-pagination {
    position: relative;
    margin-top: 20px;
    text-align: center;
    z-index: 1;
}

.cup-display-therapist-page .swiper-pagination-bullet {
    background: #AAAAAC;
    opacity: 0.6;
    transition: opacity 0.3s;
}

.cup-display-therapist-page .swiper-pagination-bullet-active {
    opacity: 1;
    background: #E9528E;
}

.cup-display-image-placeholder {
    width: 100%;
    aspect-ratio: 3 / 4;
    background-color: #e0e0e0;
    color: #666;
    font-size: 0.875rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    text-align: center;
}

.cup-display-therapist-name {
    color: #535353;
    font-size: 1.5rem;
}

.cup-display-therapist-average-rating {
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0rem;
    color: #E9528E;
    flex-direction: column;
}

.cup-display-therapist-average-rating .average-star {
    color: #AAAAAC;
    transition: color 0.3s, transform 0.2s ease-in-out;
    position: relative;
}

.cup-display-therapist-average-rating .average-star.selected {
    color: #E9528E;
    transform: scale(1.1);
}

.cup-display-therapist-average-rating .average-star.half-selected::before {
    content: "★";
    position: absolute;
    color: #E9528E;
    width: 50%;
    overflow: hidden;
}

.cup-display-therapist-average-rating .average-score {
    font-size: 1.5rem;
    color: #E9528E;
}

.cup-display-therapist-page-header-five-star {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.cup-display-therapist-review-count {
    font-size: 1rem;
    color: #7D40A0;
    text-decoration: underline;
}

.cup-display-therapist-rating-row {
    display: flex;
    align-items: center;
    gap: 0px;
    flex-wrap: wrap;
    margin-bottom: 0.625rem;
}

.cup-display-therapist-review-bubble-btn {
    position: relative;
    display: inline-block;
    margin-left: 10px;
    padding: 5px 10px;
    border-radius: 10px;
    background-color: #e9528e;
    border: none;
    text-align: center;
    font-size: 0.75rem;
    font-weight: normal;
    line-height: 1.3;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.cup-display-therapist-review-bubble-btn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
}

.cup-display-therapist-review-bubble-btn::before {
    content: "";
    position: absolute;
    top: 45%;
    left: 0;
    border-style: solid;
    border-width: 10px 10px 0 0;
    border-color: transparent #e9528e transparent transparent;
    translate: -100% calc(-40% + 0.2px);
    transform: skew(0, -3deg);
    transform-origin: right;
}

.cup-display-therapist-body {
    color: #535353;
    font-size: 1rem;
    margin-bottom: 0.625rem;
}

.cup-display-therapist-mbti {
    color: #7D40A0;
    font-size: 1rem;
    text-decoration: underline;
}

.cup-display-therapist-support-area {
    color: #535353;
    font-size: 1rem;
}

.cup-display-therapist-search-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.cup-display-therapist-search-tags .therapist-tag {
    display: inline-block;
    color: #535353;
    border: solid 1px #535353;
    font-size: 0.875rem;
    padding: 4px 8px;
    border-radius: 100px;
}

.cup-display-therapist-main-info-content,
.cup-display-store-main-info-content {
    position: relative;
}

.cup-display-icons {
    position: absolute;
    top: 0.4375rem;
    right: 0;
    display: flex;
    gap: 0.75rem;
}

.cup-display-std-test-icon {
    position: static;
    color: #7D40A0;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.875rem;
}

.cup-display-std-test-icon img {
    margin-left: 0.1875rem;
    width: auto !important;
    height: 1.5rem !important;
}


.cup-display-share-icon {
    position: static;
    color: #7D40A0;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.875rem;
}

.cup-display-share-icon img {
    margin-left: 0.1875rem;
    width: auto;
    height: 1.5rem;
}


.cup-display-therapist-matching-btn-content {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem !important;
    flex-direction: column;
    align-items: center;
    gap: 0px !important;
    position: relative;
}

.cup-display-therapist-matching-toast {
    position: absolute;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #E9528E;
    color: #fff;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 20;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    text-align: center;
}

.cup-display-therapist-matching-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(-4px);
}

.cup-display-therapist-message-btn {
    background-color: #fff;
    color: #7D40A0;
    border: solid 1px #7D40A0;
    border-radius: 100px;
    font-size: 1rem;
    width: 298px;
    height: 48px;
    position: relative;
    margin-bottom: 1.25rem;
}

.cup-display-therapist-message-btn::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 20px;
    width: 7px;
    height: 7px;
    border-bottom: 1px solid #7D40A0;
    border-left: 1px solid #7D40A0;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}

.cup-display-therapist-message-btn .cup-display-therapist-matching-toast {
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
}


#word-of-mouth {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.cup-display-therapist-matching-btn {
    width: 298px;
    height: 60px;
    border: solid 1px #7D40A0;
    border-radius: 100px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.cup-display-therapist-matching-btn-char1 {
    font-size: 1.125rem;
    color: #7D40A0;
}

.cup-display-therapist-matching-btn-char2 {
    font-size: 0.875rem;
    color: #535353;
}

.cup-display-therapist-matching-btn::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 20px;
    width: 7px;
    height: 7px;
    border-bottom: 1px solid #7D40A0;
    border-left: 1px solid #7D40A0;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}

.cup-display-therapist-delete-matching-btn {
    font-size: 0.875rem;
    color: #AAAAAC;
    text-decoration: underline;
    text-decoration-color: #AAAAAC;
    text-underline-offset: 1px;
    text-decoration-thickness: 1px;
    margin-bottom: 1.25rem;
}


.cup-display-therapist-tab-section {
    background: #F5F5F5;
    padding-top: 40px;
    padding-left: 0 !important;
    padding-right: 0 !important;
}


.cup-display-therapist-tab-menu {
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-direction: row;
    gap: 10px;
}


.cup-display-therapist-tab-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.cup-display-therapist-tab {
    cursor: pointer;
    background-color: #AAAAAC;
    color: white;
    border-radius: 10px 10px 0 0;
    width: 100%;
    text-align: center;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease, box-shadow .15s ease;
}

.cup-display-therapist-tab.cup-display-therapist-active {
    background-color: #E9528E;
    transform: translateY(-3px);
}

.cup-display-therapist-tab-content {
    display: none;
    background-color: #fff;
    box-sizing: border-box;
    padding: 20px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.cup-display-therapist-tab-content.cup-display-therapist-active {
    display: block;
}

.cup-display-therapist-tab-title {
    color: #E9528E;
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.cup-display-therapist-tab-sub-title {
    color: #E9528E;
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 1.875rem;
    margin-top: 1.75rem;
}

.cup-display-schedule-title {
    color: #535353;
    text-align: right;
    font-size: 1.125rem;;
    margin-bottom: 1.25rem;
    margin-top: 2.5rem;
}

.cup-display-therapist-question-block {
    margin-bottom: 20px;
    border-bottom: 1px solid #7D40A0;
    padding-bottom: 20px;
}

.cup-display-therapist-question-title {
    color: #7D40A0;
    font-size: 1rem;
    margin-bottom: 5px;
}

.cup-display-therapist-question-answer {
    color: #535353;
    font-size: 0.875rem;
    box-sizing: border-box;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-y: hidden;
}

#cup-display-therapist-question-self-introduction {
    white-space: normal;
}

#cup-display-therapist-question-self-introduction a {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    word-break: break-word;
}


.cup-display-therapist-snsurl-block {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.875rem;
    justify-items: center;
    align-items: center;
    margin-top: 2.5rem;
}

.cup-display-sns-icon img {
    width: 50px;
    height: 50px;
}

.cup-display-therapist-surveys-block-title {
    color: #7D40A0;
    font-size: 1rem;
}

.cup-display-therapist-reservation-tab-date {
    color: #535353;
    font-size: 1.125rem;
    margin-bottom: 10px;
}

.cup-display-therapist-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    border-top: solid 1px #7D40A0;
    padding-top: 20px;
    margin-bottom: 40px
}

.cup-display-therapist-tags .cup-display-therapist-tag {
    border: 1px solid #7D40A0;
    background-color: #FFFFFF;
    color: #7D40A0;
    border-radius: 50px;
    cursor: pointer;
    font-size: 0.875rem;
    min-width: 60px;
    transition: all 0.2s ease;
    padding-bottom: 3px;
    padding-top: 3px;
    padding-left: 12px;
    padding-right: 12px;
}


.cup-display-therapist-latest-reviews {
    display: flex;
    flex-direction: column;
    gap: 40px;
    gap: 20px;
}

.cup-display-therapist-review {
    background: #F5F5F5;
    padding: 20px;
    border-radius: 10px;

}

.cup-display-therapist-review-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}


.cup-display-therapist-star-rating {
    font-size: 20px;
    cursor: pointer;
    display: flex;
    justify-content: flex-start;
    gap: 0px;
}

.cup-display-therapist-star-rating .star {
    color: #AAAAAC;
    transition: color 0.3s, transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    transform: scale(1);
}

.cup-display-therapist-star-rating .star.selected {
    color: #E9528E;
    transform: scale(1.1); 
}

.cup-display-therapist-review-created_at {
    font-size: 1rem;
    color: #535353;
}

.cup-display-therapist-review-text-wrapper {
    position: relative;
}

.cup-display-therapist-review-text{
    width: 100%;
    padding: 10px;
    font-size: 0.875rem;
    background-color: #FFFFFF;
    box-sizing: border-box;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-y: hidden;
    margin-top: 10px;
    color: #535353;
    max-height: 100px;
    max-height: 100px;
    min-height: 100px;
    height: 100px;
}

.cup-display-therapist-review-hide-content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cup-display-therapist-review-hide-message {
    color: #AAAAAC;
    font-size: 1rem;
    border: solid 1px #AAAAAC;
    width: 85%;
    height: 56px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cup-display-therapist-view-more-reviews {
    text-align: center;
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.cup-display-therapist-view-more-reviews-btn {
    width: 298px;
    height: 48px;
    border: solid 1px #7D40A0;
    color: #7D40A0;
    border-radius: 100px;
    position: relative;
    text-decoration: none;
    font-size: 1rem;
    display: inline-block;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cup-display-therapist-view-more-reviews-btn::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 20px;
    width: 7px;
    height: 7px;
    border-bottom: 1px solid #7D40A0;
    border-left: 1px solid #7D40A0;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}

.cup-display-therapist-no-reviews-message {
    font-size: 1rem;
    color: #AAAAAC;
    text-align: center;
}

.cup-display-therapist-status-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #E9528E;
    color: white;
    padding: 6px 10px;
    border-radius: 12px;
    font-size: 0.875rem;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.cup-display-therapist-next-badge {
    background-color: #7D40A0;
    bottom: 50px;
    right: 10px;
    top: auto;
    left: auto;    
}

.custom-therapist-reservation-about-btn {
    color: #7D40A0;
    display: flex;
    flex-direction: row;
    font-size: 0.875rem;
    align-items: center;
    gap: 3px;
    margin-top: 0.25rem;
}

.custom-therapist-reservation-about-btn .question-icon {
    width: 20px;
    height: auto;
}

.cup-display-page .plyr video {
    display: block;
    border-radius: 10px;
    margin-top: 10px;
    width: 100%;
    aspect-ratio: 33 / 25;
    object-fit: cover;
}

.cup-display-page :not(:fullscreen) > .plyr__video-wrapper {
    background: transparent !important;
}

.cup-display-page .plyr__video-wrapper {
    display: flex;
}

.cup-display-page .plyr:fullscreen video {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0px;
    object-fit: contain;

}

.cup-display-page .plyr--video .plyr__controls {
    background: transparent !important;
}

.cup-display-page .plyr__control--overlaid
{
    background: #E9528E !important;
}

.cup-display-page .plyr__menu {
    display: none;
}

.cup-display-page .plyr--pip-supported [data-plyr=pip] {
    display: none;
}

.cup-display-page .plyr__volume {
    display: none;
}

.cup-display-page .plyr__control[data-plyr="airplay"] {
    display: none !important;
}

.cup-display-page .plyr--full-ui input[type=range] {
    color: #E9528E !important;
}

.cup-display-page .plyr--video .plyr__control:hover, .plyr--video .plyr__control[aria-expanded=true] {
    background: #E9528E !important;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cup-display-theralog-card {
    display: flex;
    align-items: flex-start;
    background: white;
    border-bottom: 1px solid #AAAAAC;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.cup-display-theralog-card-area {
    color: #535353;
    border: 1px solid #535353;
    border-radius: 20px;
    font-size: 0.75rem;
    width: auto;
    text-align: center;
    width: 87px;
    height: 20px;
}

.cup-display-theralog-card-avatar {
    flex: 0 0 50px;
    margin-right: 0px !important;
}

.cup-display-theralog-card-avatar img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.cup-display-theralog-card-content {
    flex: 1;
    width: calc(100% - 60px);
}


.cup-display-theralog-card-content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cup-display-theralog-card-username {
    font-weight: bold;
    color: #535353;
    font-size: 1rem;
}

.cup-display-theralog-card-content-header-date-and-btn {
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
}

.cup-display-theralog-card-content-header-date-and-btn img {
    width: 14px;
    height: 14px;
}

.cup-display-theralog-card-post-date {
    font-size: 0.875rem;
    color: #535353;
}

.cup-display-theralog-card-main-contents {
    font-size: 1rem;
    color: #535353;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.cup-display-theralog-card-image {
    display: block;
    border-radius: 10px;
    margin-top: 10px;
    width: 100%;
    object-fit: cover;
}

.cup-display-theralog-card-video {

}

.cup-display-theralog-card-buttons {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    margin-top: 5px;
    align-items: center;
}


.cup-display-theralog-card-like-btn,
.cup-display-theralog-card-comment-btn,
.cup-display-theralog-card-share-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}


.cup-display-theralog-card-like-btn img,
.cup-display-theralog-card-comment-btn img {
    width: 1.15rem !important;
    height: auto;
    margin-right: 5px;
}

.cup-display-theralog-card-share-btn img {
    width: 1.4375rem;
    height: auto;
}

.cup-display-theralog-card-like-count,
.cup-display-theralog-card-comment-count {
    font-size: 0.875rem;
    color: #535353;
}


/* ------------------------------------------------------------------------------------------------------------------ */
/* 店舗個別ページ */

.cup-display-store-page {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
    background: #fff;
    font-weight: 500;
}

.cup-display-store-page,
.cup-display-store-page * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.cup-display-store-page-content {
    height: 100%;
    overflow-y: auto;
}

.cup-display-store-page-section {
    background: #fff;
    padding-bottom: 40px;
    padding-left: 20px;
    padding-right: 20px;
}

.cup-display-store-page .swiper-container {
    width: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

.cup-display-store-page .swiper-wrapper {
    width: 100%;
    display: flex;
}

.cup-display-store-page .swiper-slide {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    overflow: hidden;
    border-radius: 5px;
}

.cup-display-store-page .swiper-slide {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    overflow: hidden;
}

.cup-display-store-page .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cup-display-store-page .swiper-pagination {
    position: relative;
    margin-top: 20px;
    text-align: center;
    z-index: 1;
}

.cup-display-store-page .swiper-pagination-bullet {
    background: #AAAAAC;
    opacity: 0.6;
    transition: opacity 0.3s;
}

.cup-display-store-page .swiper-pagination-bullet-active {
    opacity: 1;
    background: #E9528E;
}

.cup-display-store-name {
    color: #535353;
    font-size: 1.5rem;
}

.cup-display-store-main-area {
    color: #535353;
    font-size: 1rem;
}

.cup-display-store-average-rating {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.cup-display-store-average-rating .average-score {
    font-size: 1.5rem;
    color: #E9528E;
    margin-right: 5px;
}

.cup-display-store-page-header-five-star {
    display: flex;
    flex-direction: row;
}

.cup-display-store-average-rating .average-star {
    color: #AAAAAC;
    transition: color 0.3s, transform 0.2s ease-in-out;
    position: relative;
    font-size: 1.5rem;
}

.cup-display-store-average-rating .average-star.selected {
    color: #E9528E;
}

.cup-display-store-average-rating .average-star.half-selected::before {
    content: "★";
    position: absolute;
    color: #E9528E;
    width: 50%;
    overflow: hidden;
}

.cup-display-store-review-count {
    font-size: 1rem;
    color: #AAAAAC;
}

.cup-display-store-profile-sentence-content {
    margin-top: 20px;
}

.cup-display-store-profile-sentence {
    color: #535353;
    font-size: 0.875rem;
    box-sizing: border-box;
    white-space: normal;
    word-wrap: break-word;
    overflow-y: hidden;
    padding: 10px;
    background: #F5F5F5;
    border-radius: 10px;
    min-height: 100px;
}

.cup-display-store-profile-sentence a {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    word-break: break-word;
}

.cup-display-store-matching-btn-content {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    position: relative;
}

.cup-display-store-message-btn {
    background-color: #fff;
    color: #7D40A0;
    border: solid 1px #7D40A0;
    border-radius: 100px;
    font-size: 1rem;
    width: 298px;
    height: 48px;
    position: relative;
}

.cup-display-store-message-btn::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 20px;
    width: 7px;
    height: 7px;
    border-bottom: 1px solid #7D40A0;
    border-left: 1px solid #7D40A0;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}

.cup-display-store-tab-section {
    background: #F5F5F5;
    padding-top: 40px;
    padding-left: 0 !important;
    padding-right: 0 !important;
}


.cup-display-store-tab-menu {
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-direction: row;
    gap: 10px;
}


.cup-display-store-tab-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.cup-display-store-tab {
    cursor: pointer;
    background-color: #AAAAAC;
    color: white;
    border-radius: 10px 10px 0 0;
    width: 100%;
    text-align: center;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease, box-shadow .15s ease;
}

.cup-display-store-tab.cup-display-store-active {
    background-color: #E9528E;
    transform: translateY(-3px);
}

.cup-display-store-tab-content {
    display: none;
    background-color: #fff;
    box-sizing: border-box;
    padding: 20px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.cup-display-store-tab-content.cup-display-store-active {
    display: block;
}

.cup-display-store-tab-title {
    color: #E9528E;
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.cup-display-store-therapist-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.cup-display-store-info-therapist-nothing-message {
    grid-column: 1 / -1;
    text-align: center;
    justify-self: center;
    align-self: center;
    font-size: 1rem;
    color: #AAAAAC;
    text-align: center;
}

.cup-display-store-therapist-card {
    display: block;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

.cup-display-store-therapist-card-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
}

.cup-display-store-therapist-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cup-display-store-therapist-card-name {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 8px 10px;
    color: #fff;
    font-size: 0.875rem;
    text-align: center;
    box-sizing: border-box;
    background: rgba(109, 99, 115, 0.7);
    padding: 8px 12px;
}

.cup-display-store-therapist-status-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #E9528E;
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.cup-display-store-therapist-next-status-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #7D40A0;
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.cup-display-store-info-section {
    margin-bottom: 20px;
}

.cup-display-store-info-section-title {
    font-size: 1rem;
    color: #7D40A0;
}

.cup-display-store-info-table-nothing-message {
    color: #AAAAAC;
    text-align: center;
    font-size: 0.875rem;
    margin-top: 10px;
}

.cup-display-store-info-table th:nth-child(1),
.cup-display-store-info-table td:nth-child(1) {
    width: 50%;
    overflow-x: auto;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.cup-display-store-info-table th:nth-child(1)::-webkit-scrollbar,
.cup-display-store-info-table td:nth-child(1)::-webkit-scrollbar {
    display: none;
}

.cup-display-store-info-table th:nth-child(2),
.cup-display-store-info-table td:nth-child(2) {
    width: 20%;
}

.cup-display-store-info-table th:nth-child(3),
.cup-display-store-info-table td:nth-child(3) {
    width: 30%;
}


.cup-display-store-info-table.naming-fee-table th:nth-child(1),
.cup-display-store-info-table.naming-fee-table td:nth-child(1),
.cup-display-store-info-table.options-table th:nth-child(1),
.cup-display-store-info-table.options-table td:nth-child(1),
.cup-display-store-info-table.transport-table th:nth-child(1),
.cup-display-store-info-table.transport-table td:nth-child(1) {
    width: 70%;
}

.cup-display-store-info-table.naming-fee-table th:nth-child(2),
.cup-display-store-info-table.naming-fee-table td:nth-child(2),
.cup-display-store-info-table.options-table th:nth-child(2),
.cup-display-store-info-table.options-table td:nth-child(2),
.cup-display-store-info-table.transport-table th:nth-child(2),
.cup-display-store-info-table.transport-table td:nth-child(2) {
    width: 30%;
}


.cup-display-store-info-table.store-data-table th:nth-child(1),
.cup-display-store-info-table.store-data-table td:nth-child(1) {
    width: 35%;
}

.cup-display-store-info-table.store-data-table th:nth-child(2),
.cup-display-store-info-table.store-data-table td:nth-child(2) {
    width: 65%;
}

.cup-table-wrapper {
    border-radius: 12px;
    overflow: hidden;
    margin-top: 10px;
}

.cup-display-store-info-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.875rem;
    background-color: #fff;
    color: #535353;
}

.cup-display-store-info-table thead {
    background-color: #7D40A0;
    color: #fff;
}

.cup-display-store-info-table th,
.cup-display-store-info-table td {
    padding: 10px;
    border: 1px solid #AAAAAC;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
}

.cup-display-store-cancellation-policy,
.cup-display-store-customer-confirmation {
    color: #535353;
    font-size: 0.875rem;
    box-sizing: border-box;
    white-space: normal;
    word-wrap: break-word;
    overflow-y: hidden;
    padding: 10px;
    background: #F5F5F5;
    border-radius: 10px;
    min-height: 100px;
    margin-top: 10px;
}

.cup-display-store-cancellation-policy a,
.cup-display-store-customer-confirmation a {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    word-break: break-word;
}

.cup-display-store-info-credit-card-content {
    margin-top: 10px;
}

.cup-display-store-info-credit-card-sentence {
    color: #535353;
    font-size: 0.875rem;
}

.cup-display-store-info-credit-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    margin-top: 10px;
}

.cup-display-store-info-credit-card-tag {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    color: #535353;
    font-size: 0.875rem;
    height: 80px;
}

.cup-display-store-info-credit-card-logo {
    width: 40px;
    height: auto;
    display: block;
}

.cup-display-store-latest-reviews {
    display: flex;
    flex-direction: column;
    gap: 40px;
    gap: 20px;
}

.cup-display-store-review {
    background: #F5F5F5;
    padding: 20px;
    border-radius: 10px;

}

.cup-display-store-review-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}


.cup-display-store-star-rating {
    font-size: 20px;
    cursor: pointer;
    display: flex;
    justify-content: flex-start;
    gap: 0px;
}

.cup-display-store-star-rating .star {
    color: #AAAAAC;
    transition: color 0.3s, transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    transform: scale(1);
}

.cup-display-store-star-rating .star.selected {
    color: #E9528E;
    transform: scale(1.1); 
}

.cup-display-store-review-created_at {
    font-size: 1rem;
    color: #535353;
}

.cup-display-store-review-text-wrapper {
    position: relative;
}

.cup-display-store-review-text{
    width: 100%;
    padding: 10px;
    font-size: 0.875rem;
    background-color: #FFFFFF;
    box-sizing: border-box;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-y: hidden;
    margin-top: 10px;
    color: #535353;
    max-height: 100px;
    max-height: 100px;
    min-height: 100px;
    height: 100px;
}

.cup-display-store-review-hide-content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cup-display-store-review-hide-message {
    color: #AAAAAC;
    font-size: 1rem;
    border: solid 1px #AAAAAC;
    width: 85%;
    height: 56px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cup-display-store-view-more-reviews {
    text-align: center;
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.cup-display-store-view-more-reviews-btn {
    width: 298px;
    height: 48px;
    border: solid 1px #7D40A0;
    color: #7D40A0;
    border-radius: 100px;
    position: relative;
    text-decoration: none;
    font-size: 1rem;
    display: inline-block;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cup-display-store-view-more-reviews-btn::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 20px;
    width: 7px;
    height: 7px;
    border-bottom: 1px solid #7D40A0;
    border-left: 1px solid #7D40A0;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}

.cup-display-store-no-reviews-message {
    font-size: 1rem;
    color: #AAAAAC;
    text-align: center;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* ユーザー個別ページ */

.cup-display-user-page {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
    background: #fff;
    font-weight: 500;
}

.cup-display-user-page,
.cup-display-user-page * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.cup-display-user-page-content {
    height: 100%;
    overflow-y: auto;
}

.cup-display-user-page-section {
    background: #fff;
    padding-bottom: 40px;
    padding-left: 20px;
    padding-right: 20px;
}

.cup-display-user-image-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cup-display-user-image-container img {
    height: 8.5rem;
    width: 8.5rem;
    object-fit: cover;
    border-radius: 50% !important;
    display: flex;

}

.cup-display-user-main-info-content {
    margin-top: 20px;
}

.cup-display-user-name {
    color: #535353;
    font-size: 1.5rem;
    text-align: center;
}

.cup-display-user-region {
    color: #535353;
    font-size: 1rem;
    text-align: center;
}

.cup-display-user-age-range {
    color: #535353;
    font-size: 1rem;
    text-align: center;
}

.cup-display-user-profile-sentence-content {
    margin-top: 20px;
}

.cup-display-user-profile-sentence {
    color: #535353;
    font-size: 0.875rem;
    box-sizing: border-box;
    white-space: pre-wrap;
    white-space: normal;
    overflow-y: hidden;
    padding: 10px;
    background: #F5F5F5;
    border-radius: 10px;
    min-height: 100px;
}

.cup-display-user-profile-sentence a {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    word-break: break-word;
}

.cup-display-user-matching-btn-content {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.cup-display-user-message-btn {
    background-color: #fff;
    color: #7D40A0;
    border: solid 1px #7D40A0;
    border-radius: 100px;
    font-size: 1rem;
    width: 298px;
    height: 48px;
    position: relative;
}

.cup-display-user-message-btn::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 20px;
    width: 7px;
    height: 7px;
    border-bottom: 1px solid #7D40A0;
    border-left: 1px solid #7D40A0;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}

.cup-display-user-message-btn:disabled {
    background-color: #AAAAAC;
    color: #fff;
    border: none;
    cursor: not-allowed;
}

.cup-display-user-message-btn:disabled::before {
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
}

.cup-display-user-message-btn-message {
    margin-top: 10px;
    font-size: 0.875rem;
    color: #AAAAAC;
    text-align: center;
}

.cup-display-user-tab-section {
    background: #F5F5F5;
    padding-top: 40px;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.cup-display-user-tab-menu {
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-direction: row;
    gap: 10px;
}

.cup-display-user-tab-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.cup-display-user-tab {
    cursor: pointer;
    background-color: #AAAAAC;
    color: white;
    border-radius: 10px 10px 0 0;
    width: 100%;
    text-align: center;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease, box-shadow .15s ease;
}

.cup-display-user-tab.cup-display-user-active {
    background-color: #E9528E;
    transform: translateY(-3px);
}

.cup-display-user-tab-content {
    display: none;
    background-color: #fff;
    box-sizing: border-box;
    padding: 20px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.cup-display-user-tab-content.cup-display-user-active {
    display: block;
}

.cup-display-user-tab-title {
    color: #E9528E;
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.cup-display-user-question-block {
    margin-bottom: 20px;
    border-bottom: 1px solid #7D40A0;
    padding-bottom: 20px;
}

.cup-display-user-question-title {
    color: #7D40A0;
    font-size: 1rem;
    margin-bottom: 5px;
}

.cup-display-user-question-answer {
    color: #535353;
    font-size: 0.875rem;
    box-sizing: border-box;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-y: hidden;
}

.cup-display-user-reservation-badge-with-button {
    background-color: #E9528E;
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.875rem;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    margin-top: 1.25rem;
}

.cup-display-user-reservation-badge-with-button .reservation-label {
    position: relative;
    padding-left: 15px;
}

.cup-display-user-reservation-badge-with-button .reservation-label::before {
    content: "✔";
    position: absolute;
    left: 0;
    top: 0;
    color: white;
    font-size: 0.875rem;
}

.cup-display-user-reservation-badge-with-button .reservation-button {
    background-color: white;
    color: #E9528E;
    padding: 4px 10px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 13px;
    transition: background-color 0.2s, color 0.2s;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* プロフィールページ */
.cup-profile-page {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    background: #fff;
    padding-left: 20px;
    padding-right: 20px;
}

.cup-profile-page-title {
    font-size: 1.5rem;
    font-weight: 500;
    color: #E9528E;
    text-align: center;
    margin-top: 40px;
}

.cup-profile-content {
    height: 100%;
    overflow-y: auto;
}

.cup-profile-image-section {
    width: 100%;
    margin-top: 40px;
    position: relative;
}

.cup-profile-image-section label {
    font-size: 1rem;
    color: #535353;
}

.cup-profile-section {
    width: 100%;
    margin-top: 40px;
    margin-bottom: 100px;
}

.cup-profile-sub-section {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.cup-profile-sub-section label {
    font-size: 1rem;
    color: #535353;
    display: flex;
    flex-direction: row;
    align-items: center;
}

#cup-profile-upload-progress {
    width: 100%;
    background-color: #e0e0e0;
    border-radius: 10px;
    height: 12px;
    position: absolute;
    bottom: -20px;
}

#cup-profile-progress-bar {
    height: 100%;
    background: linear-gradient(to right, #7D40A0, #9E6CBB);
    width: 0%;
    border-radius: 8px;
    transition: width 0.4s ease-out;
}

.cup-profile-pic-grid {
    display: grid;
    gap: 10px;
    justify-items: center;
    align-items: center;
    width: 100%;
    margin-top: 5px;
}

.cup-profile-pic-item {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 200px;
    width: 100%;
    aspect-ratio: 3 / 4;
    border: 1px dashed #535353;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    background-color: #F5F5F5;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.cup-profile-pic-item img {
    pointer-events: none;
    width: 30px;
    height: 30px;
}

#cup-profile-name {
    border: none;
    border-radius: 25px;
    background-color: #F5F5F5;
    color: #535353;
    width: 100%;
    padding: 12px;
    margin-top: 5px;
}

#cup-profile-sentence {
    width: 100%;
    padding: 12px;
    border-radius: 25px;
    font-size: 1rem;
    color: #535353;
    background-color: #F5F5F5;
    resize: vertical;
    border: none;
    margin-top: 5px;
    box-sizing: border-box;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-y: hidden;
}

.cup-profile-character-counter,
.cup-profile-name-character-counter {
    font-size: 0.875rem;
    color: #AAAAAC;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    bottom: 5px;
    right: 10px;
}

.cup-profile-region-select-section,
.cup-profile-age-range-select-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.cup-profile-region-select-section select,
.cup-profile-age-range-select-section select {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 25px;
    font-size: 1rem;
    color: #535353;
    background-color: #F5F5F5;
    resize: none;
    text-align: center;
    margin-top: 5px;
}


.cup-profile-age-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 10px;
    color: #535353;
    font-size: 1rem;
    gap: 5px;
}

.cup-profile-age-switch {
    position: relative;
    display: inline-block;
    height: 2.125rem;
    width: 5.3125rem;
}

.cup-profile-age-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cup-profile-age-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #AAAAAC;
    transition: 0.4s;
    border-radius: 3.125rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0rem 0.625rem;
}

.cup-profile-age-slider:before {
    position: absolute;
    content: "";
    background-color: white;
    transition: 0.4s;
    border-radius: 3.125rem;
    bottom: 0.25rem;
    height: 1.625rem;
    left: 0.25rem;
    width: 1.625rem;
}

.cup-profile-age-text-on,
.cup-profile-age-text-off {
    position: absolute;
    font-size: 0.875rem;
    color: white;
    transition: 0.4s;
}

.cup-profile-age-text-off {
    left: 2.0625rem;
    opacity: 1;
}

.cup-profile-age-text-on {
    right: 2.1875rem;
    opacity: 0;
}

.cup-profile-age-switch input:checked + .cup-profile-age-slider {
    background-color: #7D40A0;
}

.cup-profile-age-switch input:checked + .cup-profile-age-slider:before {
    transform: translateX(3.125rem);
}

.cup-profile-age-switch input:checked + .cup-profile-age-slider .cup-profile-age-text-on {
    opacity: 1;
}

.cup-profile-age-switch input:checked + .cup-profile-age-slider .cup-profile-age-text-off {
    opacity: 0;
}

.cup-question {
    border: none;
    border-radius: 25px;
    background-color: #F5F5F5;
    color: #535353;
    width: 100%;
    padding: 12px;
    margin-top: 5px;
    box-sizing: border-box;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-y: hidden;
}

.cup-profile-footer {
    position: fixed;
    bottom: 80px;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
}

.cup-profile-save-button {
    display: inline-block;
    border-radius: 50%;
    padding: 0px;
    font-size: 0.75rem;
    color: white;
    width: 70px;
    height: 70px;
    text-align: center;
    line-height: 60px;
    background: #E9528E;
    z-index: 100;
}

.cup-dot-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: #E9528E;
}
  
.cup-dot-loader div {
    width: 5px;
    height: 5px;
    background-color: #E9528E;
    border-radius: 50%;
    animation: wave 1.2s infinite ease-in-out;
}
  
.cup-dot-loader div:nth-child(1) {
    animation-delay: -0.4s;
}
  
.cup-dot-loader div:nth-child(2) {
    animation-delay: -0.2s;
}
  
.cup-dot-loader div:nth-child(3) {
    animation-delay: 0s;
}
  
@keyframes wave {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.5);
    }
}

.cup-therapist-profile-image-section {
    width: 100%;
    margin-top: 40px;
    position: relative;
}

.cup-therapist-profile-image-section label {
    font-size: 1rem;
    color: #535353;
}

.cup-therapist-profile-section {
    width: 100%;
    margin-top: 40px;
    margin-bottom: 100px;
}

#cup-therapist-profile-upload-progress,
#cup-therapist-std-upload-progress {
    width: 100%;
    background-color: #e0e0e0;
    border-radius: 10px;
    height: 12px;
    position: absolute;
    bottom: -20px;
}

#cup-therapist-profile-progress-bar,
#cup-therapist-std-progress-bar {
    height: 100%;
    background: linear-gradient(to right, #7D40A0, #9E6CBB);
    width: 0%;
    border-radius: 8px;
    transition: width 0.4s ease-out;
}

.cup-therapist-profile-pic-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    justify-items: center;
    align-items: center;
    width: 100%;
    margin-top: 5px;
}

.cup-therapist-std-pic-grid {
    display: grid;
    gap: 10px;
    justify-items: center;
    align-items: center;
    width: 100%;
    margin-top: 5px;
}

.cup-therapist-profile-pic-item,
.cup-therapist-std-pic-item {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 105px;
    max-width: 200px;
    width: 100%;
    aspect-ratio: 3 / 4;
    border: 1px dashed #535353;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    background-color: #F5F5F5;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.cup-therapist-profile-pic-item img,
.cup-therapist-std-pic-item img {
    pointer-events: none;
    width: 30px;
    height: 30px;
}

.cup-therapist-profile-first-pic-item {
    border-color: #E9528E;
}

.cup-therapist-profile-sub-section {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.cup-therapist-profile-sub-section label {
    font-size: 1rem;
    color: #535353;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.cup-therapist-profile-sub-section label img {
    width: 40px;
    height: 40px;
}

.cup-therapist-profile-sub-section-twitcas-logo {
    height: 2rem !important;
    width: 2rem !important;
}

#cup-therapist-profile-name {
    border: none;
    border-radius: 25px;
    background-color: #F5F5F5;
    color: #535353;
    width: 100%;
    padding: 12px;
    margin-top: 5px;
}

.cup-therapist-profile-birthdate-select-section,
.cup-therapist-profile-therapist-career-select-section {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 5px;
}

.cup-therapist-profile-birthdate-select-section select,
.cup-therapist-profile-therapist-career-select-section select {
    padding: 8px;
    font-size: 0.875rem;
    width: 100%;
    text-align: center;
    background-color: #F5F5F5;
    border-radius: 25px;
    color: #535353;
}

.cup-select-separator {
    display: block;
    text-align: center;
    margin-top: 10px;
    font-size: 1rem;
    margin-right: 5px;
    margin-left: 5px;
    color: #AAAAAC;
}

#cup-therapist-profile-height,
#cup-therapist-profile-weight {
    border: none;
    border-radius: 25px;
    background-color: #F5F5F5;
    color: #535353;
    width: 100%;
    padding: 12px;
    margin-top: 5px;
}

#cup-therapist-profile-mbti {
    border: none;
    background-color: #F5F5F5;
    color: #535353;
    width: 100%;
    border-radius: 1.5625rem;
    margin-top: 0.3125rem;
    padding: 0.75rem;
}


#cup-therapist-profile-main-area {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 25px;
    font-size: 1rem;
    color: #535353;
    background-color: #F5F5F5;
    resize: none;
    text-align: center;
    margin-top: 5px;
}

.cup-therapist-profile-service-area-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    margin-top: 10px;
}

.cup-therapist-profile-service-area-checkboxes label {
    position: relative;
    padding-left: 30px;
    font-size: 1rem;
    color: #535353;
    cursor: pointer;
    user-select: none;
    transition: color 0.3s ease;
}

.cup-therapist-profile-service-area-checkboxes label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 2px solid #AAAAAC;
    border-radius: 4px;
    background-color: #F5F5F5;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.cup-therapist-profile-service-area-checkboxes input[type="checkbox"]:checked + label::before {
    background-color: #7D40A0;
    border-color: #7D40A0;
}

.cup-therapist-profile-service-area-checkboxes label::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg) scale(0);
    width: 6px;
    height: 12px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transition: transform 0.3s ease;
}

.cup-therapist-profile-service-area-checkboxes input[type="checkbox"]:checked + label::after {
    transform: translateY(-50%) rotate(45deg) scale(1);
}

.cup-therapist-profile-service-area-checkboxes input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.cup-therapist-profile-tags {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cup-therapist-profile-tags-content {
    margin-top: 20px;
}

.cup-therapist-profile-tags-content-title {
    font-size: 1rem;
    color: #535353;
    text-align: center;
}

.cup-therapist-profile-tags .tag {
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.875rem;
    min-width: 60px;
    transition: all 0.2s ease;
    border: 1px solid #AAAAAC;
    background-color: #ffffff;
    color: #AAAAAC;
}

.cup-therapist-profile-tags .tag.selected {
    background-color: #7D40A0;
    color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

#cup-therapist-profile-sentence {
    width: 100%;
    padding: 12px;
    border-radius: 25px;
    font-size: 1rem;
    color: #535353;
    background-color: #F5F5F5;
    resize: vertical;
    border: none;
    margin-top: 5px;
    box-sizing: border-box;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-y: hidden;
}

.cup-therapist-question {
    border: none;
    border-radius: 25px;
    background-color: #F5F5F5;
    color: #535353;
    width: 100%;
    padding: 12px;
    margin-top: 5px;
    box-sizing: border-box;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-y: hidden;
}

.cup-therapist-profile-character-counter,
.cup-therapist-profile-name-character-counter {
    font-size: 0.875rem;
    color: #AAAAAC;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    bottom: 5px;
    right: 10px;
}

.cup-note-message {
    font-size: 0.875rem;
    color: #E9518E; 
}

.cup-note-message-for-mbti {
    font-size: 0.875rem;
    color: #AAAAAC; 
}

.cup-note-message-for-mbti-link {
    font-size: 0.875rem;
    color: #AAAAAC; 
    text-decoration: underline;
}

#cup-therapist-profile-instagram-url,
#cup-therapist-profile-x-url,
#cup-therapist-profile-youtube-url,
#cup-therapist-profile-tiktok-url,
#cup-therapist-profile-line-url,
#cup-therapist-profile-twitcas-url {
    border: none;
    background-color: #F5F5F5;
    color: #535353;
    width: 100%;
    border-radius: 1.5625rem;
    margin-top: 0.3125rem;
    padding: 0.75rem; 
}


.cup-therapist-profile-toggle-section {
    display: flex;
    flex-direction: column;
    margin-top: 40px;
}

.cup-therapist-profile-role-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cup-therapist-profile-switch {
    position: relative;
    display: inline-block;
    width: 85px;
    height: 34px;
}

.cup-therapist-profile-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cup-therapist-profile-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #AAAAAC;
    transition: 0.4s;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
}

.cup-toggle-message img {
    width: 32px;
    height: 32px;
    display: block;
    margin: 0 auto;
}

.cup-toggle-message {
    font-size: 0.875rem;
    color: #E9518E; 
    display: none;
    text-align: center;
    margin-top: 10px;
}

.cup-therapist-profile-slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    border-radius: 50px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.4s;
}

.cup-therapist-profile-text-on,
.cup-therapist-profile-text-off {
    position: absolute;
    font-size: 0.875rem;
    color: white;
    transition: 0.4s;
}

.cup-therapist-profile-text-off {
    left: 33px;
    opacity: 1;
}

.cup-therapist-profile-text-on {
    right: 35px;
    opacity: 0;
}

.cup-therapist-profile-switch input:checked + .cup-therapist-profile-slider {
    background-color: #7D40A0;
}

.cup-therapist-profile-switch input:checked + .cup-therapist-profile-slider:before {
    transform: translateX(50px); 
}

.cup-therapist-profile-switch input:checked + .cup-therapist-profile-slider .cup-therapist-profile-text-on {
    opacity: 1;
}

.cup-therapist-profile-switch input:checked + .cup-therapist-profile-slider .cup-therapist-profile-text-off {
    opacity: 0;
}

.cup-store-profile-image-section {
    width: 100%;
    margin-top: 40px;
    position: relative;
}

.cup-store-profile-image-section label {
    font-size: 1rem;
    color: #535353;
}

.cup-store-profile-section {
    width: 100%;
    margin-top: 40px;
    margin-bottom: 100px;
}


#cup-store-profile-upload-progress {
    width: 100%;
    background-color: #e0e0e0;
    border-radius: 10px;
    height: 12px;
    position: absolute;
    bottom: -20px;
}

#cup-store-profile-progress-bar {
    height: 100%;
    background: linear-gradient(to right, #7D40A0, #9E6CBB);
    width: 0%;
    border-radius: 8px;
    transition: width 0.4s ease-out;
}

.cup-store-profile-pic-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    justify-items: center;
    align-items: center;
    width: 100%;
    margin-top: 5px;
}

.cup-store-profile-pic-item {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 105px;
    max-width: 200px;
    width: 100%;
    aspect-ratio: 3 / 4;
    border: 1px dashed #535353;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    background-color: #F5F5F5;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cup-store-profile-pic-item img {
    pointer-events: none;
    width: 30px;
    height: 30px;
}

.cup-store-profile-first-pic-item {
    border-color: #E9528E;
}

.cup-store-profile-sub-section {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.cup-store-profile-sub-section label {
    font-size: 1rem;
    color: #535353;
    display: flex;
    flex-direction: row;
    align-items: center;
}

#cup-store-profile-name {
    border: none;
    border-radius: 25px;
    background-color: #F5F5F5;
    color: #535353;
    width: 100%;
    padding: 12px;
    margin-top: 5px;
}

#cup-store-profile-sentence {
    width: 100%;
    padding: 12px;
    border-radius: 25px;
    font-size: 1rem;
    color: #535353;
    background-color: #F5F5F5;
    resize: vertical;
    border: none;
    margin-top: 5px;
    box-sizing: border-box;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-y: hidden;
}

#cup-store-business-hours,
#cup-store-phone-reception-hours,
#cup-store-phone-number,
#cup-store-official-website-url,
#cup-store-closed-days {
    border: none;
    border-radius: 25px;
    background-color: #F5F5F5;
    color: #535353;
    width: 100%;
    padding: 12px;
    margin-top: 5px;
}

.cup-store-profile-character-counter,
.cup-store-profile-name-character-counter {
    font-size: 0.875rem;
    color: #AAAAAC;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    bottom: 5px;
    right: 10px;
}

.cup-store-profile-area-select-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.cup-store-profile-area-select-section select {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 25px;
    font-size: 1rem;
    color: #535353;
    background-color: #F5F5F5;
    resize: none;
    text-align: center;
    margin-top: 5px;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* ユーザー個別ページ(権限なし) */

.cup-display-user-page-without-permission {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
    background: #fff;
    font-weight: 500;
}

.cup-display-user-page-without-permission,
.cup-display-user-page-without-permission * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.cup-display-user-page-without-permission-content {
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cup-without-permission-message {
    margin-top: 40px;
    color: #535353;
    font-size: 1rem;
    text-align: center;
}

.cup-without-permission-login-btn {
    width: 298px;
    height: 48px;
    border: solid 1px #7D40A0;
    color: #7D40A0;
    border-radius: 100px;
    position: relative;
    text-decoration: none;
    font-size: 1rem;
    display: inline-block;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
}

.cup-without-permission-login-btn::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 20px;
    width: 7px;
    height: 7px;
    border-bottom: 1px solid #7D40A0;
    border-left: 1px solid #7D40A0;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}

.cup-swal-install-link {
    color: #7D40A0;
    text-decoration: underline;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* ポイント管理 */

.user-point-management-page {
    background: #fff;
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    box-sizing: border-box;
    font-family: 'Noto Sans JP', sans-serif;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 500;
}

.user-point-management-page-content {
    height: 100%;
    overflow-y: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.cupm-current-point-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
}

.cupm-current-point-container-label {
    font-size: 1.125rem;
    color: #535353;
    text-align: center;
}

.cupm-current-point-container-amount {
    font-size: 45px;
    color: #E9528E;
}

.cupm-code-input-button {
    padding: 10px;
    font-size: 0.875rem;
    background: #fff;
    color: #7D40A0;
    border-radius: 24px;
    width: 190px;
    position: relative;
    text-align: center;
    border: solid 1px #7D40A0;
    position: relative;
    margin: 10px auto 0 auto;
}

.cupm-code-input-button::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 10px;
    width: 7px;
    height: 7px;
    border-bottom: 1px solid #7D40A0;
    border-left: 1px solid #7D40A0;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}

.cupm-point-log-content {
    margin-top: 40px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cupm-point-log-item {
    max-width: 600px;
    width: 100%;
    background: #fff;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: solid 1px #AAAAAC;
}

.cupm-point-log-item-date {
    font-size: 0.875rem;
    color: #535353;
}

.cupm-point-log-item-action {
    font-size: 1rem;
    color: #535353;
}

.cupm-point-log-item-points {
    font-size: 1rem;
    text-align: right;
}

.cupm-point-log-positive {
    color: #E9528E;
}

.cupm-point-log-negative {
    color: #AAAAAC;
}

.cupm-no-point-log {
    text-align: center;
    font-size: 1rem;
    color: #AAAAAC;
}

.user-point-management-page-error {
    margin-top: 40px;
    color: #AAAAAC;
    font-size: 0.875rem;
    text-align: center;
}

.cupm-about-btn {
    color: #AAAAAC;
    display: flex;
    flex-direction: row;
    font-size: 0.875rem;
    align-items: center;
    gap: 3px;
    margin-bottom: 1.25rem;
    margin-top: 0.25rem;
    justify-content: center;
}

.cupm-about-btn .question-icon {
    width: 20px;
    height: auto;
}


/* ------------------------------------------------------------------------------------------------------- */
/* 会員登録画面 */

.cur-registration-page-container {
    max-width: 600px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 8px;
    min-height: calc(100dvh - 25px);
    overflow-y: auto;
    font-family: 'Noto Sans JP', sans-serif;
}

.cur-line-registration-page-container {
    margin: 0 auto;
    background-color: transparent;
    padding: 0;
    padding-bottom: 1.25rem;
    border-radius: 8px;
    overflow-y: auto;
    font-family: 'Noto Sans JP', sans-serif;
    max-width: 37.5rem;
    min-height: calc(100dvh - 1.5625rem);
}

#cur-registration-page-form {
    display: flex;
    flex-direction: column;
}

.cur-registration-page-form-group {
    margin-bottom: 20px;
}

.cur-registration-page-form-group label {
    font-size: 1rem;
    color: #535353;
    display: block;
    margin-bottom: 8px;
}

.cur-registration-page-form-group input,
.cur-registration-page-form-group select {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    color: #535353;
}

.cur-registration-page-form-group input[type="password"] {
    font-family: 'Courier New', Courier, monospace;
}


.cur-registration-page-form-group select {
    font-size: 0.875rem;
    color: #535353;
    padding: 10px;
    border-radius: 4px;
}

.cur-registration-page-form-group-checkbox-section {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    margin-top: 15px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}


.cur-registration-page-form-group-checkbox-section label {
    position: relative;
    padding-left: 30px;
    font-size: 1rem;
    font-weight: 500;
    color: #535353;
    cursor: pointer;
    user-select: none;
    transition: color 0.3s ease;
}


.cur-registration-page-form-group-checkbox-section input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.cur-registration-page-form-group-checkbox-section label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 2px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}


.cur-registration-page-form-group-checkbox-section input[type="checkbox"]:checked + label::before {
    background-color: rgb(233, 81, 142);
    border-color: rgb(233, 81, 142);
}


.cur-registration-page-form-group-checkbox-section label::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg) scale(0);
    width: 6px;
    height: 12px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transition: transform 0.3s ease;
}

.cur-registration-page-form-group-checkbox-section input[type="checkbox"]:checked + label::after {
    transform: translateY(-50%) rotate(45deg) scale(1);
}

.cur-registration-page-form-group-privacy-policy-checkbox-section {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 15px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}


.cur-registration-page-form-group-privacy-policy-checkbox-section label {
    position: relative;
    padding-left: 30px;
    font-size: 1rem;
    font-weight: 500;
    color: #535353;
    cursor: pointer;
    user-select: none;
    transition: color 0.3s ease;
}

.cur-registration-page-form-group-privacy-policy-checkbox-section label a {
    color: #007BFF;
    text-decoration: underline;
}


.cur-registration-page-form-group-privacy-policy-checkbox-section input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.cur-registration-page-form-group-privacy-policy-checkbox-section label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 2px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}


.cur-registration-page-form-group-privacy-policy-checkbox-section input[type="checkbox"]:checked + label::before {
    background-color: rgb(233, 81, 142);
    border-color: rgb(233, 81, 142);
}


.cur-registration-page-form-group-privacy-policy-checkbox-section label::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg) scale(0);
    width: 6px;
    height: 12px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transition: transform 0.3s ease;
}

.cur-registration-page-form-group-privacy-policy-checkbox-section input[type="checkbox"]:checked + label::after {
    transform: translateY(-50%) rotate(45deg) scale(1);
}


/* 登録ボタン */
.cur-registration-page-btn {
    width: 200px;
    padding: 12px;
    background-color: rgb(233, 81, 142);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
    margin: 10px auto 0 auto;
}

.cur-registration-page-warning {
    font-size: 0.875rem;
    color: #535353;
}

.cur-registration-page-required-badge {
    background-color: #fe4b4b;
    color: #ffffff;
    font-size: 0.8em;
    padding: 2px 6px;
    margin-left: 8px;
    border-radius: 10px;
}

.cur-error-message {
    font-size: 0.875rem;
    color: #ff0000;
}

.cur-line-add-button {
    width: 180px;
    height: auto;
    aspect-ratio: 29 / 9;
    display: block;
    margin: 0 auto;
}

.cur-line-info-box {
    background-color: rgba(6, 199, 85, 0.2);
    padding: 5px;
    border-radius: 8px;
    margin-bottom: 10px;
    font-size: 0.875rem;
    line-height: 1.6;
    color: #535353;
}

/* ------------------------------------------------------------------------------------------------------- */
/* SMS認証ページ */
.cur-authentication-page-container {
    max-width: 600px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - 25px);
    overflow-y: auto;
    font-family: 'Noto Sans JP', sans-serif;
}

#cur-authentication-page-form{
    display: flex;
    flex-direction: column;
}

.cur-authentication-page-form-group label {
    font-size: 1rem;
    color: #535353;
    display: block;
    margin-bottom: 8px;
}

.cur-authentication-page-form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.875rem;
    color: #535353;
}

.cur-authentication-page-btn {
    width: 200px;
    padding: 12px;
    background-color: rgb(233, 81, 142);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
    margin: 10px auto 0 auto;
}

.cur-authentication-page-reset-btn {
    margin-top: 12px;
    color: #535353;
    cursor: pointer;
    font-size: 1rem;
}

.cur-authentication-page-message {
    margin-bottom: 10px;
    color: #535353;
    font-size: 1rem;
}

.cur-authentication-page-warning {
    font-size: 0.875rem;
    color: #ff0000;
    display: none;
}

/* ------------------------------------------------------------------------------------------------------- */
/* 成功ページ */

.cur-success-page-container {
    max-width: 600px;
    margin: 0 auto;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - 25px);
    overflow-y: auto;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
}

.cur-success-page-container-message {
    font-size: 1rem;
    color: #535353;
    text-align: left;
    margin-bottom: 20px;
    margin-top: 40px !important;
}

.cur-success-page-button {
    width: 200px;
    padding: 12px;
    color: #535353 !important;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
    margin: 10px auto 0 auto;
    text-align: center;
    position: relative;
}

.cur-success-page-button::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    left: 10px;
    width: 10px;
    height: 10px;
    border-bottom: 1px solid #535353;
    border-left: 1px solid #535353;
    -webkit-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
}

.cur-success-page-mycred-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.cur-success-page-mycred-info-box {
    padding: 10px;
    text-align: center;
    width: 303px;
    color: #535353;
    border-bottom: solid 1px #535353;
    border-top: solid 1px #535353;
}

.cur-success-page-mycred-label {
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.cur-success-page-mycred-amount {
    font-size: 32px;
    font-weight: 500;
    margin: 0;
}

.cur-success-page-cancel-membership-button {
    margin: 0 0 0 auto;
    color: #666;
    background-color: transparent;
    font-size: 0.75rem;
}

.cur-line-link-box {
    border: 1px solid #06C755;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    margin: 20px 0;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cur-line-link-title {
    font-size: 20px;
    color: #06C755;
    font-weight: 500;
}

.cur-line-link-text {
    font-size: 0.875rem;
    margin: 10px 0 20px;
    font-weight: 500;
    color: #535353;
}

.cur-line-link-button-area {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cur-line-link-coupon {
    width: 180px;
    height: auto;
    margin-bottom: -15px;
    z-index: 5;
}

.cur-line-link-button {
    display: flex;
    position: relative;
    background-color: #06C755;
    color: white;
    padding: 12px 20px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    width: 298px;
    z-index: 1;
    flex-direction: row;
    align-items: center;
    gap: 3px;
    justify-content: center;
}

.cur-line-link-icon {
    width: 25px;
    height: auto;
}

.cur-line-link-button::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 26px;
    width: 10px;
    height: 10px;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}

.cur-success-page-confirm-btn {
    padding: 10px;
    font-size: 0.875rem;
    background: #fff;
    color: #7D40A0;
    border-radius: 24px;
    width: 180px;
    position: relative;
    text-align: center;
    border: solid 1px #7D40A0;
    position: relative;
    margin: 0 auto; 
}

.cur-success-page-confirm-btn::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 10px;
    width: 10px;
    height: 10px;
    border-bottom: 1px solid #7D40A0;
    border-left: 1px solid #7D40A0;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}



/* ------------------------------------------------------------------------------------------------------- */
/* 全ページ共有 */
.cur-step-bar {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    counter-reset: step;
    position: relative;
}

.cur-step-bar::before {
    content: '';
    position: absolute;
    top: 20px; /* ステップの中心に線を配置 */
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #ddd;
    z-index: 0;
}

/* ステップアイテム */
.cur-step-bar li {
    position: relative;
    text-align: center;
    flex: 1;
    z-index: 1;
}

.cur-step-bar li::before {
    counter-increment: step;
    content: counter(step);
    width: 40px;
    height: 40px;
    line-height: 40px;
    border: 3px solid #ddd;
    display: block;
    text-align: center;
    margin: 0 auto 10px auto;
    border-radius: 50%;
    background-color: #fff;
    font-weight: bold;
    font-size: 1rem;
    color: #555;
    transition: all 0.3s ease;
    opacity: 0;
    transform: scale(0.8);
    animation: crl-step-in 0.5s forwards;
}

/* ステップラベル */
.cur-step-bar li span {
    font-size: 0.85rem;
    display: block;
    color: #555;
    transition: color 0.3s ease;
    opacity: 0;
    transform: translateY(10px);
    animation: crl-label-in 0.5s forwards 0.3s;
}

/* アクティブ状態 */
.cur-step-bar li.active::before {
    border-color: #4caf50; /* 緑色 */
    background-color: #fff;
    color: #4caf50;
    transform: scale(1);
    opacity: 1;
}

.cur-step-bar li.active span {
    color: #4caf50; /* 緑色 */
    transform: translateY(0);
    opacity: 1;
}

/* 完了状態 */
.cur-step-bar li.completed::before {
    background-color: #D7AEEF;
    border-color: #D7AEEF;
    color: #fff;
    transform: scale(1);
    opacity: 1;
    content: counter(step);
    font-size: 1rem;
}

.cur-step-bar li.completed span {
    color: #D7AEEF;
    transform: translateY(0);
    opacity: 1;
}

/* アニメーション */
@keyframes crl-step-in {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes crl-label-in {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ------------------------------------------------------------------------------------------------------- */
/* 登録手段 */

.user-registration-method-page {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
}

.cur-logo-icon {
    width: 200px;
    height: auto;
    margin: 0 auto 40px;
}

.cur-phone-link-button {
    background-color: #E9528E;
}

.user-registration-method-line {
  display: flex;
  align-items: center;
  text-align: center;
  color: #535353;
  font-size: 1rem;
  margin: 20px 0;
}

.user-registration-method-line::before,
.user-registration-method-line::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #AAAAAC;
  margin: 0 10px;
}

.user-registration-login-guide {
    display: block;
    text-align: center;
    font-size: 1rem;
    color: #535353;
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
    margin-top: 20px;
}

.user-registration-store-and-therapist-guide {
    margin-top: 20px;
    font-size: 0.875rem;;
    color: #AAAAAC;
    text-align: center;
}

.user-registration-store-and-therapist-guide a {
    color: #E9518E;
    text-decoration: underline;
}

.cur-registration-page-line-btn {
    display: flex;
    position: relative;
    background-color: #06C755;
    color: white;
    padding: 0.75rem 1.25rem;
    border-radius: 1.875rem;
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    width: 18.625rem;
    z-index: 1;
    flex-direction: row;
    align-items: center;
    gap: 0.1875rem;
    justify-content: center;
}

/* ------------------------------------------------------------------------------------------------------- */
/* スワイプ */

.custom-swipe-page {
  width: 100%;
  max-width: none !important;
  margin: 0 auto;
  box-sizing: border-box;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Noto Sans JP', sans-serif;
  background: #fff;
  font-weight: 500;
  min-height: calc(var(--vh) * 100 - 4.625rem - 4.375rem) !important;
  padding-inline: 1.25rem;
}

.custom-swipe-page,
.custom-swipe-page * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.custom-swipe-content {
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
  max-width: 37.5rem;
  width: 100%;
}

.custom-swipe-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-size: 0.75rem;
  color: #7D40A0;
  pointer-events: none;
  white-space: nowrap;
  z-index: 2;
}

.custom-swipe-plugin-progress-bar {
  width: 100%;
  height: 0.75rem !important;
  background-color: #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.custom-swipe-plugin-progress {
  height: 100%;
  background: linear-gradient(to right, #7D40A0, #9E6CBB);
  transition: width 0.3s ease;
  border-radius: 8px;
}

.custom-swipe-plugin-card-container {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
}

.custom-swipe-plugin-swipe {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.custom-swipe-plugin-card {
  position: absolute;
  background-color: #fff;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  object-fit: cover;
  transform: perspective(1000px) rotateX(5deg) rotateY(-5deg);
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2),
              0 5px 10px rgba(0, 0, 0, 0.15);
}

.custom-swipe-plugin-card:nth-child(n) {
  z-index: auto;
  transform: translate(0, 0);
}

.custom-swipe-plugin-info-box {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(109, 99, 115, 0.7);
  color: #fff;
  padding: 8px 12px;
  box-sizing: border-box;
  text-align: left;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.custom-swipe-plugin-info-text-box {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.custom-swipe-plugin-therapist-info {
  font-size: 1rem;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
}

.custom-swipe-plugin-store-name {
  font-size: 0.875rem;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
}

.custom-swipe-plugin-buttons {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 20px;
  z-index: 2;
}

.custom-swipe-plugin-like-icon,
.custom-swipe-plugin-dislike-icon {
  position: absolute;
  opacity: 1;
  z-index: 3;
  width: 100px;
  height: 100px;
}

.custom-swipe-plugin-like-icon {
  top: 10%;
  left: 20%;  /* 左側に配置 */
  transform: translate(-50%, -50%) rotate(-15deg);
}

.custom-swipe-plugin-dislike-icon {
  top: 10%;
  left: 80%;  /* 右側に配置 */
  transform: translate(-50%, -50%) rotate(15deg);
}

.custom-swipe-plugin-reload-button {
  position: absolute;
  background-color: rgb(233, 81, 142);
  border: none;
  color: white;
  font-size: 0.75rem;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  width: auto;
  z-index: 2;
}

.custom-swipe-plugin-reload-button.show {
  opacity: 1;
}

.custom-swipe-plugin-inactive {
  display: none;
}

.custom-swipe-plugin-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
}

.custom-swipe-plugin-modal-content {
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
  width: 90%;
  max-width: 300px;
  text-align: center;
}

.custom-swipe-plugin-modal-content h3 {
  margin-bottom: 20px;
  font-size: 1.125rem;
}

.custom-swipe-plugin-modal-buttons {
  display: flex;
  justify-content: space-around;
  margin-bottom: 10px;
}

.custom-swipe-plugin-register-button {
  background-color: rgb(233, 81, 142);
  color: white;
  padding: 10px 10px;
  font-size: 0.875rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.custom-swipe-plugin-login-button {
  background-color: rgb(233, 81, 142);
  color: white;
  padding: 10px 10px;
  font-size: 0.875rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.custom-swipe-plugin-back-button {
  background-color: #ccc;
  color: #333;
  padding: 10px 20px;
  font-size: 1rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.custom-swipe-plugin-profile-button {
  position: relative;
  font-size: 0.875rem;
  border-radius: 82px;
  cursor: pointer;
  width: 120px;
  border: none;
  color: #7D40A0;
  z-index: 20;
  background: #fff;
  border: solid 1px #7D40A0;
  padding: 5px;
}

.custom-swipe-plugin-profile-button::before {
  position: absolute;
  display: block;
  content: "";
  top: 50%;
  right: 6px;
  width: 6px;
  height: 6px;
  border-bottom: 1px solid #7D40A0;
  border-left: 1px solid #7D40A0;
  -webkit-transform: translatey(-50%) rotate(-135deg);
  transform: translatey(-50%) rotate(-135deg);
}

.custom-swipe-plugin-for-lp-swipe-deck {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.custom-swipe-plugin-for-lp-card-container {
  position: relative;
  width: 300px;
  height: 400px;
  margin-bottom: 20px;
}

.custom-swipe-plugin-for-lp-play-wrapper {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(-50%);
}

.custom-swipe-plugin-for-lp-play-left {
  left: 0%;
}

.custom-swipe-plugin-for-lp-play-right {
  right: 0%;
}

.custom-swipe-plugin-for-lp-play-circle {
  width: 40px;
  height: 40px;
  background-color: #D7AEEF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rotate-icon {
  transform: rotate(180deg);
}

.custom-swipe-plugin-for-lp-play-icon {
  width: 24px;
  height: 24px;
  filter: brightness(0) saturate(100%) invert(100%);
}

.custom-swipe-plugin-for-lp-play-label {
  margin-top: 0px;
  font-size: 1rem;
  font-weight: bold;
  color: #D7AEEF;
  text-align: center;
}

.custom-swipe-plugin-for-lp-progress-bar {
  position: absolute;
  top: 20px;
  left: 0;
  width: 100%;
  height: 8px;
  background-color: #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  z-index: 2;
  border: 1px solid rgb(233, 81, 142);
}

.custom-swipe-plugin-for-lp-progress {
  height: 100%;
  background: linear-gradient(to right, rgb(233, 81, 142), rgb(255, 140, 190));
  transition: width 0.3s ease;
  border-radius: 8px;
}

.custom-swipe-plugin-for-lp-swipe {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.custom-swipe-plugin-for-lp-card {
  position: absolute;
  background-color: #fff;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  object-fit: cover;
  transform: translate(0, 0);
}

.custom-swipe-plugin-for-lp-card:nth-child(n) {
  z-index: auto;
  transform: translate(0, 0);
}

.custom-swipe-plugin-for-lp-info-box {
  position: absolute;
  bottom: 15px;
  left: 15px;
  padding: 10px;
  border-radius: 10px;
  max-width: 80%;
  background: rgba(0, 0, 0, 0.3);
}

.custom-swipe-plugin-for-lp-therapist-info {
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
  margin-bottom: 3px;
}

.custom-swipe-plugin-for-lp-store-name {
  font-size: 1rem;
  color: #fff;
  font-weight: bold;
}

.custom-swipe-plugin-for-lp-buttons {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 20px;
  z-index: 2;
}

.custom-swipe-plugin-for-lp-like-icon,
.custom-swipe-plugin-for-lp-dislike-icon {
  position: absolute;
  opacity: 1;
  z-index: 3;
  width: 100px;
  height: 100px;
  top: 10%;
  left: 80%;
  transform: translate(-50%, -50%) rotate(15deg);
}

.custom-swipe-plugin-for-lp-reload-button {
  position: absolute;
  background-color: rgb(233, 81, 142);
  border: none;
  color: white;
  font-size: 0.75rem;
  padding: 10px 10px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -80%);
  white-space: nowrap;
  width: auto;
  z-index: 2;
}

.custom-swipe-plugin-for-lp-reload-button.show {
  opacity: 1;
}

.custom-swipe-plugin-for-lp-inactive {
  display: none;
}

@keyframes popFloatQuick {
  0% {
    transform: scale(0.3) translateY(0);
    opacity: 0;
  }
  15% {
    transform: scale(1.4) translateY(-10px);
    opacity: 1;
  }
  100% {
    transform: scale(1) translateY(-100px);
    opacity: 0;
  }
}

.animated-heart-svg {
  width: 40px;
  height: 40px;
  animation: popFloatQuick 2s ease-out forwards;
  pointer-events: none;
  z-index: 100;
  position: absolute;
  filter: drop-shadow(0 0 3px rgb(233, 81, 142));
}

.swipe-text-animation {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center;
  font-size: 72px;
  font-weight: bold;
  opacity: 0;
  animation: swipeBounce 1s forwards cubic-bezier(0.68, -0.55, 0.265, 1.55);
  pointer-events: none;
  user-select: none;
  text-shadow:
    0 0 10px #D7AEEF,
    0 0 25px #B080F0,
    0 0 40px #8A5CEB;
  z-index: 1000;
}

.skip-text-skip {
  color: #4be0d4;
}

.skip-text-like {
  color: rgb(233, 81, 142);
}

@keyframes swipeBounce {
  0% {
    opacity: 0;
    transform: translate(-50%, -60%) rotate(-15deg) scale(0.8);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -40%) rotate(-15deg) scale(1.1);
  }
  70% {
    transform: translate(-50%, -50%) rotate(-15deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-15deg) scale(1);
  }
}

@keyframes swipeHint {
  0%   { transform: translateX(0) rotate(0deg); }
  25%  { transform: translateX(-25px) rotate(-10deg); }
  50%  { transform: translateX(0) rotate(0deg); }
  75%  { transform: translateX(25px) rotate(10deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

.swipe-hint-animation {
  animation: swipeHint 1.5s ease-in-out;
}


/* ------------------------------------------------------------------------------------------------------------------ */
/* チャット一覧ページ */

.chat-list-page {
    background: #fff;
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    box-sizing: border-box;
    font-family: 'Noto Sans JP', sans-serif;
    overflow-y: auto;
    font-weight: 500;
    padding-right: 20px;
    padding-left: 20px;
}

.chat-list-page, 
.chat-list-page * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.chat-list-empty {
    text-align: center;
    color: #AAAAAC;
    font-size: 1rem;
    margin-top: 40px;
}

.chat-list-empty--filtered {
    text-align: center;
    color: #AAAAAC;
    font-size: 1rem;
    margin-top: 2.5rem;
}

.chat-room-box {
    display: block;
    text-decoration: none;
    color: #535353;
    position: relative;
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 10px;
    padding-top: 10px;
}

.chat-room-box-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    position: relative;
}

.chat-room-box-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-room-box-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    user-select: none;
    pointer-events: none;
}

.chat-room-box-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.chat-room-box-name {
    font-size: 0.875rem;
}

.chat-room-box-last-message {
    font-size: 0.875rem;
    color: #535353;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
}

.chat-room-box-last-message a {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    word-break: break-word;
    pointer-events: none;
    cursor: default;
}

/* 未読メッセージのバッジ */
.chat-room-box-badge {
    background: #E9528E;
    color: white;
    font-size: 0.75rem;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 70%;
    right: 10px;
    transform: translateY(-50%);
}

.chat-room-box-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.chat-room-box-time {
    font-size: 0.75rem;
    color: #AAAAAC;
    right: 10px;
    position: absolute;
    top: 0%;
}

.chat-room-content-for-preview {
    flex: 1;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;   
}

.chat-room-messages-for-preview {
    display: flex;
    flex-direction: column;
    height: 60dvh;
    overflow-y: hidden;
    pointer-events: auto;
    padding-right: 10px;
    padding-left: 10px;
}

.chat-room-messagess-for-preview-no-scroll {
    overflow: hidden !important;
    pointer-events: none;
}

.chat-date-header-for-preview {
    font-size: 10px;
    color: #AAAAAC;
    margin-bottom: 10px;
    text-align: center;
    background-color: #F5F5F5;
    padding: 2px;
    border-radius: 10px;
    width: 100px;
    margin-left: auto;
    margin-right: auto;
}

.chat-message-for-preview {
    margin-bottom: 10px;
    max-width: 70%;
    word-wrap: break-word;
    padding: 8px 12px;
    border-radius: 16px;
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 3px;
}

.chat-message-for-preview.left {
    align-self: flex-start;
    text-align: left;
    flex-direction: row-reverse;
    padding-left: 0px;
}

.chat-message-for-preview.right {
    align-self: flex-end;
    text-align: right;
    padding-right: 0px;
}

.chat-message-deleted-for-preview {
    margin-bottom: 10px;
    width: 250px;
    background-color: #F5F5F5;
    border: 1px dashed #AAAAAC;
    padding: 10px 15px;
    border-radius: 16px;
    text-align: center;
    color: #AAAAAC;
    font-size: 0.75rem;
    word-wrap: break-word;
    align-self: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.chat-message-deleted-text-for-preview {
    margin-bottom: 5px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.chat-message-time-for-preview {
    font-size: 10px;
    color: #AAAAAC;
    text-align: right;
    margin-top: 0px;
    width: 26px;
}

.chat-message-read-for-preview {
    font-size: 10px;
    color: #AAAAAC;
}

.chat-message-text-area-for-preview{
    word-wrap: break-word;
    padding: 8px 12px;
    border-radius: 18px;
    position: relative;
    width: 100%;
    overflow-x: hidden;
}

.chat-message-text-area-for-preview.left {
    background-color: #F5F5F5;
    text-align: left;
}

.chat-message-text-area-for-preview.right {
    background-color: #F3E7FD;
    text-align: left;
}

.chat-message-text-for-preview {
    font-size: 0.875rem;
    user-select: none;
    color: #535353;
}

.chat-message-text-for-preview a {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    color: #7D40A0;
    word-break: break-word;
    pointer-events: none;
    cursor: default;
}

.chat-message-image-area-for-preview{
    word-wrap: break-word;
    padding: 8px 12px;
    position: relative;
    width: 100%;
}

.chat-message-image-for-preview {
    border-radius: 16px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-message-image-area-for-preview.left {
    text-align: left;
}

.chat-message-image-area-for-preview.right {
    text-align: left;
}

.chat-room-footer-for-preview {
    background: #fff;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;  
    border-top: 1px solid #AAAAAC;
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
}

#chat-room-down-button-for-preview {
    position: absolute;
    bottom: 65px;
    right: 10px;
    background: #ffffff;
    border: solid 1px #333;
    padding: 4px 4px;
    border-radius: 8px;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

#chat-room-down-button-for-preview img {
    width: 100%;
    height: 100%;
}

#chat-room-form-for-preview {
    font-size: 1rem;
    display: flex;
    width: 100%;
    gap: 5px;
    align-items: center;
}

#chat-room-textarea-for-preview {
    flex: 1;
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 8px;
    resize: none;
    font-size: 0.875rem;
    max-height: 200px;
    overflow-y: auto;
    color: #535353;
}

#chat-room-send-button-for-preview,
#chat-room-image-upload-for-preview {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    padding: 4px 4px;
}

#chat-room-send-button-for-preview img
#chat-room-image-upload-for-preview img {
    width: 100%;
    height: 100%;
}

.chat-room-box.not-matched {
    pointer-events: auto;
}

.chat-room-box-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(100, 100, 100, 0.7);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    border-radius: 10px;
}

.chat-room-box-overlay-message {
    color: #fff;
    font-size: 0.875rem;
    text-align: center;
    pointer-events: none;
}

.chat-list-page-display-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 6.5rem !important;
    right: 1.25rem;
    z-index: 1000;
    flex-direction: column;
}

@media screen and (min-width: 1024px) {
    .chat-list-page-display-toggle {
        right: calc(13.0208333333% + 1.25rem);
    }
}

.chat-list-page-display-toggle-text {
    color: #AAAAAC;
    font-size: 0.875rem;
}

.chat-list-page-switch {
    position: relative;
    display: inline-block;
    width: 85px;
    height: 34px;
}

.chat-list-page-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.chat-list-page-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #AAAAAC;
    transition: 0.4s;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
}

.chat-list-page-slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    border-radius: 50px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.4s;
}

.chat-list-page-text-on,
.chat-list-page-text-off {
    position: absolute;
    font-size: 0.75rem;
    color: white;
    transition: 0.4s;
}

.chat-list-page-text-off {
    left: 33px;
    opacity: 1;
}

.chat-list-page-text-on {
    right: 35px;
    opacity: 0;
}

.chat-list-page-switch input:checked + .chat-list-page-slider {
    background-color: #7D40A0;
}

.chat-list-page-switch input:checked + .chat-list-page-slider:before {
    transform: translateX(50px); 
}

.chat-list-page-switch input:checked + .chat-list-page-slider .chat-list-page-text-on {
    opacity: 1;
}

.chat-list-page-switch input:checked + .chat-list-page-slider .chat-list-page-text-off {
    opacity: 0;
}


/* ------------------------------------------------------------------------------------------------------------------ */
/* チャットルームページ */

.chat-room-page {
    background: #F7F7FA;
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    box-sizing: border-box;
    font-family: 'Noto Sans JP', sans-serif;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-weight: 500;
    touch-action: auto;
}

.chat-room-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    height: 4rem !important;
    background: rgba(255, 255, 255, 0.7);
    padding-right: 20px;
    padding-left: 20px;
}

.chat-room-header-back-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    margin-right: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.chat-room-header-back-button img {
    width: 1.5rem !important;
    height: 1.5rem !important;
}

.chat-room-header-avatar {
    width: 3rem !important;
    height: 3rem !important;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.chat-room-header-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.chat-room-header-name {
    font-size: 1rem !important;
    color: #535353;
}

.chat-room-content {
    background-color: #ffffff;
    flex: 1;
    z-index: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    margin-top: 50px;
    padding-top: 10px;
    padding-bottom: 0px;
    padding-left: 10px;
    padding-right: 10px;
}

.chat-room-messages {
    display: flex;
    flex-direction: column;
}

.chat-date-header {
    font-size: 10px;
    color: #AAAAAC;
    margin-bottom: 10px;
    text-align: center;
    background-color: #F5F5F5;
    padding: 2px;
    border-radius: 10px;
    width: 100px;
    margin-left: auto;
    margin-right: auto;
}

.chat-message {
    margin-bottom: 10px;
    max-width: 70%;
    word-wrap: break-word;
    padding: 8px 12px;
    border-radius: 16px;
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 3px;
}

.chat-message.left {
    align-self: flex-start;
    text-align: left;
    flex-direction: row-reverse;
    padding-left: 0px;
}

.chat-message.right {
    align-self: flex-end;
    text-align: right;
    padding-right: 0px;
}


.chat-message-deleted {
    margin-bottom: 10px;
    width: 250px;
    background-color: #F5F5F5;
    border: 1px dashed #AAAAAC;
    padding: 10px 15px;
    border-radius: 16px;
    text-align: center;
    color: #AAAAAC;
    font-size: 0.75rem;
    word-wrap: break-word;
    align-self: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.chat-message-deleted-text {
    margin-bottom: 5px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}


.chat-message-time {
    font-size: 10px;
    color: #AAAAAC;
    text-align: right;
    margin-top: 0px;
    width: 26px;
}

.chat-message-read {
    font-size: 10px;
    color: #AAAAAC;
}

.chat-message-text-area{
    word-wrap: break-word;
    padding: 8px 12px;
    border-radius: 16px;
    position: relative;
    width: 100%;
    overflow-x: hidden;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.chat-message-text-area.left {
    background-color: #ffffff;
    text-align: left;
}

.chat-message-text-area.right {
    background-color: #F3E7FD;
    text-align: left;
}

.chat-message-text {
    font-size: 0.875rem;
    user-select: none;
    color: #535353;
}

.chat-message-text a {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    color: #7D40A0;
    word-break: break-word;
}

.chat-message-image-area{
    word-wrap: break-word;
    padding: 8px 12px;
    position: relative;
    width: 100%;
}

.chat-message-image {
    border-radius: 16px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.chat-message-image-area.left {
    text-align: left;
}

.chat-message-image-area.right {
    text-align: left;
}

.chat-room-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    width: 100%;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;  
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 -10px 26px rgba(15, 23, 42, 0.08);
}

#chat-room-down-button-spare {
    position: absolute;
    bottom: 6.5rem;
    right: 0.625rem;
    background: #9E6CBB;
    padding: 0.25rem 0.25rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.125rem;
    height: 3.125rem;
    z-index: 100;
    box-shadow: 0 12px 26px rgba(125, 64, 160, 0.30);
    transition: transform 0.12s ease;
}

#chat-room-down-button-spare img {
    width: 100%;
    height: 100%;
}

#chat-room-down-button-spare.has-new::after {
    content: '新着あり';
    position: absolute;
    top: -25px;
    right: 50%;
    transform: translateX(50%);
    background: #9E6CBB;
    color: white;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 10px;
    white-space: nowrap;
    box-shadow: 0 10px 22px rgba(125, 64, 160, 0.25);
}

#chat-room-form {
    font-size: 1rem;
    display: flex;
    width: 100%;
    gap: 5px;
    align-items: center;
}

#chat-room-textarea {
    flex: 1;
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 8px;
    resize: none;
    font-size: 0.875rem;
    max-height: 200px;
    overflow-y: auto;
    color: #535353;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
}

#chat-room-send-button,
#chat-room-image-upload {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto !important;
    padding: 0.25rem 0.25rem;
    width: 2.1875rem;
}

#chat-room-send-button img,
#chat-room-image-upload img {
    width: 100%;
    height: 100%;
}

.chat-room-reserve-button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    color: #fff;
    border-radius: 999px;
    background: #E9528E;
    white-space: nowrap;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    width: 60px;
}

#chat-room-upload-progress {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #e0e0e0;
    border-radius: 10px;
}

#chat-room-progress-bar {
    height: 100%;
    background: linear-gradient(to right, #7D40A0, #9E6CBB);
    width: 0%;
    border-radius: 8px;
    transition: width 0.4s ease-out;
}


div:where(.swal2-container) img:where(.swal2-image) {
    margin: 0px !important;
    object-fit: cover;
}

.swal2-popup.swal2-modal.swal2-show {
    padding: 0px;
}

#chat-room-textarea { min-width: 0; }

#chat-room-collapse-button {
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  position: relative;
}

#chat-room-collapse-button::before {
  position: absolute;
  display: block;
  content: "";
  top: 50%;
  right: 50%;
  width: 0.6rem;
  height: 0.6rem;
  border-bottom: 1px solid #535353;
  border-left: 1px solid #535353;
  -webkit-transform: translate(50%, -50%) rotate(-135deg);
  transform: translate(50%, -50%) rotate(-135deg);
}

#chat-room-form.is-textarea-focus .chat-room-reserve-button,
#chat-room-form.is-textarea-focus #chat-room-image-upload {
  display: none !important;
}

#chat-room-form.is-textarea-focus #chat-room-collapse-button {
  display: inline-flex !important;
}

.chat-ogp-card {
    margin-top: 10px;
    max-width: 360px;
}

.chat-ogp-card a {
    display: flex;
    flex-direction: column;
    gap: 0px;
    text-decoration: none;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
}

.chat-ogp-thumb img {
    width: 100%;
    aspect-ratio: 1200 / 630;
    height: auto;
    object-fit: cover;
    display: block;
}

.chat-ogp-body {
    padding: 10px;
    min-width: 0;
    text-align: left;
}

.chat-ogp-title {
    font-weight: bold;
    font-size: 0.875rem;
    margin-bottom: 5px;
    color: #535353;
    word-break: break-word;
}

.chat-ogp-desc {
    font-size: 0.75rem;
    opacity: 0.85;
    line-height: 1.4;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #535353;
    word-break: break-word;
}

.chat-ogp-host {
    font-size: 0.75rem;
    opacity: 0.7;
    color: #535353;
    word-break: break-word;
}

#chat-message-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.35);
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;    
}

#chat-message-menu {
    position: fixed;
    z-index: 9999;
    display: flex;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
}

#chat-message-menu .chat-message-menu-btn {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.10);
    padding: 6px 12px;
    font-size: 0.75rem;
    color: #535353;
    cursor: pointer;
    border-radius: 999px;
    line-height: 1;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
}

#chat-message-menu .chat-message-menu-btn:hover {
    background: rgba(15, 23, 42, 0.04);
}

#chat-message-menu .chat-message-menu-btn:active {
    transform: translateY(1px);
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.05);
}

#chat-message-menu .chat-message-menu-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

/* ------------------------------------------------------------------------------------------------------- */
/* チャット監視 */

.cscm-page {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
    font-family: 'Noto Sans JP', sans-serif;
    display: flex;
    flex-direction: column;
    font-weight: 500;
}

.cscm-page-title {
    font-size: 1.5rem;
    font-weight: 500;
    color: #E9528E;
    text-align: center;
    margin-top: 40px;
}

.cscm-search-bar {
    border-bottom: 1px solid #AAAAAC;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

#cscm-search-input {
    font-size: 0.875rem;
    padding: 13px;
    border: none;
    border-radius: 25px;
    background-color: #F5F5F5;
    width: 100%;
    color: #535353;
    margin-top: 40px;
}

.cscm-date-wrapper {
    position: relative;
}

.cscm-page .form-control.input {
    font-size: 0.875rem;
    padding: 13px;
    border: none;
    border-radius: 25px;
    background-color: #F5F5F5;
    width: 100%;
    color: #535353;
    margin-top: 20px;
}

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

.cscm-clear-date {
    position: absolute;
    right: 20px;
    color: #AAAAAC;
    top: 32px;
}

#cscm-page-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: #fff;
    height: 100%;
}

.cscm-message {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #AAAAAC;
    position: relative;
}

.cscm-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cscm-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.cscm-name {
    font-size: 1rem;
    color:#535353;
}

.cscm-time {
    font-size: 0.75rem;
    color: #AAAAAC;
    margin-top: 2px;
}

.cscm-body {
    margin-top: 10px;
    font-size: 0.875rem;
    line-height: 1.5;
    box-sizing: border-box;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: #535353;
    width: calc(100% - 60px);
    margin-left: auto;
    margin-right: 0;
}

.cscm-body img.cscm-image {
    max-width: 300px;
    height: auto;
    border-radius: 6px;
    margin-top: 5px;
}

.cscm-badge-deleted {
    background-color: #7D40A0;
    color: #fff;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
    width: 70px;
    text-align: center;
    position: absolute;
    top: 0px;
    right: 0px;
}

.cscm-empty {
    text-align: center;
    font-size: 1rem;
    color: #AAAAAC;
    margin: 20px 0;    
}

/* ------------------------------------------------------------------------------------------------------- */
/* 店舗ランキング */

.custom-store-ranking-page {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
    background: #fff;
    font-weight: 500;
}

.custom-store-ranking-page,
.custom-store-ranking-page * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.custom-store-ranking-content {
    height: 100%;
    overflow-y: auto;
}

.custom-store-ranking-content-title {
    font-size: 1.5rem;
    font-weight: 500;
    color: #E9528E;
    text-align: center;
    margin-top: 40px;
}

.custom-store-ranking-tabs {
    display: flex;
    flex-direction: row;
    gap: 5px;
    overflow-x: auto;
    scroll-behavior: smooth;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    margin: 40px auto 0px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.custom-store-ranking-tabs::-webkit-scrollbar {
    display: none;
}

.custom-store-ranking-tab-button {
    padding: 3px 10px;
    border: 1px solid #AAAAAC;
    background-color: #ffffff;
    color: #AAAAAC;
    font-size: 0.75rem;
    border-radius: 20px;
    cursor: pointer;
    width: 60px;
    transition: all 0.2s ease-in-out;
}

.custom-store-ranking-tab-button.active {
    background-color: #7D40A0;
    color: #ffffff;
}

.custom-store-ranking-period {
    font-size: 0.875rem;
    text-align: center;
    color: #535353;
    margin-top: 20px;
}

.custom-store-ranking-grid {
    display: flex;
    flex-direction: column;
}

.custom-store-ranking-tab-content {
    max-width: 600px;
    margin: 40px auto 0 auto;
}


.custom-store-ranking-card-horizontal {
    display: flex;
    position: relative;
    text-decoration: none;
    color: inherit;
    align-items: flex-start;
    width: 100%;
    border-bottom: 2px solid #AAAAAC;
    flex-direction: column;
    padding-bottom: 40px;
    margin-bottom: 40px;
}

.custom-store-ranking-page .swiper-container {
    width: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.custom-store-ranking-page .swiper-wrapper {
    width: 100%;
    display: flex;
}

.custom-store-ranking-page .swiper-slide {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    overflow: hidden;
    border-radius: 12px;
}

.custom-store-ranking-page .swiper-slide a {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
}

.custom-store-ranking-page .swiper-slide a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.custom-store-ranking-page .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.custom-store-ranking-page .swiper-pagination {
    position: relative;
    margin-top: 20px;
    text-align: center;
    z-index: 1;
}

.custom-store-ranking-page .swiper-pagination-bullet {
    background: #AAAAAC;
    opacity: 0.6;
    transition: opacity 0.3s;
}

.custom-store-ranking-page .swiper-pagination-bullet-active {
    opacity: 1;
    background: #E9528E;
}

.custom-store-ranking-image-placeholder {
    width: 100%;
    aspect-ratio: 3 / 4;
    background-color: #e0e0e0;
    color: #666;
    font-size: 0.875rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    text-align: center;
}

.custom-store-ranking-card-header {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-direction: row;
    margin-bottom: 20px;
}

.custom-store-ranking-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 20px;
}

.custom-store-ranking-position {
    font-weight: 500;
    font-size: 1rem;
    background: #9E6CBB;
    border-radius: 50px;
    width: 60px;
    text-align: center;
    color: #fff;
    padding: 2px;
}

.custom-store-ranking-position-first {
    background: #E9528E;
}

.custom-store-ranking-name {
    font-size: 1.5rem;
    color: #535353;
    white-space: nowrap;
    overflow: hidden;
    font-weight: 500;
}

.custom-store-ranking-info {
    position: relative;
    width: 100%;
    height: 60px;
    border: 1px solid #AAAAAC;
    border-radius: 8px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    background-color: #fff;
    padding-top: 10px;
    color: #535353;
}

.custom-store-ranking-info::before {
    content: attr(data-label);
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    padding: 5px 0px;
    font-size: 0.75rem;
    color: #7D40A0;
    font-weight: 500;
    border: 1px solid #AAAAAC;
    border-radius: 12px;
    width: 70px;
}

.custom-store-ranking-card-btn-content {
    display: flex;
    flex-direction: row;
    margin-top: 20px;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.custom-store-ranking-card-info-content {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.custom-store-ranking-button {
    height: 40px;
    font-size: 1rem;
    background: #fff;
    color: #7D40A0;
    border-radius: 24px;
    width: 100%;
    position: relative;
    text-align: center;
    border: solid 1px #7D40A0;
    padding: 5px;
}

.custom-store-ranking-button::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 20px;
    width: 7px;
    height: 7px;
    border-bottom: 1px solid #7D40A0;
    border-left: 1px solid #7D40A0;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}

.custom-store-ranking-no-ranking-message {
    text-align: center;
    font-size: 1rem;
    color: #AAAAAC;
    margin-top: 40px;
}

/* ------------------------------------------------------------------------------------------------------- */
/* セラピストランキング */

.custom-therapist-ranking-page {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
    background: #fff;
    font-weight: 500;
}

.custom-therapist-ranking-page,
.custom-therapist-ranking-page * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.custom-therapist-ranking-content {
    height: 100%;
    overflow-y: auto;
}

.custom-therapist-ranking-content-title {
    font-size: 1.5rem;
    font-weight: 500;
    color: #E9528E;
    text-align: center;
    margin-top: 40px;
}

.custom-therapist-ranking-tabs {
    display: flex;
    flex-direction: row;
    gap: 5px;
    overflow-x: auto;
    scroll-behavior: smooth;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    margin: 40px auto 0px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.custom-therapist-ranking-tabs::-webkit-scrollbar {
    display: none;
}
  

.custom-therapist-ranking-tab-button {
    padding: 3px 10px;
    border: 1px solid #AAAAAC;
    background-color: #ffffff;
    color: #AAAAAC;
    font-size: 0.75rem;
    border-radius: 20px;
    cursor: pointer;
    width: 60px;
    transition: all 0.2s ease-in-out;
}

.custom-therapist-ranking-tab-button.active {
    background-color: #7D40A0;
    color: #ffffff;
}

.custom-therapist-ranking-period {
    font-size: 0.875rem;
    text-align: center;
    color: #535353;
    margin-top: 20px;
}


.custom-therapist-ranking-grid {
    display: flex;
    flex-direction: column;
}

.custom-therapist-ranking-tab-content {
    margin-top: 40px;
}

.custom-therapist-ranking-card-horizontal {
    display: flex;
    position: relative;
    gap: 20px;
    text-decoration: none;
    color: inherit;
    align-items: flex-start;
    width: 100%;
    border-bottom: 2px solid #AAAAAC;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.custom-therapist-ranking-card-image {
    position: relative;
}

.custom-therapist-ranking-avatar {
    position: relative;
    width: 100%;
    max-width: 185px;
    aspect-ratio: 3 / 4;
    border-radius: 12px;
    object-fit: cover;
}

.custom-therapist-ranking-heart-wrapper {
    position: absolute;
    right: 5px;
    bottom: 5px;
    background-color: rgba(240, 240, 240, 0.8);
    border-radius: 50%;
    padding: 4px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    z-index: 10;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-therapist-heart-img {
    width: 24px;
    height: auto;
}

.custom-therapist-matching-toast {
    position: absolute;
    bottom: 48px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #E9528E;
    color: #fff;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 20;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    text-align: center;
}

.custom-therapist-matching-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(-4px);
}

.custom-therapist-ranking-card-content {
    flex: 1;
}

.custom-therapist-ranking-position {
    font-weight: 500;
    padding: 2px;
    font-size: 1rem;
    background: #9E6CBB;
    border-radius: 50px;
    width: 60px;
    text-align: center;
    color: #fff;
}

.custom-therapist-ranking-position-first {
    background: #E9528E;
}

.custom-therapist-ranking-store-name {
    font-size: 1rem;
    color: #535353;
    white-space: nowrap;
    overflow: hidden;
    margin-top: 5px;
}

.custom-therapist-ranking-name {
    font-size: 1.5rem;
    color: #535353;
    white-space: nowrap;
    overflow: hidden;
    font-weight: 500;
    margin-top: 5px;
}

.custom-therapist-ranking-age {
    font-size: 1rem;
    font-weight: normal;
    color: #535353;
    white-space: nowrap;
    overflow: hidden;
    margin-right: 10px;
}

.custom-therapist-ranking-info {
    font-size: 1rem;
    font-weight: normal;
    color: #535353;
    white-space: nowrap;
    overflow: hidden;
    margin-top: 5px;
    margin-bottom: 20px;
}

.custom-therapist-ranking-rating {
    font-size: 1.5rem;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.custom-therapist-ranking-review-count {
    font-size: 1rem;
    color: #AAAAAC;
}

.custom-therapist-star {
    color: #AAAAAC;
    font-size: 1.5rem;
}

.custom-therapist-star.selected {
    color: #E9528E;
}

.custom-therapist-star.half-selected {
    background: linear-gradient(to right, #E9528E 50%, #AAAAAC 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.custom-therapist-ranking-button {
    padding: 5px;
    font-size: 1rem;
    background: #ffffff;
    color: #7D40A0;
    border: 1px solid #7D40A0;
    border-radius: 24px;
    max-width: 184px;
    height: 40px;
    position: relative;
    text-align: center;
    margin-top: 25px;
}

.custom-therapist-ranking-button::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 20px;
    width: 7px;
    height: 7px;
    border-bottom: 1px solid #7D40A0;
    border-left: 1px solid #7D40A0;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}

.custom-therapist-ranking-no-ranking-message {
    text-align: center;
    font-size: 1rem;
    color: #AAAAAC;
    margin-top: 40px;
}

/* ------------------------------------------------------------------------------------------------------- */
/* 店舗・セラピストログイン */

.custom-store-and-therapist-login-page {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
    background: #fff;
    font-weight: 500;
    padding-inline: 1.25rem;
}

.custom-store-and-therapist-login-page,
.custom-store-and-therapist-login-page * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.custom-store-and-therapist-login-page-title {
    font-size: 1.5rem;
    font-weight: 500;
    color: #E9528E;
    text-align: center;
    margin-top: 40px;
}

.custom-store-and-therapist-login-page-content {
    height: 100%;
    overflow-y: auto;
}

#custom-store-and-therapist-login-form {
    display: flex;
    flex-direction: column;
    margin-top: 40px;
}

.custom-store-and-therapist-login-form-group label {
    font-size: 1rem;
    color: #535353;
    display: block;
    margin-bottom: 8px;
}

.custom-store-and-therapist-login-form-group input {
    font-size: 0.875rem;
    padding: 13px;
    border: none;
    border-radius: 25px;
    background-color: #F5F5F5;
    width: 100%;
    color: #535353;
}

.csatl-error-message {
    display: block;
    margin-bottom: 20px;
    font-size: 0.875rem;
    color: #E9518E;
}

#csatl-login-button {
    position: relative;
    text-align: center;
    font-size: 1rem;
    background-color: #E9518E;
    color: #fff;
    border-radius: 50px;
    width: 282px;
    height: 40px;
    border: none;
    transition: background-color 0.3s;
    margin: 20px auto 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

#csatl-login-button::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 10px;
    width: 7px;
    height: 7px;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}

.custom-store-and-therapist-password-reset-button {
    display: block;
    text-align: center;
    font-size: 0.875rem;
    color: #E9518E;
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
    margin-top: 20px;
}

.csatl-login-note {
    margin-top: 20px;
    font-size: 0.875rem;
    color: #AAAAAC;
    text-align: center;
}

.csatl-login-note a {
    color: #E9518E;
    text-decoration: underline;
}

.custom-store-and-therapist-login-logged-in-message {
    font-size: 1rem;
    color: #535353;
    text-align: center;
    margin: 40px 0 0px 0;
}

.custom-store-and-therapist-login-mypage-button,
.custom-store-and-therapist-login-logout-button {
    position: relative;
    text-align: center;
    font-size: 1rem;
    border-radius: 50px;
    width: 282px;
    height: 40px;
    border: none;
    transition: background-color 0.3s;
    margin: 20px auto 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-store-and-therapist-login-mypage-button {
    background-color: #E9518E;
    color: #fff;
}


.custom-store-and-therapist-login-logout-button {
    background-color: #AAAAAC; 
    color: #fff;
}

.custom-store-and-therapist-login-mypage-button::before,
.custom-store-and-therapist-login-logout-button::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 10px;
    width: 7px;
    height: 7px;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* パスワードリセット */

.custom-store-and-therapist-password-reset-page {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
    background: #fff;
    font-weight: 500;
    padding-inline: 1.25rem;
}

.custom-store-and-therapist-password-reset-page,
.custom-store-and-therapist-password-reset-page * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.custom-store-and-therapist-password-reset-page-content {
    height: 100%;
    overflow-y: auto;
}

.custom-store-and-therapist-password-reset-message {
    font-size: 1rem;
    color: #535353;
    text-align: center;
    margin: 40px 0 20px 0;
}

#csatl-reset-step-1 input,
#csatl-reset-step-2 input,
#csatl-reset-step-3 input {
    font-size: 0.875rem;
    padding: 13px;
    border: none;
    border-radius: 25px;
    background-color: #F5F5F5;
    width: 100%;
    color: #535353;
}

#csatl-reset-send-email,
#csatl-reset-verify-code,
#csatl-reset-final-submit {
    position: relative;
    text-align: center;
    font-size: 1rem;
    background-color: #E9518E;
    color: #fff;
    border-radius: 50px;
    width: 282px;
    height: 40px;
    border: none;
    transition: background-color 0.3s;
    margin: 40px auto 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

#csatl-reset-send-email::before,
#csatl-reset-verify-code::before,
#csatl-reset-final-submit::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 10px;
    width: 7px;
    height: 7px;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}

.csatl-custom-reset-restart-button {
    margin: 16px auto 0 auto;
    display: block;
    font-size: 0.875rem;
    color: #AAAAAC;
    background: none;
    border: none;
    text-decoration: underline;
    cursor: pointer;
}

/* ------------------------------------------------------------------------------------------------------- */
/* ユーザーログイン */

.custom-user-login-page {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
    background: #fff;
    font-weight: 500;
    padding-inline: 1.25rem;
}

.custom-user-login-page,
.custom-user-login-page * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.custom-user-login-page-title {
    font-size: 1.5rem;
    font-weight: 500;
    color: #E9528E;
    text-align: center;
    margin-top: 40px;
}

.custom-user-login-page-content {
    height: 100%;
    overflow-y: auto;
}

#custom-user-login-form {
    display: flex;
    flex-direction: column;
    margin-top: 40px;
}

.custom-user-login-form-group label {
    font-size: 1rem;
    color: #535353;
    display: block;
    margin-bottom: 8px;
}

.custom-user-login-form-group input {
    font-size: 0.875rem;
    padding: 13px;
    border: none;
    border-radius: 25px;
    background-color: #F5F5F5;
    width: 100%;
    color: #535353;
}

.cul-error-message {
    display: block;
    margin-bottom: 20px;
    font-size: 0.875rem;
    color: #E9518E;
}

#cul-login-button {
    position: relative;
    text-align: center;
    font-size: 1rem;
    background-color: #E9518E;
    color: #fff;
    border-radius: 50px;
    width: 282px;
    height: 40px;
    border: none;
    transition: background-color 0.3s;
    margin: 20px auto 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

#cul-login-button::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 10px;
    width: 7px;
    height: 7px;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}

.custom-user-register-button {
    position: relative;
    text-align: center;
    font-size: 1rem;
    background-color: #fff;
    color: #7D40A0;
    border-radius: 50px;
    width: 282px;
    height: 40px;
    border: solid 1px #7D40A0;
    transition: background-color 0.3s;
    margin: 20px auto 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-user-register-button::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 10px;
    width: 7px;
    height: 7px;
    border-bottom: 1px solid #7D40A0;
    border-left: 1px solid #7D40A0;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}


.custom-user-password-reset-button {
    display: block;
    text-align: center;
    font-size: 0.875rem;
    color: #E9518E;
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
    margin-top: 20px;
}

.cul-login-note {
    margin-top: 20px;
    font-size: 0.875rem;
    color: #AAAAAC;
    text-align: center;
}

.cul-login-note a {
    color: #E9518E;
    text-decoration: underline;
}

.custom-user-login-logged-in-message {
    font-size: 1rem;
    color: #535353;
    text-align: center;
    margin: 40px 0 0px 0;
}

.custom-user-login-mypage-button,
.custom-user-login-logout-button {
    position: relative;
    text-align: center;
    font-size: 1rem;
    border-radius: 50px;
    width: 282px;
    height: 40px;
    border: none;
    transition: background-color 0.3s;
    margin: 20px auto 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-user-login-mypage-button {
    background-color: #E9518E;
    color: #fff;
}


.custom-user-login-logout-button {
    background-color: #AAAAAC; 
    color: #fff;
}

.custom-user-login-mypage-button::before,
.custom-user-login-logout-button::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 10px;
    width: 7px;
    height: 7px;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}

.cul-line-link-button {
    display: flex;
    position: relative;
    background-color: #06C755;
    color: white;
    padding: 0.75rem;
    border-radius: 3.125rem;
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    z-index: 1;
    flex-direction: row;
    align-items: center;
    gap: 0.1875rem;
    justify-content: center;
    margin: 0 auto;
    height: 2.5rem;
    width: 17.625rem;
}

.cur-method-line {
  display: flex;
  align-items: center;
  text-align: center;
  color: #535353;
  font-size: 1rem;
  margin: 20px 0;
}

.cur-method-line::before,
.cur-method-line::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #AAAAAC;
  margin: 0 10px;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* パスワードリセット */

.custom-user-password-reset-page {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
    background: #fff;
    font-weight: 500;
    padding-inline: 1.25rem;
}

.custom-user-password-reset-page,
.custom-user-password-reset-page * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.custom-user-password-reset-page-content {
    height: 100%;
    overflow-y: auto;
}

.custom-user-password-reset-message {
    font-size: 1rem;
    color: #535353;
    text-align: center;
    margin: 40px 0 20px 0;
}

#reset-step-1 input,
#reset-step-2 input,
#reset-step-3 input {
    font-size: 0.875rem;
    padding: 13px;
    border: none;
    border-radius: 25px;
    background-color: #F5F5F5;
    width: 100%;
    color: #535353;
}

#reset-send-sms,
#reset-verify-code,
#reset-final-submit {
    position: relative;
    text-align: center;
    font-size: 1rem;
    background-color: #E9518E;
    color: #fff;
    border-radius: 50px;
    width: 282px;
    height: 40px;
    border: none;
    transition: background-color 0.3s;
    margin: 40px auto 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

#reset-send-sms::before,
#reset-verify-code::before,
#reset-final-submit::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 10px;
    width: 7px;
    height: 7px;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}

.custom-reset-restart-button {
    margin: 16px auto 0 auto;
    display: block;
    font-size: 0.875rem;
    color: #AAAAAC;
    background: none;
    border: none;
    text-decoration: underline;
    cursor: pointer;
}

.custom-user-password-reset-sub-message{
    font-size: 0.825rem;
    margin: 2.5rem 0 1.25rem 0;
    color: #E9518E;
    text-align: center;
}

/* ------------------------------------------------------------------------------------------------------- */
/* セラミィ運営 */

.cacasm-page {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  font-family: 'Noto Sans JP', sans-serif;
  background: #fff;
}

body.cacasm-admin-page #wpadminbar {
    display: none !important;
}

.cacasm-page-title {
  font-size: 1.5rem;
  font-weight: 500;
  color: #E9528E;
  text-align: center;
}

.cacasm-search {
  border-bottom: 1px solid #AAAAAC;
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  padding-bottom: 20px;
}

#cacasm-search-input {
  font-size: 0.875rem;
  padding: 13px;
  border: none;
  border-radius: 25px;
  background-color: #F5F5F5;
  width: 100%;
  color: #535353;
  margin-top: 40px;
}
  
.cacasm-card-grid {
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  margin-bottom: 40px;
}
  
.cacasm-card {
  background: #fff;
  border: 1px solid #AAAAAC;
  border-radius: 10px;
  padding: 10px;
}

.cacasm-card-header {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cacasm-card-title {
  font-size: 1rem;
  color: #535353;
}

.cacasm-meta {
  margin: 0 0 10px;
}

.cacasm-meta-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 10px;
  align-items: start;
  padding: 5px 0;
  border-bottom: 1px dashed #AAAAAC;
}

.cacasm-meta-row:last-child {
  border-bottom: none;
}

.cacasm-meta-row dt {
  font-size: 0.75rem;
  color: #535353;
  font-weight: 500;
}

.cacasm-meta-row dd {
  margin: 0;
  font-size: 0.875rem;
  color: #535353;
  word-break: break-word;
}

.cacasm-link { 
  color: #7D40A0; 
  text-decoration: none; 
}

/* ボタン */
.cacasm-card-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.cacasm-card-toggle {
  appearance: none;
  background: #fff;
  color: #7D40A0;
  border: solid 1px #7D40A0;
  height: 30px;
  width: 100px;
  border-radius: 30px;
  font-size: 0.875rem;
  cursor: pointer;
}

.cacasm-store-panel {
  margin-top: 20px;
}

.cacasm-store-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cacasm-store-card {
  background: #F5F5F5;
  border: none;
}

.cacasm-card-create-account-btn {
  appearance: none;
  border: 0;
  background: #E9528E;
  color: #fff;
  height: 30px;
  width: 170px;
  border-radius: 30px;
  font-size: 0.875rem;
  cursor: pointer;
}

.cacasm-card-profile-link {
  appearance: none;
  border: 0;
  background: #fff;
  color: #E9528E;
  border: solid 1px #E9528E;
  height: 30px;
  width: 170px;
  border-radius: 30px;
  font-size: 0.875rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cacasm-empty {
  font-size: 0.875rem;
  color: #AAAAAC;
  text-align: center;
}

.cacasm-badge {
  font-size: 0.75rem;
  width: 80px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
}

.cacasm-badge-unissued {
  background-color: #E9528E;
  color: #fff;
}

.cacasm-badge-standard {
  background-color: #fff;
  color: #7D40A0;
  border: 1px solid #7D40A0;
}

.cacasm-badge-lite {
  background-color: #fff;
  color: #7D40A0;
  border: 1px solid #7D40A0;
}

/* ------------------------------------------------------------------------------------------------------- */
/* ユーザー分析 */

.caua-page {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  font-family: 'Noto Sans JP', sans-serif;
  background: #fff;
  color: #535353;
}

body.caua-admin-page #wpadminbar {
  display: none !important;
}

/* タイトル */
.caua-page-title {
  font-size: 1.5rem;
  color: #E9528E;
  text-align: center;
}

.caua-content {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.caua-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
}

.caua-summary-item {
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 16px 24px;
  min-width: 200px;
  text-align: center;
}

.caua-summary-label {
  font-size: 0.875rem;
  color: #535353;
  margin-bottom: 4px;
}

.caua-summary-value {
  font-size: 20px;
  color: #535353;
}

.caua-section {
  margin-bottom: 50px;
}

.caua-section-title {
  font-size: 20px;
  color: #535353;
  border-left: 4px solid #E9528E;
  padding-left: 10px;
  margin-bottom: 15px;
}

.caua-table-wrap {
  overflow-x: auto;
}

.caua-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ccc;
  background: #fff;
}

.caua-table thead th {
  background: #FDECF3;
  color: #535353;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 2px solid #E9528E;
  white-space: nowrap;
}

.caua-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
}

.caua-table tbody tr:nth-child(odd) {
  background: #fafafa;
}

.caua-table td:nth-child(2),
.caua-table td:nth-child(3) {
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.caua-table td[colspan="3"] {
  text-align: center;
  color: #888;
  padding: 20px;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 顧客管理 */

.cci-for-store-page,
.cci-for-therapist-page {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    background: #fff;
}

.cci-for-store-page, 
.cci-for-store-page * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.cci-for-therapist-page, 
.cci-for-therapist-page * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.cci-title {
    font-size: 1.5rem;
    font-weight: 500;
    color: #E9528E;
    text-align: center;
    margin-top: 40px;
}

#cci-search-box {
    font-size: 0.875rem;
    padding: 13px;
    border: none;
    border-radius: 25px;
    background-color: #F5F5F5;
    width: 100%;
    color: #535353;
    margin-top: 40px;
}

.cci-sort-radio-group-section {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-top: 20px;
    margin-bottom: 10px;
}

.cci-sort-radio-group-section-for-therapist {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-top: 20px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #AAAAAC;
}

#cci-sort-select {
    width: 160px;
    padding: 8px 10px;
    font-size: 0.75rem;
    border-radius: 25px;
    border: 1px solid #AAAAAC;
    background: #F5F5F5;
    color: #535353;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23535353' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: calc(100% - 12px) center;
}


#cci-customer-info-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    overflow: auto;
    flex-direction: column;
    align-items: center;
}

.cci-ng-filter {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #535353;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #AAAAAC;    
}

.cci-ng-filter-label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.cci-ng-toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.cci-ng-toggle-switch {
    position: relative;
    width: 32px;
    height: 18px;
    background: #ccc;
    border-radius: 999px;
    transition: background 0.2s ease;
}

.cci-ng-toggle-switch::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s ease;
}

.cci-ng-toggle-input:checked + .cci-ng-toggle-switch {
    background: #7D40A0;
}

.cci-ng-toggle-input:checked + .cci-ng-toggle-switch::before {
    transform: translateX(14px);
}

.cci-ng-toggle-text {
    color: #535353;
    font-size: 0.75rem;
}

.cci-merge-content {
    display: flex;
    font-size: 0.75rem;
    color: #535353;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    align-items: center;
}

.cci-merge-about-btn {
    color: #AAAAAC;
    display: flex;
    flex-direction: row;
    font-size: 0.75rem;
    align-items: center;
    gap: 3px;
    width: 100%;
    justify-content: flex-end;
}

.cci-merge-about-btn .question-icon {
    width: 18px;
    height: auto;
}

.cci-merge-button {
    padding: 4px 8px;
    border-radius: 20px;
    border: 1px solid #7D40A0;
    background: #fff;
    color: #7D40A0;
    font-size: 0.75rem;
    cursor: pointer;
    width: 90px;
}

.cci-merge-button.cci-merge-button-active {
    background: #7D40A0;
    color: #fff;
    border-color: #7D40A0;
}

.cci-merge-cancel-button,
.cci-merge-execute-button {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    cursor: pointer;
    width: 90px;
}

.cci-merge-cancel-button {
    border: 1px solid #AAAAAC;
    background: #fff;
    color: #AAAAAC;
}

.cci-merge-execute-button {
    border: 1px solid #7D40A0;
    background: #7D40A0;
    color: #fff;
}

.cci-merge-switch-wrapper {
    display: none;
    margin-top: 10px;
    display: none;
    justify-content: flex-end;
}

.cci-for-store-page.merge-mode .cci-merge-switch-wrapper {
    display: flex;
}

.cci-merge-switch-label {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    color: #535353;
}

.cci-merge-switch-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.cci-merge-switch {
    position: relative;
    width: 32px;
    height: 18px;
    background: #ccc;
    border-radius: 999px;
    transition: background 0.2s ease;
}

.cci-merge-switch::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s ease;
}

.cci-merge-switch-input:checked + .cci-merge-switch {
    background: #7D40A0;
}

.cci-merge-switch-input:checked + .cci-merge-switch::before {
    transform: translateX(14px);
}

.cci-merge-switch-text {
    font-size: 0.75rem;
    color: #535353;
}

.cci-card-selected {
    background: #F3E7FD !important;
}

.cci-card {
    background: #fff;
    display: flex;
    flex-direction: column;
    width: 100%;
    border-bottom: 2px solid #AAAAAC;
    flex-direction: column;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.cci-card-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    flex-direction: row;
}

.cci-badge {
    font-size: 0.75rem;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 60px;
    height: 25px;
    text-align: center;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge-therame {
    background-color: #fff;
    color: #E9528E;
    border: solid 1px #E9528E;
}

.badge-external {
    background-color: #fff;
    color: #AAAAAC;
    border: solid 1px #AAAAAC;
}

.cci-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
}

.cci-name-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.cci-name {
    font-size: 1rem;
    font-weight: bold;
    color: #535353;
}

.cci-name-row {
    display: flex;
    align-items: center;
    gap: 5px;
}

.cci-ng-badge {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    background-color: #E57373;
    color: #fff;
}

.cci-phone {
    font-size: 0.875rem;
    color: #AAAAAC;
}

.cci-card-body {
    margin-top: 20px;
}

.cci-card-body-content {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cci-card-body-info {
    position: relative;
    width: 100%;
    height: 70px;
    border: 1px solid #AAAAAC;
    border-radius: 8px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.875rem;
    background-color: #fff;
    padding-top: 10px;
    color: #535353;
}

.cci-card-body-info::before {
    content: attr(data-label);
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    padding: 5px 0px;
    font-size: 0.75rem;
    color: #7D40A0;
    border: 1px solid #AAAAAC;
    border-radius: 12px;
    width: 70px;
}


.cci-detail-button {
    background-color: #fff;
    color: #7D40A0;
    border: solid 1px #7D40A0;
    font-size: 0.875rem;
    margin-top: 10px;
    float: right;
    width: 100px;
    height: 30px;
    border-radius: 30px;
    position: relative;
}

.cci-detail-button::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 10px;
    width: 7px;
    height: 7px;
    border-bottom: 1px solid #7D40A0;
    border-left: 1px solid #7D40A0;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}

.cci-no-customer-message,
.cci-error-message {
    text-align: center;
    font-size: 1rem;
    color: #AAAAAC;
    margin: 20px 0;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 個別ページ */

.cci-individual-for-store-page,
.cci-individual-for-therapist-page {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    background: #fff;
}

.cci-individual-for-store-page, 
.cci-individual-for-store-page * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.cci-individual-for-therapist-page, 
.cci-individual-for-therapist-page * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.cci-individual-card {
    margin-bottom: 40px;
}

.cci-individual-header {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
    margin-top: 40px;
    position: relative;
    width: 100%;
}

.cci-individual-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.cci-individual-header-info {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.cci-individual-name-row {
    display: flex;
    align-items: center;
    gap: 5px;
}

.cci-individual-name {
    font-size: 1.125rem;
    font-weight: bold;
    color: #535353;
}

.cci-individual-phone {
    font-size: 1rem;
    color: #AAAAAC;
}

.cci-individual-badge {
    font-size: 0.75rem;
    position: absolute;
    right: 10px;
    top: 0px;
    width: 60px;
    height: 25px;
    text-align: center;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cci-individual-age-and-area-content {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 35px;
}

.cci-individual-age,
.cci-individual-area {
    position: relative;
    width: 100%;
    height: 60px;
    border: 1px solid #AAAAAC;
    border-radius: 8px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    background-color: #fff;
    padding-top: 10px;
    color: #535353;
}

.cci-individual-age::before,
.cci-individual-area::before {
    content: attr(data-label);
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    padding: 5px 0px;
    font-size: 0.75rem;
    color: #7D40A0;
    border: 1px solid #AAAAAC;
    border-radius: 12px;
    width: 70px;
}

.cci-individual-memo-content {
    margin-top: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: solid 1px #AAAAAC;
}

.cci-individual-memo-content-title {
    color: #535353;
    font-size: 0.875rem;
}

.cci-individual-memo {
    width: 100%;
    padding: 12px;
    border-radius: 25px;
    font-size: 0.875rem;
    color: #535353;
    background-color: #F5F5F5;
    resize: vertical;
    border: none;
    margin-top: 5px;
    box-sizing: border-box;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-y: hidden;
    height: 150px;
}

#cci-individual-memo-char-count {
    position: absolute;
    bottom: 70px;
    right: 10px;
    font-size: 0.875rem;
    color: #535353;
    margin-top: 5px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.cci-individual-memo-button {
    background-color: #E9528E;
    color: #fff;
    font-size: 0.875rem;
    margin-top: 10px;
    width: 100px;
    height: 30px;
    border-radius: 30px;
    margin-left: auto;
}

.cci-individual-toggle-switch-section {
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
    justify-content: flex-end;
}

.cci-individual-toggle-switch-explanation {
    font-size: 0.75rem;
    color: #535353;
}

.cci-individual-toggle-switch-explanation-note {
    color: #E9528E;
}

.cci-toggle-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
}

.csim-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cci-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #AAAAAC;
    transition: 0.4s;
    border-radius: 24px;
}

.cci-toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    transition: 0.4s;
    border-radius: 50%;
}

.cci-toggle-switch input:checked + .cci-toggle-slider {
    background-color: #E9528E;
}

.cci-toggle-switch input:checked + .cci-toggle-slider:before {
    transform: translateX(22px);
}

.cci-individual-date-info-content {
    display: flex;
    width: 100%;
    margin-top: 35px;
    flex-direction: column;
    gap: 35px;
}

.cci-individual-date-info {
    position: relative;
    width: 100%;
    height: 60px;
    border: 1px solid #AAAAAC;
    border-radius: 8px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    background-color: #fff;
    padding-top: 10px;
    color: #535353;
}

.cci-individual-date-info::before {
    content: attr(data-label);
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    padding: 5px 0px;
    font-size: 0.75rem;
    color: #7D40A0;
    border: 1px solid #AAAAAC;
    border-radius: 12px;
    width: 160px;
}

.cci-no-interval,
.cci-no-days-data {
    color: #AAAAAC;
    font-size: 0.75rem;
}


.cci-individual-section {
    margin-top: 20px;
}

.cci-individual-info-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    color: #535353;
    margin-bottom: 10px;
}

.cci-individual-info-row span {
    text-align: right;
}

.cci-cancel-breakdown {
    margin-left: 20px;
    padding-left: 10px;
    position: relative;
}
  
.cci-cancel-branch {
    position: relative;
    padding-left: 16px;
    margin: 0;
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    color: #535353;
    margin-bottom: 10px;
}

.cci-cancel-branch::before {
    content: '';
    position: absolute;
    top: 0.75em;
    left: -10px;
    width: 20px;
    height: 1px;
    background: #AAAAAC;
}

.cci-cancel-breakdown::before {
    content: '';
    position: absolute;
    top: -10px;
    bottom: 0;
    left: 0;
    width: 1px;
    background: #AAAAAC;
}

.cci-individual-chart-canvas {
    height: 300px;
    max-height: 300px;
    width: 100%;
    box-sizing: border-box;
}

.cci-individual-button-section {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: solid 1px #AAAAAC;
}

.cci-individual-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.875rem;
    color: #7D40A0;
    width: 85px;
}

.cci-individual-button img {    
    height: 30px;
    width: auto;
}



.cci-individual-reservation-list-section {
    margin-top: 20px;
}
  
.cci-individual-subheading {
    font-size: 0.875rem;
    color: #535353;
    margin-bottom: 10px;
}
  
.cci-reservation-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}
  
.cci-reservation-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px;
    padding: 10px 10px;
    border: 1px solid #AAAAAC;
    width: 100%;
}
  
.cci-reservation-id {
    color: #535353;
    font-size: 0.875rem;
}
  
.cci-reservation-status {
    font-size: 0.75rem;
    border-radius: 9999px;
    color: #fff;
    width: 120px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
  
.cci-reservation-status.cancelled {
    background-color: #AAAAAC;
}

.cci-reservation-status.pending {
    background-color: #FFA000;
}

.cci-reservation-status.confirmed {
    background-color: #1976D2;
}

.cci-reservation-status.store_confirmed {
    background-color: #4CAF50;
}
  
.cci-reservation-date {
    font-size: 0.75rem;
    color: #535353;
}

.cci-reservation-item-for-store {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    border-radius: 10px;
    padding: 10px 10px;
    border: 1px solid #AAAAAC;
    width: 100%;
}

.cci-reservation-therapist {
    font-size: 0.75rem;
    color: #535353;
}

.cci-individual-phone-display {
    font-size: 0.875rem;
    color: #AAAAAC;
    word-break: break-all;
}

.cci-individual-phone-edit {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    width: 100%;
}

.cci-individual-phone-input {
    flex: 1;
    min-width: 0;
    padding: 5px 8px;
    border-radius: 18px;
    border: none;
    font-size: 0.75rem;
    color: #535353;
    background-color: #F5F5F5;
    box-sizing: border-box;
    outline: none;
}

.cci-individual-phone-save-button {
    flex-shrink: 0;
    background-color: #E9528E;
    color: #fff;
    font-size: 0.75rem;
    width: 70px;
    height: 28px;
    border-radius: 30px;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.cci-individual-phone-save-button:disabled {
    opacity: 0.7;
    cursor: default;
}


.cci-individual-header-toggle {
    margin-top: 5px;
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 予約履歴 */

.custom-reservations-history-page {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
    background: #fff;
    font-weight: 500;
    padding-right: 20px;
    padding-left: 20px;
}

.custom-reservations-history-page,
.custom-reservations-history-page * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.custom-reservations-history-page-content {
    height: 100%;
    overflow-y: auto;
}

.crh-reservation-details-for-share-error-message {
    text-align: center;
    font-size: 1rem;
    color: #AAAAAC;
    margin: 40px 0;
}

.custom-reservations-history-message {
    font-size: 1rem;
    color: #AAAAAC;
    text-align: center;
    margin-top: 40px;
}


.custom-reservations-history-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
}

.custom-reservations-history-card {
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 600px;
    border-bottom: solid 1px #AAAAAC;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.custom-reservations-history-card-content {
    position: relative;
}

.custom-reservations-history-card-status {
    margin-bottom: 10px;
}

.custom-reservations-history-past-label {
    width: 150px;
    background-color: #AAAAAC;
    border-radius: 50px;
    color: #fff;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
}

.custom-reservations-history-therapist-info {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    gap: 10px;
}

.custom-reservations-history-therapist-info img {
    height: 70px;
    width: 70px;
    border-radius: 50%;
    object-fit: cover;
}

.custom-reservations-history-therapist-name {
    font-size: 1rem;
    color: #535353;
    max-width: 150px;
    min-width: 150px;
    white-space: nowrap;
    overflow: hidden;
}

.custom-reservations-history-card-time {
    font-size: 0.875rem;
    color: #535353;
    text-align: center;
    margin-bottom: 10px;
}


.custom-reservations-history-buttons-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.custom-reservations-history-view-details-button,
.custom-reservations-history-view-review-button {
    height: 40px;
    font-size: 1rem;
    background: #fff;
    color: #7D40A0;
    border-radius: 24px;
    width: 100%;
    position: relative;
    text-align: center;
    border: solid 1px #7D40A0;
    padding: 5px;
    max-width: 282px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-reservations-history-view-details-button::before,
.custom-reservations-history-view-review-button::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 20px;
    width: 7px;
    height: 7px;
    border-bottom: 1px solid #7D40A0;
    border-left: 1px solid #7D40A0;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}

.custom-reservations-history-review-button {
    height: 40px;
    font-size: 1rem;
    background: #E9528E;
    color: #fff;
    border-radius: 24px;
    width: 100%;
    position: relative;
    text-align: center;
    max-width: 282px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-reservations-history-review-button::before{
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 20px;
    width: 7px;
    height: 7px;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}

.custom-reservations-history-review-button::after {
    content: 'ポイントGET！';
    position: absolute;
    top: -13px;
    right: 50%;
    transform: translateX(50%);
    background: #fff;
    color: #E9528E;
    border: solid 1px #E9528E;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 10px;
    white-space: pre;
}

.custom-reservations-history-review-button--lite::after {
    display: none;
}

.custom-reservations-history-page-title {
    font-size: 1.5rem;
    font-weight: 500;
    color: #E9528E;
    text-align: center;
    margin-top: 40px;
}


.custom-reservations-history-badge {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0px 5px;
    border-radius: 24px;
    font-size: 0.875rem;
    border: 1px solid transparent;
}

.custom-reservations-history-badge--cancelled {
    background: #fff;
    color: #AAAAAC;
    border-color: #AAAAAC;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* ステップバー */

.custom-reservations-history-stepper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    counter-reset: step;
    position: relative;
}

.custom-reservations-history-step {
    position: relative;
    text-align: center;
    flex: 1;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ステップ間の横線 */
.custom-reservations-history-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 20px;
    left: calc(50% + 24px);
    width: calc(100% - 48px);
    height: 1px;
    background-color: #D7AEEF;
    z-index: 0;
}

/* 丸の基本スタイル（未完了＆完了） */
.custom-reservations-history-step::before {
    counter-increment: step;
    content: counter(step);
    width: 40px;
    height: 40px;
    line-height: 40px;
    display: block;
    text-align: center;
    margin-bottom: 5px;
    border-radius: 50%;
    background-color: #D7AEEF;
    font-weight: 500;
    font-size: 1.125rem;
    color: #fff;
    transition: all 0.3s ease;
    opacity: 0;
    transform: scale(0.8);
    animation: crl-step-in 0.5s forwards;
    z-index: 1;
}

/* アクティブの丸だけ背景色変更 */
.custom-reservations-history-step.active::before {
    background-color: #7D40A0;
    color: #fff;
    transform: scale(1);
    opacity: 1;
}

/* 完了ステップ（✓なし、表示ON） */
.custom-reservations-history-step.completed::before {
    transform: scale(1);
    opacity: 1;
}

/* アクティブ以外のラベル（共通） */
.custom-reservations-history-step .step-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #D7AEEF;
    transition: color 0.3s ease;
    opacity: 0;
    transform: translateY(10px);
    animation: crl-label-in 0.5s forwards 0.3s;
}

/* アクティブのラベルだけ色変更 */
.custom-reservations-history-step.active .step-label {
    color: #7D40A0;
    transform: translateY(0);
    opacity: 1;
}

/* 完了ステップのラベル表示ON */
.custom-reservations-history-step.completed .step-label {
    transform: translateY(0);
    opacity: 1;
}

/* 完了ステップの横線色 */
.custom-reservations-history-step.completed::after {
    background-color: #D7AEEF;
}

/* キャンセル表示用 */
.custom-reservations-history-stepper.cancelled {
    justify-content: center;
    align-items: center;
}

.custom-reservations-history-stepper.cancelled .cancelled-label {
    font-size: 0.875rem;
    color: #D7AEEF;
}

/* アニメーション */
@keyframes crl-step-in {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes crl-label-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 遷移調整 */
.custom-reservations-history-step::before,
.custom-reservations-history-step .step-label {
    transition: all 0.3s ease;
}




/* ------------------------------------------------------------------------------------------------------------------ */
/* 口コミ投稿 */


.crh-post-review-page {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
    background: #fff;
    font-weight: 500;
    padding-right: 20px;
    padding-left: 20px;
}

.crh-post-review-page-error {
    margin-top: 40px;
    color: #AAAAAC;
    font-size: 0.875rem;
    text-align: center;
}

.crh-post-review-page-error-btn {
    position: relative;
    border: solid 1px #7D40A0;
    border-radius: 30px;
    font-size: 1rem;
    color: #7D40A0;
    text-align: center;
    width: 282px;
    height: 40px;
    padding: 5px;
    margin: 40px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crh-post-review-page-error-btn::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 10px;
    width: 7px;
    height: 7px;
    border-bottom: 1px solid #7D40A0;
    border-left: 1px solid #7D40A0;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}


.crh-post-review-page-main-content {
    overflow-y: auto;
    flex:1;
}

.crh-post-review-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    z-index: 10;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    left: 0;
    padding-left: 20px;
    padding-right: 20px;
}

.crh-post-review-page-back-btn {
    width: 50px;
    font-size: 0.875rem;
    color: #535353;
    cursor: pointer;
    border: none;
}

#post-review {
    width: 90px;
    padding: 5px;
    background-color: #E9528E;
    color: #fff;
    border: none;
    border-radius: 40px;
    font-size: 0.875rem;
    cursor: pointer;
    position: relative;
}

#post-review::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 10px;
    width: 7px;
    height: 7px;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}

.crh-post-review-page-therapist-info {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
    gap: 10px;
}

.crh-post-review-page-therapist-info img {
    border-radius: 50%;
    width: 80px;
    height: 80px;
    object-fit: cover;
}

.crh-post-review-page-therapist-and-store {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.crh-post-review-page-therapist-name{
    font-size: 1rem;
    color: #535353;
}

.crh-post-review-page-store-name {
    font-size: 0.875rem;
    color: #535353;
}

.crh-post-review-page-form {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.crh-post-review-page-rating {
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.crh-post-review-page-rating .star {
    color: #AAAAAC;
    transition: color 0.3s, transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    transform: scale(1);
}

.crh-post-review-page-rating .star.selected {
    color: #E9528E;
    transform: scale(1.1); 
}

.crh-post-review-page-rating .star.hovered {
    color: #E9528E;
    transform: scale(1.1); 
}

.crh-post-review-page-rating .star:active {
    transform: scale(0.95);
}

.crh-post-review-page-form textarea {
    height: 30vh;
    padding: 13px;
    font-size: 0.875rem;
    border: none;
    border-radius: 25px;
    box-sizing: border-box;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-y: auto;
    background-color: #F5F5F5;
    color: #535353;
    margin-top: 20px;
    width: 100%;
}

.crh-post-review-page-form-section {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
}

.crh-post-review-page-form-section-message {
    text-align: center;
    font-size: 0.875rem;
    color: #535353;
    margin-bottom: 20px;
}

.crh-post-review-page-form-section-category{
    margin-bottom: 40px;
}

.crh-post-review-page-form-section-category-title {
    font-size: 1rem;
    color: #7D40A0;
    text-align: center;
    border-bottom: solid 1px #7D40A0;
    width: 100%;
}

.crh-post-review-page-tags {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.crh-post-review-page-tags .tag {
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.875rem;
    min-width: 60px;
    transition: all 0.2s ease;
    border: 1px solid #AAAAAC;
    background-color: #ffffff;
    color: #AAAAAC;
}

.crh-post-review-page-tags .tag.selected {
    background-color: #7D40A0;
    color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

#crh-post-review-page-form-textarea-char-count {
    font-size: 0.875rem;
    color: #535353;
    align-items: center;
    margin-left: auto;
    margin-right: 8px;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 口コミ閲覧 */

.crh-view-review-page {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
    background: #fff;
    font-weight: 500;
    padding-right: 20px;
    padding-left: 20px;
}

.crh-view-review-page-main-content {
    overflow-y: auto;
    flex:1;
}

.crh-view-review-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    z-index: 10;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    left: 0;
    padding-left: 20px;
    padding-right: 20px;
}

.crh-view-review-page-back-btn {
    width: 50px;
    font-size: 0.875rem;
    color: #535353;
    cursor: pointer;
    border: none;
}

.crh-view-review-page-therapist-info {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
    gap: 10px;
}

.crh-view-review-page-therapist-info img {
    border-radius: 50%;
    width: 80px;
    height: 80px;
    object-fit: cover;
}

.crh-view-review-page-therapist-and-store {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.crh-view-review-page-therapist-name{
    font-size: 1rem;
    color: #535353;
}

.crh-view-review-page-store-name {
    font-size: 0.875rem;
    color: #535353;
}

.crh-view-review-page-form {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.crh-view-review-page-rating {
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.crh-view-review-page-rating .star {
    color: #AAAAAC;
    transition: color 0.3s, transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    transform: scale(1);
}

.crh-view-review-page-rating .star.selected {
    color: #E9528E;
    transform: scale(1.1); 
}

.crh-view-review-page-rating .star:active {
    transform: scale(0.95);
}

.crh-view-review-page-form textarea {
    height: 30vh;
    padding: 13px;
    font-size: 0.875rem;
    border: none;
    border-radius: 25px;
    box-sizing: border-box;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-y: auto;
    background-color: #F5F5F5;
    color: #535353;
    margin-top: 20px;
    width: 100%;
}

.crh-view-review-page-form-section {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
}

.crh-view-review-page-form-section-category{
    margin-bottom: 40px;
}

.crh-view-review-page-form-section-category-title {
    font-size: 1rem;
    color: #7D40A0;
    text-align: center;
    border-bottom: solid 1px #7D40A0;
    width: 100%;
}

.crh-view-review-page-tags {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.crh-view-review-page-tags .tag {
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.875rem;
    min-width: 60px;
    transition: all 0.2s ease;
    border: 1px solid #AAAAAC;
    background-color: #ffffff;
    color: #AAAAAC;
}

.crh-view-review-page-tags .tag.selected {
    background-color: #7D40A0;
    color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 予約詳細 */

.crh-reservation-details-page {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
}

.crh-reservation-details-page, 
.crh-reservation-details-page * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.crh-reservation-details-page-content {
    height: 100%;
    overflow-y: auto;
}

.crh-reservation-details-page-top-section {
    padding-right: 20px;
    padding-left: 20px;
    background: #fff;
    padding-top: 40px;
}


.crh-reservation-details-page-bottom-section {
    padding-right: 20px;
    padding-left: 20px;
    background: #F5F5F5;
    margin-top: -91px;
    padding-top: 91px;
    padding-bottom: 5rem !important;
}


.crh-reservation-details-page-status-message {
    color: #535353;
    font-size: 0.875rem;
    margin-top: 10px;
}

.crh-reservation-details-page-therapist-info-wrapper {
    padding-right: 20px;
    padding-left: 20px;
}

.crh-reservation-details-page-therapist-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    border: solid 1px #AAAAAC;
    background: #fff;
    border-radius: 10px;
    margin-top: 40px;
    padding: 20px;
    height: 211px;
    position: relative;
}

.crh-reservation-details-page-therapist-img-and-name {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    gap: 10px;
    padding-bottom: 20px;
    border-bottom: solid 1px #AAAAAC;
    margin-bottom: 20px;
}

.crh-reservation-details-page-therapist-img-and-name img {
    height: 80px;
    width: 80px;
    border-radius: 50%;
    object-fit: cover;

}

.crh-reservation-details-page-therapist-and-store {
    color: #535353;
}

.crh-reservation-details-page-therapist-name {
    font-size: 1rem;
}

.crh-reservation-details-page-store-name {
    font-size: 0.875rem;
}

.crh-reservation-details-page-therapist-btn-content {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
}


.crh-reservation-details-page-therapist-info-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.875rem;
    color: #7D40A0;
}

.crh-reservation-details-page-therapist-info-button img {    
    height: 30px;
    width: auto;
}

.crh-reservation-details-page-datetime-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 40px;
    gap: 20px;
    align-items: stretch;
}

.crh-reservation-details-page-start-datetime-info,
.crh-reservation-details-page-end-datetime-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.875rem;
    border-radius: 10px;
    padding: 10px 10px;
    background: #fff;
    width: 100%;
}

.crh-reservation-details-page-start-datetime-info-title,
.crh-reservation-details-page-end-datetime-info-title {
    background: #7D40A0;
    color: #fff;
    font-size: 1rem;
    width: 90%;
    max-width: 155px;
    height: 30px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crh-reservation-details-page-start-datetime,
.crh-reservation-details-page-end-datetime {
    font-size: 1rem;
    color: #535353;
    text-align: center;
}

.crh-reservation-details-page-start-datetime-explanation {
    font-size: 0.875rem;
    color: #535353;
}

.crh-dot-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
  }
  
.crh-dot-loader div {
    width: 4px;
    height: 4px;
    background-color: #E9528E;
    border-radius: 50%;
    animation: wave 1.2s infinite ease-in-out;
}

.crh-dot-loader div:nth-child(1) {
    animation-delay: -0.4s;
}

.crh-dot-loader div:nth-child(2) {
    animation-delay: -0.2s;
}

.crh-dot-loader div:nth-child(3) {
    animation-delay: 0s;
}

@keyframes wave {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
}

.crh-reservation-details-page-meeting-place-info,
.crh-reservation-details-page-outfit-description-info,
.crh-reservation-details-page-schedule-adjusted-info,
.crh-reservation-details-page-question-info,
.crh-reservation-details-page-contact-info {
    background: #fff;
    width: 100%;
    border-radius: 0.625rem;
    margin-top: 1.25rem;
    padding: 0.625rem;    
}

.crh-reservation-details-page-meeting-place-title,
.crh-reservation-details-page-outfit-description-title,
.crh-reservation-details-page-schedule-adjusted-title,
.crh-reservation-details-page-question-title,
.crh-reservation-details-page-contact-title {
    font-size: 1rem;
    color: #7D40A0;
}

.crh-reservation-details-page-question,
.crh-reservation-details-page-outfit-description,
.crh-reservation-details-page-meeting-place,
.crh-reservation-details-page-schedule-adjusted,
.crh-reservation-details-page-contact {
    box-sizing: border-box;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: hidden;
    font-size: 1rem;
    color: #535353;
}

.crh-reservation-details-page-contact {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.crh-reservation-details-page-receipt {
    padding: 10px;
    border-radius: 10px;
    background-color: #fff;
    margin-top: 20px;
    color: #535353;
}

.crh-receipt-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.crh-receipt-item-title {
    width: 50%;
    text-align: left;
    font-size: 1rem;
    color: #7D40A0;
    white-space: nowrap;
    overflow: hidden;
}

.crh-receipt-item-price-and-reason {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.crh--receipt-item-price {
    color: #535353;
    text-align: right;
    font-size: 1rem;
}

.crh-receipt-item-reason {    
    font-size: 0.875rem;
    color: #535353;
}

.crh-receipt-total {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 2px solid #E1E1E1;
}

.crh-receipt-total-title {
    font-size: 1rem;
    color: #7D40A0;
    text-align: left;
    width: 30%;
    white-space: nowrap;
    overflow: hidden;
}

.crh-receipt-total-price-and-explanation {
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.crh-receipt-total-price {
    color: #E9528E;
    text-align: right;
    font-size: 1.5rem;
}

.crh-receipt-total-explanation {    
    font-size: 0.875rem;
    color: #535353;
    text-align: left;
}

.crh-receipt-payment-method {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 2px solid #E1E1E1;
}

.crh-receipt-payment-method-title {
    font-size: 1rem;
    color: #7D40A0;
    text-align: left;
    width: 30%;
    white-space: nowrap;
    overflow: hidden;
}

.crh-receipt-payment-method-detail {
    color: #535353;
    text-align: right;
    font-size: 1rem;
    width: 70%;
}


.crh-reservation-details-page-change-guidance,
.crh-reservation-details-page-cancelled-guidance {
    display: flex;
    flex-direction: column;
    margin-top: 40px;
}


.crh-reservation-details-page-change-guidance-title,
.crh-reservation-details-page-cancelled-guidance-title {
    font-size: 1.125rem;
    font-weight: bold;
    color: #535353;
    text-align: center;
}

.crh-reservation-details-page-change-guidance-info-value-pending,
.crh-reservation-details-page-change-guidance-info-value-confirm,
.crh-reservation-details-page-cancelled-guidance-info-value-confirm {
    font-size: 0.875rem;
    color: #535353;
    margin-top: 10px;
}

.crh-reservation-details-page-contact-button {
    position: relative;
    text-align: center;
    font-size: 1rem;
    background-color: #fff;
    color: #7D40A0;
    border-radius: 50px;
    width: 282px;
    height: 40px;
    border: solid 1px #7D40A0;
    transition: background-color 0.3s;
    margin: 20px auto 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crh-reservation-details-page-contact-button::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 10px;
    width: 7px;
    height: 7px;
    border-bottom: 1px solid #7D40A0;
    border-left: 1px solid #7D40A0;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}

.crh-close-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 4px 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    z-index: 100;
    border-radius: 50%;
    background: #AAAAAC;
}

.crh-close-btn img {
    height: 25px;
    width: 25px;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 予約共有(外部ユーザー) */

.crh-reservation-details-for-share-page {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
}

.crh-reservation-details-for-share-page, 
.crh-reservation-details-for-share-page * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.crh-reservation-details-for-share-page-review-btn,
.crh-reservation-details-for-share-page-reviewed-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 4px 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 65px;
    height: 65px;
    z-index: 100;
    border-radius: 50%;
    background: #E9528E;
    color: #fff;
    font-size: 0.875rem;
}

@media screen and (min-width: 1024px) {
    .crh-reservation-details-for-share-page-review-btn {
        right: calc(13.0208333333% + 1.25rem) !important;
    }

    .crh-reservation-details-for-share-page-reviewed-btn {
        right: calc(13.0208333333% + 1.25rem) !important;
    }
}


/* ------------------------------------------------------------------------------------------------------------------ */
/* 売上管理 */


.sales-report-for-store-page,
.sales-report-for-therapist-page {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    background: #fff;
}

.sales-report-for-store-page, 
.sales-report-for-store-page * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.sales-report-for-therapist-page, 
.sales-report-for-therapist-page * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.csr-title {
    font-size: 1.5rem;
    font-weight: 500;
    color: #E9528E;
    text-align: center;
    margin-top: 40px;
}

.sales-report-for-store-page-header,
.sales-report-for-therapist-page-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-direction: row;
    width: 100%;
    margin-top: 40px;
}

.sales-report-for-store-page-month-picker-container,
.sales-report-for-store-page-therapist-picker-container,
.sales-report-for-therapist-page-month-picker-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: auto;
    position: relative;
}

.sales-report-for-store-page-month-picker-container label,
.sales-report-for-store-page-therapist-picker-container label,
.sales-report-for-therapist-page-month-picker-container label {
    font-size: 1rem;
    color: #535353;
}

.month-picker-for-store,
.therapist-picker,
.month-picker-for-therapist {
    width: 100%;
    background-color: #F5F5F5;
    border: none;
    border-radius: 1.5625rem;
    color: #535353;
    font-size: 0.875rem;
    margin-bottom: 0;
    margin-top: 10px;
    padding: 13px;
}

.month-picker-for-store option,
.therapist-picker option,
.month-picker-for-therapist option {
    text-align: center;
}

.sales-report-for-store-page-month-picker-container::before,
.sales-report-for-store-page-therapist-picker-container::before,
.sales-report-for-therapist-page-month-picker-container::before {
    border-left: 1px solid #6F6F6F;
    border-top: 1px solid #6F6F6F;
    content: "";
    display: block;
    height: 7px;
    position: absolute;
    right: 20px;
    top: 68%;
    transform: translatey(-50%) rotate(-135deg);
    width: 7px;
}

#sales-report-content {
    margin-top: 40px;
    width: 100%;
}

.sales-ledger-summary {
    width: 100%;
}

.sales-ledger-summary-header {
    font-size: 1rem;
    color: #535353;
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
    align-items: center;    
}

.sales-ledger-summary-header img {
    height: 20px;
    width: auto;
}

.sales-ledger-summary-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sales-ledger-summary-list .summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 5px;
    border-bottom: 1px solid #AAAAAC;
}

.sales-ledger-summary-list .summary-label {
    font-size: 0.875rem;
    color: #535353;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sales-ledger-summary-list .summary-note {
    font-size: 0.75rem;
    color: #AAAAAC;
}

.sales-ledger-summary-list .summary-value {
    font-size: 1rem;
    color: #E9528E;
    white-space: nowrap;
}

.sales-ledger-summary-list .summary-value.emphasis {
    font-size: 1rem;
}

.sales-ledger-summary-list .summary-value.small {
    font-size: 1rem;
    color: #535353;
}

/* ------------------------------------------------------------------------------ */

.sales-report-for-store-page-section-title {
    margin-top: 40px;
    margin-bottom: 20px;
    font-size: 1rem;
    color: #535353;
    display: flex;
    gap: 10px;
    align-items: center;
}

.sales-report-for-store-page-section-title img {
    height: 20px;
    width: auto;
}

.sales-report-search-and-sort-section {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
}

.sales-report-search-input {
    font-size: 0.875rem;
    padding: 13px;
    border: none;
    border-radius: 25px;
    background-color: #F5F5F5;
    width: 100%;
    color: #535353;
}

.sales-report-sort-section {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.sales-report-sort-radio-group {
    display: flex;
    flex-direction: column;
    width: 100px;
}

.sales-report-sort-radio-group input[type="radio"] {
    display: none;
}

.sales-report-sort-radio-group .radio-label {
    border: 1px solid #AAAAAC;
    background-color: #ffffff;
    padding: 5px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.2s ease;
    color: #AAAAAC;
    display: inline-block;
    text-align: center;
}

.sales-report-sort-radio-group input[type="radio"]:checked + .radio-label {
    background-color: #7D40A0;
    color: #ffffff;
}

.sales-report-for-store-statement-cards {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 20px;
    margin-bottom: 40px;
}

.csr-no-records-message {
    color: #AAAAAC;
    font-size: 1rem;
    text-align: center;
    padding-top: 20px;
}

.sales-report-for-store-settle-with-therapist-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

select.sales-report-for-store-settle-with-therapist {
    padding: 6px 10px;
    border-radius: 100px;
    font-size: 0.75rem;
    border: none;
    background-color: #F5F5F5;
    color: #535353;
    background-size: 14px 10px;
    cursor: pointer;
    width: 100px;
}

.sales-report-for-store-settle-with-therapist option {
    text-align: center;
}

.sales-report-for-store-settle-with-therapist-wrapper::before {
    border-left: 1px solid #6F6F6F;
    border-top: 1px solid #6F6F6F;
    content: "";
    display: block;
    height: 5px;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translatey(-50%) rotate(-135deg);
    width: 5px;
}

.sales-report-for-store-statement-card {
    border: 1px solid #AAAAAC;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 300px;
    max-width: 600px;
    width: 100%;
}

.csr-statement-card-toggle-content.accordion-toggle {
    padding: 10px;
}

.csr-statement-card-toggle-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #535353;
    margin-bottom: 10px;
    border-bottom: 1px solid #AAAAAC;
    padding-bottom: 10px;
}

.csr-reservation-card-reservation-id-and-category {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

.csr-statement-card-reservation-id {
    color: #E9528E;
    font-size: 1rem;
}

.csr-reservation-card-reservation-category {
    font-size: 1rem;
    color: #E9528E;
}

.csr-statement-card-reservation-date {
    font-size: 0.875rem;
    color: #535353;
}

.csr-statement-card-toggle-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.csr-statement-card-user-info{
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.csr-statement-card-user-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.csr-statement-card-user-name {
    font-size: 1rem;
    color: #535353;
    white-space: nowrap;
    overflow: hidden;
}

.csr-statement-card-accordion-message-wrapper {
    position: relative;
    width: 120px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.csr-statement-card-accordion-message {
    font-size: 0.875rem;
    color: #535353;
    text-align: center;
}

.csr-statement-card-accordion-message-wrapper::before {
    border-left: 1px solid #535353;
    border-top: 1px solid #535353;
    content: "";
    display: block;
    height: 7px;
    position: absolute;
    left: 5px;
    top: 47%;
    transform: translatey(-50%) rotate(-135deg);
    width: 7px;
}

.csr-statement-card-accordion-content.accordion-content {
    padding: 10px;
    background: #F5F5F5;
    margin-top: 10px;
}

.csr-statement-card-sales-total-wrapper {
    background-color: #fff;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 20px;
    margin-top: 10px;
}
  
.csr-sales-total-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
  
.csr-sales-total-label {
    font-size: 0.875rem;
    color: #7D40A0;
}
  
.csr-sales-total-amount {
    font-size: 1rem;
    color: #535353;
}
  
.csr-sales-payment-breakdown {
    display: flex;
    gap: 10px;
}
  
.csr-sales-payment-item {
    flex: 1;
    background: #F7F7F7;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
}

.csr-sales-payment-label {
    font-size: 0.75rem;
    color: #AAAAAC;
    margin-bottom: 5px;
}

.csr-sales-payment-value {
    font-size: 0.875rem;
    color: #535353;
}

.csr-sales-payment-method {
    font-size: 0.875rem;
    color: #535353;
}

.csr-statement-card-therapist-meta-back-rate-wrapper {
    display: flex;
    gap: 10px;
    flex-direction: row;
    width: 100%;
    margin-top: 10px;
}
  
.csr-statement-card-therapist-meta-back-rate-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;
    border-radius: 10px;
    width: 100%;
}
  
.csr-statement-card-therapist-meta-back-rate-label {
    font-size: 0.75rem;
    color: #7D40A0;
    margin-bottom: 10px;
    margin-top: 10px;
}
  
.csr-statement-card-therapist-meta-back-rate-value {
    color: #535353;
    font-size: 0.875rem;
    margin-bottom: 10px;
}

.csr-statement-card-therapist-meta-back-message {
    color: #535353;
    font-size: 0.875rem;
    text-align: center;
    margin-top: 20px;
}

.csr-statement-card-sales-breakdown {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
    background: #fff;
    padding: 10px;
    border-radius: 10px;
}

.csr-sales-breakdown-row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0px;
    border-bottom: 1px solid #E1E1E1;
}

.csr-sales-breakdown-label-header {
    flex: 1;
    font-size: 0.875rem;
    color: #535353;
    white-space: nowrap;
    overflow: hidden;
}

.csr-sales-breakdown-rate-header {
    width: 70px;
    text-align: right;
    font-size: 0.875rem;
    color: #7D40A0;
    display: flex;
    align-items: center;
    gap: 3px;
}

.csr-sales-breakdown-amount-header {
    width: 70px;
    text-align: right;
    font-size: 0.875rem;
    color: #535353;
}

.csr-sales-breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0px;
    border-bottom: 1px solid #E1E1E1;
}
  
.csr-sales-breakdown-row:last-child {
    border-bottom: none;
}

.csr-sales-breakdown-label {
    flex: 1;
    font-size: 0.875rem;
    color: #535353;
    white-space: nowrap;
    overflow: hidden;
}

.csr-sales-breakdown-rate {
    width: 70px;
    text-align: right;
    font-size: 0.875rem;
    color: #7D40A0;
    display: flex;
    align-items: center;
    gap: 3px;
}

.csr-back-rate-input {
    text-align: center;
    font-size: 0.875rem;
    color: #7D40A0;
    border: solid 1px #7D40A0;
    border-radius: 50px;
    width: 50px;
    background: #F3E7FD;
}

.csr-back-rate-input.readonly {
    border: none;
    background: transparent;
}

.csr-sales-breakdown-amount {
    width: 70px;
    text-align: right;
    font-size: 0.875rem;
    color: #535353;
}

.csr-sales-breakdown-back-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0px;
}

.csr-sales-back-total-label {
    flex: 1;
    font-size: 0.875rem;
    color: #535353;
    white-space: nowrap;
    overflow: hidden;
}

.csr-sales-back-total-amount {
    width: 70px;
    text-align: right;
    font-size: 0.875rem;
    color: #535353;
}

.csr-sales-back-total-amount-for-store {
    width: 70px;
    text-align: right;
    font-size: 0.875rem;
    color: #535353;
}

.csr-sales-save-button-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.csr-sales-save-button {
    border: solid 1px #7D40A0;
    color: #7D40A0;
    width: 100px;
    height: 30px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
}

.csr-card-pdf-button-wrapper {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.csr-card-reservation-detail-button {
    color: #9E6CBB;
    background: #fff;
    border: solid 1px #9E6CBB;
    width: 100px;
    height: 30px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
}

.csr-card-pdf-button {
    color: #9E6CBB;
    background: #fff;
    border: solid 1px #9E6CBB;
    width: 100px;
    height: 30px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
}

.csr-statement-status-message {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #E9528E;
    font-size: 0.875rem;
    gap: 5px;
    justify-content: flex-end;
}

.csr-dot-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
  }
  
.csr-dot-loader div {
    width: 4px;
    height: 4px;
    background-color: #E9528E;
    border-radius: 50%;
    animation: wave 1.2s infinite ease-in-out;
}

.csr-dot-loader div:nth-child(1) {
    animation-delay: -0.4s;
}

.csr-dot-loader div:nth-child(2) {
    animation-delay: -0.2s;
}

.csr-dot-loader div:nth-child(3) {
    animation-delay: 0s;
}

@keyframes wave {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
}

.csr-reservation-card-reservation-status-and-reservation-route {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 10px;
    margin-bottom: 20px;
}

.csr-statement-card-reservation-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;
    border-radius: 10px;
    width: 100%;
    font-size: 0.875rem;
    color: #535353;
    padding-bottom: 10px;
}

.csr-statement-card-reservation-status-label {
    font-size: 0.875rem;
    color: #7D40A0;
    margin-bottom: 10px;
    margin-top: 10px;
}

.csr-statement-card-reservation-reservation-route {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;
    border-radius: 10px;
    width: 100%;
    font-size: 0.875rem;
    color: #535353;
    padding-bottom: 10px;
}

.csr-statement-card-reservation-reservation-route-label {
    font-size: 0.875rem;
    color: #7D40A0;
    margin-bottom: 10px;
    margin-top: 10px;
}

.sales-report-settle-filter-label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.sales-report-settle-filter-text {
    color: #535353;
    font-size: 0.75rem;
}

.sales-report-settle-toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.sales-report-settle-toggle-switch {
    position: relative;
    width: 32px;
    height: 18px;
    background: #ccc;
    border-radius: 999px;
    transition: background 0.2s ease;
}

.sales-report-settle-toggle-switch::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s ease;
}

.sales-report-settle-toggle-input:checked + .sales-report-settle-toggle-switch {
    background: #7D40A0;
}

.sales-report-settle-toggle-input:checked + .sales-report-settle-toggle-switch::before {
    transform: translateX(14px);
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* コース・オプション管理 */

.csim-page {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
    background: #fff;
    font-weight: 500;
}

.csim-page-content {
    height: 100%;
    overflow-y: auto;
    padding-bottom: 40px;
}

.csim-page-title {
    font-size: 1.5rem;
    font-weight: 500;
    color: #E9528E;
    text-align: center;
    margin-top: 40px;
}

.csim-section {
    margin-top: 40px;
    width: 100%;
}

.csim-section label {
    font-size: 1rem;
    color: #535353;
    display: inline-block;
}

.csim-save-button {
    font-size: 0.875rem;
    background: #E9528E;
    color: #fff;
    border-radius: 100px;
    width: 120px;
    height: 30px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    margin-top: 10px;
    margin-left: auto;
    margin-right: 0;
    display: block;
    position: relative;
}

.csim-note {
    font-size: 0.875rem;
    color: #535353;
    text-align: center;
    margin-top: 40px;
}

.csim-table-note {
    font-size: 0.75rem;
    color: #AAAAAC;
    text-align: center;
    margin-top: 10px;
}

.csim-table-sort-note {
    display: flex;
    align-items: center;
    flex-direction: row;
    text-align: center;
    justify-content: center;
}

.csim-table-note-icon {
    width: 12px;
    height: auto;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/*  支払い方法 */

#payment_info_report {
    font-size: 0.875rem;
    padding: 13px;
    border: none;
    border-radius: 25px;
    background-color: #F5F5F5;
    width: 100%;
    color: #535353;
    margin-top: 10px;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 現金以外 */

.csim-credit-card-tags {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.csim-credit-card-tag {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.875rem;
    min-width: 90px;
    text-align: center;
    transition: all 0.2s ease;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.csim-credit-card-tag img {
    width: 40px;
    height: auto;
    margin-bottom: 5px;
}

.csim-credit-card-tag.selected {
    background-color: #9E6CBB;
    color: white;
    border-color: #9E6CBB;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------------------------------------------------------ */
/*  コース */


/* ハンドル列 */
.csim-courses-table th:nth-child(1),
.csim-courses-table td:nth-child(1) {
    width: 10%;
}

/* コース列 */
.csim-courses-table th:nth-child(2),
.csim-courses-table td:nth-child(2) {
    width: 40%;
}

/* 時間列 */
.csim-courses-table th:nth-child(3),
.csim-courses-table td:nth-child(3) {
    width: 25%;
}

/* 料金列 */
.csim-courses-table th:nth-child(4),
.csim-courses-table td:nth-child(4) {
    width: 25%;
}

.csim-courses-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    border-radius: 12px;
    overflow: hidden;
}

.csim-courses-table,
.csim-courses-table * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.csim-courses-table th {
    background-color: #9E6CBB;
    font-weight: 500;
    font-size: 0.875rem;
    color: #fff;
    text-align: left;
    padding: 10px 5px;
    border: 1px solid #AAAAAC;
}

.csim-courses-table td {
    padding: 10px 5px;
    text-align: left;
    font-size: 0.875rem;
    color: #535353;
    background-color: #fafafa;
    border: 1px solid #AAAAAC;
}

.csim-courses-table tr.csim-keep-space { 
    visibility: hidden; 
}

.csim-row-chosen { 
    background: #F3E7FD; 
}

.csim-row-ghost { 
    opacity: .6; 
}

.csim-courses-table td.csim-drag-handle {
    text-align: center;
    cursor: grab;
    user-select: none;
    padding: 0;
    color: #9E6CBB;
}

.csim-courses-table td.csim-drag-handle:active {
    cursor: grabbing;
}

.csim-courses-table td[colspan="5"] {
    text-align: center;
    font-size: 0.875rem;
    color: #535353;
}



/* ------------------------------------------------------------------------------------------------------------------ */
/* オプションテーブル */

/* ハンドル列 */
.csim-options-table th:nth-child(1),
.csim-options-table td:nth-child(1) {
    width: 10%;
}

.csim-options-table th:nth-child(2),
.csim-options-table td:nth-child(2) {
    width: 65%;
}

.csim-options-table th:nth-child(3),
.csim-options-table td:nth-child(3) {
    width: 25%;
}

.csim-options-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    border-radius: 12px;
    overflow: hidden;
}

.csim-options-table,
.csim-options-table * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.csim-options-table th {
    background-color: #9E6CBB;
    font-weight: 500;
    font-size: 0.875rem;
    color: #fff;
    text-align: left;
    padding: 10px 5px;
    border: 1px solid #AAAAAC;
}

.csim-options-table td {
    padding: 10px 5px;
    text-align: left;
    font-size: 0.875rem;
    color: #535353;
    background-color: #fafafa;
    border: 1px solid #AAAAAC;
}

.csim-options-table td.csim-drag-handle {
    text-align: center;
    cursor: grab;
    user-select: none;
    padding: 0;
    color: #9E6CBB;
}

.csim-options-table td.csim-drag-handle:active {
    cursor: grabbing;
}

.csim-options-table td[colspan="4"] {
    text-align: center;
    font-size: 0.875rem;
    color: #535353;
}



/* ------------------------------------------------------------------------------------------------------------------ */
/* 指名料テーブル */

/* ハンドル列 */
.csim-designations-table th:nth-child(1),
.csim-designations-table td:nth-child(1) {
    width: 10%;
}

.csim-designations-table th:nth-child(2),
.csim-designations-table td:nth-child(2) {
    width: 65%;
}

.csim-designations-table th:nth-child(3),
.csim-designations-table td:nth-child(3) {
    width: 25%;
}

.csim-designations-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    border-radius: 12px;
    overflow: hidden;
}

.csim-designations-tablee,
.csim-designations-table * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.csim-designations-table th {
    background-color: #9E6CBB;
    font-weight: 500;
    font-size: 0.875rem;
    color: #fff;
    text-align: left;
    padding: 10px 5px;
    border: 1px solid #AAAAAC;
}

.csim-designations-table td {
    padding: 10px 5px;
    text-align: left;
    font-size: 0.875rem;
    color: #535353;
    background-color: #fafafa;
    border: 1px solid #AAAAAC;
}

.csim-designations-table td.csim-drag-handle {
    text-align: center;
    cursor: grab;
    user-select: none;
    padding: 0;
    color: #9E6CBB;
}

.csim-designations-table td.csim-drag-handle:active {
    cursor: grabbing;
}

.csim-designations-table td[colspan="4"] {
    text-align: center;
    font-size: 0.875rem;
    color: #535353;
}


/* ------------------------------------------------------------------------------------------------------------------ */
/* 交通費テーブル */

.csim-transports-table th:nth-child(1),
.csim-transports-table td:nth-child(1) {
    width: 10%;
}

.csim-transports-table th:nth-child(2),
.csim-transports-table td:nth-child(2) {
    width: 65%;
}

.csim-transports-table th:nth-child(3),
.csim-transports-table td:nth-child(3) {
    width: 25%;
}

.csim-transports-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    border-radius: 12px;
    overflow: hidden;
}

.csim-transports-table,
.csim-transports-table * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.csim-transports-table th {
    background-color: #9E6CBB;
    font-weight: 500;
    font-size: 0.875rem;
    color: #fff;
    text-align: left;
    padding: 10px 5px;
    border: 1px solid #AAAAAC;
}

.csim-transports-table td {
    padding: 10px 5px;
    text-align: left;
    font-size: 0.875rem;
    color: #535353;
    background-color: #fafafa;
    border: 1px solid #AAAAAC;
}

.csim-transports-table td.csim-drag-handle {
    text-align: center;
    cursor: grab;
    user-select: none;
    padding: 0;
    color: #9E6CBB;
}

.csim-transports-table td.csim-drag-handle:active {
    cursor: grabbing;
}

.csim-transports-table td[colspan="4"] {
    text-align: center;
    font-size: 0.875rem;
    color: #535353;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* キャンセルポリシー */

#cancellation_policy {
    width: 100%;
    height: 150px;
    padding: 13px;
    font-size: 0.875rem;
    border: none;
    border-radius: 25px;
    box-sizing: border-box;
    background-color: #F5F5F5;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin-top: 5px;
    color: #535353;
    margin-top: 10px;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* お客様への確認事項 */

#customer_confirmation {
    width: 100%;
    height: 150px;
    padding: 13px;
    font-size: 0.875rem;
    border: none;
    border-radius: 25px;
    box-sizing: border-box;
    background-color: #F5F5F5;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin-top: 5px;
    color: #535353;
    margin-top: 10px;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 店舗予約管理画面 */

.custom-store-reservation-management-container {
    background: #fff;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;  
    min-height: 100dvh;
}

.custom-store-reservation-management-container,
.custom-store-reservation-management-container * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.custom-store-reservation-management-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    background-color: #fff;
    display: flex;
    align-items: center;
    z-index: 10;
    width: 100%;
    flex-direction: column;
    height: 93px;
    z-index: 100;
}

.csrm-date-navigation {
    display: flex;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

#csrm-prev-day,
#csrm-next-day {
    position: relative;
    margin: 0 10px;
    height: 29px;
    border: solid 1px #7D40A0;
    width: 30px;
    border-radius: 5px;
}

#csrm-prev-day::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    left: 55%;
    width: 7px;
    height: 7px;
    border-bottom: 1px solid #7D40A0;
    border-left: 1px solid #7D40A0;
    transform: translate(-50%, -50%) rotate(45deg);
}

#csrm-next-day::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    left: 55%;
    width: 7px;
    height: 7px;
    border-bottom: 1px solid #7D40A0;
    border-left: 1px solid #7D40A0;
    transform: translate(-50%, -50%) rotate(-135deg);
}

#formatted-date-display-for-store {
    width: 150px;
    padding: 5px;
    text-align: center;
    border: 1px solid #7D40A0;
    border-radius: 4px;
    font-size: 0.825rem;
    color: #535353;
}


#csrm-therapist-search-input {
    font-size: 0.825rem;
    padding: 5px;
    border: none;
    border-radius: 25px;
    background-color: #F5F5F5;
    width: 100%;
    color: #535353;
    width: 170px;
}

#csrm-user-search-input {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
}

.csrm-reservation-status-navigation {
    position: fixed;
    top: 153px;
    right: 0;
    display: flex;
    flex-direction: column;
    z-index: 20;
    gap: 20px;
}

.csrm-status-button {
    height: 90px;
    width: 40px;
    font-size: 0.75rem;
    background: #fff;
    color: #7D40A0;
    text-align: center;
    border: solid 1px #7D40A0;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    position: relative;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.csrm-count-badge {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    position: absolute;
    top: -10px;
    left: -13px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    color: #fff;
    font-size: 0.75rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

#pending-reservations-count {
    background-color: #FFA000;
}

#confirmed-reservations-count {
    background-color: #1976D2;
}

.custom-store-reservation-management-board {
    margin-top: 93px;
}


.csrm-body {
    display: flex;
}

.csrm-timeslot-table-container {
    overflow-x: auto;
    overflow-y: hidden;
    max-height: 100%;
    position: relative;
    flex: 1;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.csrm-timeslot-table-container.dragging {
    cursor: grabbing;
}

.csrm-timeslot-table-container::-webkit-scrollbar {
    display: none;
}

.csrm-timeslot-table {
    border-collapse: collapse;
    width: max-content;
    table-layout: fixed;
    min-width: 100%;
}

.csrm-timeslot-table th {
    background-color: #F5F5F5;
    color: #535353;
    font-size: 0.825rem;
    height: 40px;
    width: 80px;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    text-align: left;
    overflow: hidden;
    padding-left: 5px;
    box-sizing: border-box;
}

.csrm-timeslot-table td {
    border: 1px solid #ddd;
    width: 80px;
    position: relative;
    overflow: hidden;
    height: 70px;
    text-align: center;
    box-sizing: border-box;
}

.csrm-timeslot-table td:nth-child(odd) {
    border-right: 1px dotted #ddd;
}

.csrm-timeslot-table td:nth-child(even) {
    border-left: 1px dotted #ddd;
}

.csrm-timeslot-table th:nth-child(even) {
    color: transparent;
    border-left: none;
}

.csrm-timeslot-table th:nth-child(odd) {
    border-right: none;
}

.csrm-timeslot-table tbody tr {
    position: relative !important;
}

.csrm-therapist-table-container {
    flex: 0 0 150px;
    height: 100%;
    position: relative;
    margin-right: 0px;
    overflow: auto;
    border-right: 1px solid #ddd;
}

.csrm-therapist-table-container::-webkit-scrollbar {
    display: none;
}

.csrm-therapist-table-container {
    scrollbar-width: none;
}

.csrm-therapist-table {
    border-collapse: collapse;
    width: 100%;
}

.csrm-therapist-table th {
    background-color: #F5F5F5;
    border-top: 1px solid #ddd;
    color: #535353;
    font-size: 0.825rem;
    text-align: center;
    height: 39px;
    box-sizing: border-box;
}

.csrm-therapist-table td {
    background-color: #fff;
    border-top: 1px solid #ddd;
    color: #535353;
    font-size: 0.825rem;
    text-align: center;
    height: 70px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
    box-sizing: border-box;
}

.csrm-therapist-table tr:last-child td {
    border-bottom: 1px solid #ddd;
}

.csrm-therapist-name {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    width: 108px;
}

.csrm-reservation-block.pending {
    background-color: #FFA000;
}

.csrm-reservation-block.confirmed {
    background-color: #1976D2;
}

.csrm-reservation-block.store_confirmed {
    background-color: #4CAF50;
}

.csrm-current-time-line {
    position: absolute;
    width: 1px;
    background-color: #E9528E;
    top: 40px;
    bottom: 0;
    z-index: 10;
}

.csrm-current-time-line-icon {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    color: #E9528E;
    font-size: 0.875rem;
    line-height: 1;
    pointer-events: none;
}

.csrm-reservation-block {
    cursor: pointer;
}

.csrm-body {
    display: flex;
}

.csrm-reservation-block {
    position: absolute;
    top: 0;
}

#custom-store-reservation-management-therapist-reservation-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    color: #E9528E;
    font-size: 0.875rem;
    border: solid 1px #E9528E;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    margin-left: 5px;
}

#custom-store-reservation-management-therapist-reservation-button img {
    height: 15px;
    width: auto;
}

.custom-store-reservation-management-search-and-sort {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    justify-content: flex-start;
}

.custom-store-reservation-management-radio-group {
    display: flex;
    flex-direction: column;
    width: 120px;
}

.custom-store-reservation-management-radio-group.cancelled {
    width: 190px;
}

.custom-store-reservation-management-radio-group input[type="radio"] {
    display: none;
}

.custom-store-reservation-management-radio-group .radio-label {
    border: 1px solid #AAAAAC;
    background-color: #ffffff;
    padding: 5px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.825rem;
    transition: all 0.2s ease;
    color: #AAAAAC;
    display: inline-block;
    text-align: center;
}


.custom-store-reservation-management-radio-group input[type="radio"]:checked + .radio-label {
    background-color: #7D40A0;
    color: #ffffff;
}


/* ------------------------------------------------------------------------------------------------------------------ */
/* 予約詳細モーダル */

#custom-store-reservation-management-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

#custom-store-reservation-management-modal, 
#custom-store-reservation-management-modal * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.custom-store-reservation-management-modal-content {
    width: 100%;
    max-width: 600px;
    height: 100dvh;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    font-weight: 500;
    background: #fff;
}

.csrm-reservation-details-content {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.csrm-reservation-details-content::-webkit-scrollbar {
    display: none;
}

.csrm-reservation-details-content-top {
    background: #fff;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 40px;
}


.csrm-reservation-details-content-bottom {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 40px;
    background: #F5F5F5;
    margin-top: -108px;
    padding-top: 108px;
}

.csrm-status-message {
    color: #535353;
    font-size: 0.875rem;
    margin-top: 10px;
}

.csrm-user-info-wrapper {
    padding-right: 20px;
    padding-left: 20px;
}

.csrm-user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    border: solid 1px #AAAAAC;
    background: #fff;
    border-radius: 10px;
    margin-top: 40px;
    padding: 20px;
    height: 216px;
    position: relative;
}

.csrm-therapist-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    border: solid 1px #AAAAAC;
    background: #fff;
    border-radius: 10px;
    margin-top: 40px;
    padding: 20px;
    position: relative;
}

.csrm-user-img-and-name {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    gap: 10px;
    padding-bottom: 20px;
    border-bottom: solid 1px #AAAAAC;
    margin-bottom: 20px;
}

.csrm-user-img-and-name img {
    height: 80px;
    width: 80px;
    border-radius: 50%;
    object-fit: cover;

}

.csrm-user-name {
    font-size: 1rem;
    color: #535353;
}

.csrm-reservation-details-page-external-user-name-and-phone {
    color: #535353;
}

.csrm-reservation-details-page-user-name {
    font-size: 1rem;
}

.csrm-reservation-details-page-external-user-phone {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.csrm-reservation-details-page-external-user-phone img {
    width: 25px;
    height: auto;
}

.csrm-reservation-details-page-user-phone-number {
    font-size: 0.875rem;
}

.csrm-user-btn-content {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
}


.csrm-user-info-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.875rem;
    color: #7D40A0;
    width: 70px;
}

.csrm-user-info-button img {    
    height: 30px;
    width: auto;
}

.csrm-therapist-info-button,
.csrm-talk-to-therapist-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.875rem;
    color: #7D40A0;
    width: 100px;
}

.csrm-therapist-info-button img,
.csrm-talk-to-therapist-button img {    
    height: 30px;
    width: auto;
}

.csrm-sharing-matter-info {
    margin-bottom: 20px;
    border-radius: 10px;
    padding: 10px;
    width: 100%;
    background: #F5F5F5;
    display: none;
}

.csrm-sharing-matter-title {
    font-size: 0.875rem;
    color: #7D40A0;
}

.csrm-sharing-matter {
    box-sizing: border-box;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: hidden;
    font-size: 0.875rem;
    color: #535353;
}

.csrm-datetime-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 40px;
    gap: 20px;
    align-items: stretch;
}

.csrm-start-datetime-info,
.csrm-end-datetime-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.875rem;
    border-radius: 10px;
    padding: 10px 10px;
    background: #fff;
    width: 100%;
}

.csrm-start-datetime-info-title,
.csrm-end-datetime-info-title {
    background: #7D40A0;
    color: #fff;
    font-size: 1rem;
    width: 90%;
    max-width: 155px;
    height: 30px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.csrm-start-datetime,
.csrm-end-datetime {
    font-size: 1rem;
    color: #535353;
    text-align: center;
}

.csrm-reservation-details-datetime-change-button {
    font-size: 0.875rem;
    color: #E9528D;
    background: #fff;
    width: 70px;
    height: 30px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: solid 1px #E9528E;
    border-radius: 25px;
    margin-top: 5px;
    display: none;
}

.csrm-reservation-details-datetime-change-button img  {
    height: 20px;
    width: auto;
    margin-top: 2px;
}

.csrm-meeting-place-info,
.csrm-outfit-description-info,
.csrm-schedule-adjusted-info,
.csrm-question-info {
    border-radius: 10px;
    padding: 10px;
    background: #fff;
    width: 100%;
    margin-top: 20px;
}

.csrm-meeting-place-title,
.csrm-outfit-description-title,
.csrm-schedule-adjusted-title,
.csrm-question-title {
    font-size: 1rem;
    color: #7D40A0;
}

.csrm-question,
.csrm-outfit-description,
.csrm-meeting-place,
.csrm-schedule-adjusted {
    box-sizing: border-box;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: hidden;
    font-size: 1rem;
    color: #535353;
}

.csrm-receipt {
    padding: 10px;
    border-radius: 10px;
    background-color: #fff;
    margin-top: 20px;
    color: #535353;
}

.csrm-receipt-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.csrm-receipt-item-title {
    width: 50%;
    text-align: left;
    font-size: 1rem;
    color: #7D40A0;
    white-space: nowrap;
    overflow: hidden;
}

.csrm-receipt-item-price-and-reason {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.csrm-receipt-item-price {
    color: #535353;
    text-align: right;
    font-size: 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.csrm-receipt-item-reason {
    font-size: 0.875rem;
    color: #535353;
}

.csrm-receipt-total {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 2px solid #E1E1E1;
}

.csrm-receipt-total-title-with-btn {
    display: flex;
    flex-direction: column;
    width: 30%;
}

.csrm-receipt-total-title {
    font-size: 1rem;
    color: #7D40A0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
}

.csrm-receipt-total-price-and-explanation {
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.csrm-receipt-total-price {
    color: #E9528E;
    text-align: right;
    font-size: 1.5rem;
}

.csrm-receipt-total-explanation {    
    font-size: 0.875rem;
    color: #535353;
    text-align: left;
}

.csrm-receipt-payment-method {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 2px solid #E1E1E1;
}

.csrm-receipt-payment-method-title {
    font-size: 1rem;
    color: #7D40A0;
    text-align: left;
    width: 30%;
    white-space: nowrap;
    overflow: hidden;
}

.csrm-receipt-payment-method-detail-with-btn {
    display: flex;
    flex-direction: column;
    width: 70%;
    align-items: flex-end;
}

.csrm-receipt-payment-method-detail {
    color: #535353;
    text-align: right;
    font-size: 1rem;
}

.csrm-course-change-button img,
.csrm-transport-change-button img,
.csrm-designation-change-button img,
.csrm-option-change-button img,
.csrm-add-price-change-button img,
.csrm-payment-method-change-button img,
.csrm-add-price-after-start-change-button img,
.csrm-payment-method-after-start-change-button img {
    height: 20px;
    width: auto;
    display: none;
}

.csrm-add-course-footer {
    position: relative;
    height: 40px;
    display: none;
}

.csrm-add-course-footer::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    border-top: 1px dashed #CCCCCC;
    transform: translateY(-50%);
    z-index: 0;
}

.csrm-add-course-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    color: #E9528E;
    font-size: 0.875rem;
    border: solid 1px #E9528E;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    flex-direction: row;
    width: 120px;
    height: 30px;
    gap: 5px;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.csrm-add-course-button img {
    height: 15px;
    width: auto;
}

.csrm-add-price-footer {
    position: relative;
    height: 40px;
    display: none;
}

.csrm-add-price-footer::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    border-top: 1px dashed #CCCCCC;
    transform: translateY(-50%);
    z-index: 0;
}

.csrm-add-price-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    color: #E9528E;
    font-size: 0.875rem;
    border: solid 1px #E9528E;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    flex-direction: row;
    width: 120px;
    height: 30px;
    gap: 5px;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.csrm-add-price-button img {
    height: 15px;
    width: auto;
}

.csrm-add-price-after-start-footer {
    position: relative;
    height: 40px;
    display: none;
}

.csrm-add-price-after-start-footer::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    border-top: 1px dashed #CCCCCC;
    transform: translateY(-50%);
    z-index: 0;
}

.csrm-add-price-after-start-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    color: #E9528E;
    font-size: 0.875rem;
    border: solid 1px #E9528E;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    flex-direction: row;
    width: 120px;
    height: 30px;
    gap: 5px;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.csrm-add-price-after-start-button img {
    height: 15px;
    width: auto;
}

.csrm-reservation-details-irregular-btn-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
}

.csrm-reservation-details-cancelled-button {
    width: 200px;
    font-size: 1rem;
    background: #AAAAAC;
    color: #fff;
    height: 40px;
    border-radius: 40px;
    display: none;
}

.csrm-reservation-details-pending-button {
    width: 200px;
    font-size: 1rem;
    background: #FFA000;
    color: #fff;
    height: 40px;
    border-radius: 40px;
    margin-top: 20px;
    display: none;
}

.csrm-reservation-details-confirm-button {
    width: 200px;
    font-size: 1rem;
    background: #1976D2;
    color: #fff;
    height: 40px;
    border-radius: 40px;
    margin-top: 20px;
    display: none;
}

.csrm-reservation-details-btn-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 10px;
}

.csrm-reservation-details-back-button {
    width: 150px;
    height: 40px;
    background-color: #AAAAAC;
    border: none;
    border-radius: 40px;
    color: #fff;
    font-size: 0.875rem;
    cursor: pointer;
    position: relative;
}

.csrm-reservation-details-status-update-button {
    width: 150px;
    height: 40px;
    background-color: #E9528E;
    border: none;
    border-radius: 40px;
    color: #fff;
    font-size: 0.875rem;
    cursor: pointer;
    position: relative;
    display: none;
}



/* ------------------------------------------------------------------------------------------------------------------ */
/* 各ステータス予約一覧画面 */


.store-pending-reservations-page,
.store-confirmed-reservations-page,
.store-cancelled-reservations-page,
.store-store-confirmed-reservations-page {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    background: #fff;
}

.store-pending-reservations-page, 
.store-pending-reservations-page *,
.store-confirmed-reservations-page, 
.store-confirmed-reservations-page *,
.store-cancelled-reservations-page, 
.store-cancelled-reservations-page *,
.store-store-confirmed-reservations-page, 
.store-store-confirmed-reservations-page * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.store-pending-reservations-page-content,
.store-confirmed-reservations-page-content,
.store-cancelled-reservations-page-content,
.store-store-confirmed-reservations-page-content {
    height: 100%;
    overflow-y: auto;
}

.store-reservations-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    z-index: 10;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

@media screen and (min-width: 1024px) {
    
    .store-reservations-page-header {
        left: unset;
        right: 13.0208333333%;
        width: min(100%, 26.875rem);
    }
        
}

.store-reservations-page-header-btn {
    width: 50px;
    font-size: 0.875rem;
    color: #535353;
    cursor: pointer;
    border: none;
}

.store-pending-reservations-table-content,
.store-confirmed-reservations-table-content,
.store-cancelled-reservations-table-content {
    flex: 1;
    overflow-y: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.store-store-confirmed-reservations-table-content {
    flex: 1;
    overflow-y: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.csrm-no-reservations{
    text-align: center;
    font-size: 1rem;
    color: #AAAAAC;
    margin: 40px 0;
}

.csrm-no-upcoming-reservations,
.csrm-no-past-reservations {
    text-align: center;
    font-size: 1rem;
    color: #AAAAAC;
}

.csrm-store-reservation-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.csrm-reservation-card {
    border-radius: 16px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 300px;
    max-width: 500px;
    width: 100%;
    border-top: 1px solid #AAAAAC;
    border-right: 1px solid #AAAAAC;
    border-bottom: 1px solid #AAAAAC;
    margin-bottom: 20px;
}

.csrm-pending-reservation-card {
    border-left: 8px solid #FFA000;
}

.csrm-confirmed-reservation-card {
    border-left: 8px solid #1976D2;
}

.csrm-store-confirmed-reservation-card {
    border-left: 8px solid #4CAF50;
}

.csrm-cancelled-reservation-card {
    border-left: 8px solid #AAAAAC;
}

.csrm-reservation-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #535353;
    margin-bottom: 10px;
    border-bottom: 1px solid #AAAAAC;
    padding-bottom: 10px;
}

.csrm-reservation-card-reservation-id {
    color: #E9528E;
    font-size: 1.125rem;
}

.csrm-reservation-card-header-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.csrm-reservation-card-reservation-date {
    font-size: 1rem;
    color: #535353;
}

.csrm-reservation-card-reservation-route {
    font-size: 0.75rem;
    color: #535353;
}

.csrm-reservation-card-cancelled-reason {
    font-size: 0.75rem;
    color: #E9528E;
}

.csrm-reservation-card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.csrm-reservation-card-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.csrm-reservation-card-user-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.csrm-reservation-card-user-name {
    font-size: 1rem;
    color: #535353;
    white-space: nowrap;
    overflow: hidden;
}

.csrm-reservation-upcoming-label,
.csrm-reservation-history-label {
    display: inline-block;
    font-size: 1rem;
    color: #7D40A0;
    text-align: center;
    border-bottom: solid 1px #7D40A0;
    width: 100%;
    margin-top: 40px;
    margin-bottom: 20px;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* リスケジュールモーダル */

.reservation-reschedule-for-store-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1010;
}

.reservation-reschedule-for-store-modal, 
.reservation-reschedule-for-store-modal * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.reservation-reschedule-for-store-content {
    background: #fff;
    width: 100%;
    max-width: 600px;
    height: 100dvh;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    padding-left: 20px;
    padding-right: 20px;
}


.csrm-reservation-details-datetime-change-button {
    font-size: 0.875rem;
    color: #E9528D;
    background: #fff;
    width: 70px;
    height: 30px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: solid 1px #E9528E;
    border-radius: 25px;
    margin-top: 5px;
    display: none;
}

.csrm-reservation-details-datetime-change-button img  {
    height: 20px;
    width: auto;
    margin-top: 2px;
}

.csrm-reservation-details-back-reschedule-button {
    width: 150px;
    height: 40px;
    background-color: #AAAAAC;
    border: none;
    border-radius: 40px;
    color: #fff;
    font-size: 0.875rem;
    cursor: pointer;
    position: relative;
}

.csrm-reservation-details-reschedule-button {
    width: 150px;
    height: 40px;
    background-color: #E9528E;
    border: none;
    border-radius: 40px;
    color: #fff;
    font-size: 0.875rem;
    cursor: pointer;
    position: relative;
}


/* -------------------------------------------------------------------------------------- */
/* 予約 */

.custom-therapist-reservation-button {
    background-color: rgba(233, 81, 142);
    color: #fff;
    border-radius: 100px;
    font-size: 1rem;
    width: 298px;
    height: 48px;
    position: relative;
}

.custom-therapist-reservation-button::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 20px;
    width: 7px;
    height: 7px;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}

.custom-therapist-reservation-button:disabled {
    background-color: #AAAAAC;
    cursor: not-allowed;
}

.custom-therapist-reservation-button::after {
    content: 'ポイントが使える! たまる!';
    position: absolute;
    top: -13px;
    right: 50%;
    transform: translateX(50%);
    background: #fff;
    color: #E9528E;
    border: solid 1px #E9528E;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 10px;
    white-space: pre;
}


.custom-therapist-reservation-button-lite {
    background-color: #7D40A0;
}

.custom-therapist-reservation-button-lite::after {
    display: none;
}

.custom-therapist-reservation-button-standard {
    margin-top: 12px;
}

#therapist-reservation-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px !important;
    width: 100%;
}

#weekly-schedule-shortcode {
    width: 100%;
    margin-bottom: 2.5rem;
}

/* 予約フォーム */
/* -------------------------------------------------------------------------------------- */
/* コース選択モーダル */

.custom-therapist-reservation-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.custom-therapist-reservation-modal, 
.custom-therapist-reservation-modal * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.custom-therapist-reservation-modal-content {
    background: #ffffff;
    width: 100%;
    max-width: 600px;
    height: 100dvh;
    margin: 0 auto;
    box-sizing: border-box;
    font-family: 'Noto Sans JP', sans-serif;
    overflow: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 100;
    padding-left: 20px;
    padding-right: 20px;
    font-weight: 500;
}

.custom-therapist-reservation-btn-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 10px;
}

.custom-therapist-reservation-back-button,
.custom-therapist-reservation-cancell-button {
    width: 150px;
    height: 40px;
    background-color: #AAAAAC;
    border: none;
    border-radius: 40px;
    color: #fff;
    font-size: 0.875rem;
    cursor: pointer;
    position: relative;
}

.custom-therapist-reservation-back-button::before,
.custom-therapist-reservation-cancell-button::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    left: 10px;
    width: 7px;
    height: 7px;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
}

.custom-therapist-reservation-submit-button {
    width: 150px;
    height: 40px;
    background-color: #E9528E;
    border: none;
    border-radius: 40px;
    color: #fff;
    font-size: 0.875rem;
    cursor: pointer;
    position: relative;
}

.custom-therapist-reservation-submit-button--standard {
    background-color: #E9528E;
}

.custom-therapist-reservation-submit-button--lite {
    background-color: #7D40A0;
}

.custom-therapist-reservation-submit-button::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 10px;
    width: 7px;
    height: 7px;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}

.custom-therapist-reservation-price-form-group {
    margin-top: 20px;
    padding: 5px;
    border: 2px solid #E9528E;
    border-radius: 6px;
    width: 200px;
}

.custom-therapist-reservation-form-group {
    width: 100%;
    margin-top: 40px;
}

.custom-therapist-reservation-form-group label {
    font-size: 1rem;
    color: #7D40A0;
    text-align: center;
    border-bottom: solid 1px #7D40A0;
    width: 100%;
}

.custom-therapist-reservation-required-badge {
    background-color: #E9518E;
    white-space: nowrap;
    border-radius: 10px;
    font-size: 0.75rem;
    margin-left: 5px;
    display: inline-block;
    color: #ffffff;
    width: 40px;
    margin-bottom: 2px;
}

.custom-therapist-reservation-not-required-badge {
    background-color: #AAAAAC;
    white-space: nowrap;
    border-radius: 10px;
    font-size: 0.75rem;
    margin-left: 5px;
    display: inline-block;
    color: #ffffff;
    width: 40px;
    margin-bottom: 2px;
}

.custom-therapist-reservation-form-group input[type="checkbox"] {
    margin-right: 8px;
    transform: scale(1.2);
    cursor: pointer;
    display: inline-block;
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: checkbox;
    background: initial;
    border: initial;
    width: auto;
    height: auto;
}

/* 料金表示のスタイル */
#total-price,
#total-price-options,
#final-total-price {
    font-size: 0.875rem;
    color: #535353;
    margin-left: 10px;
}

#weekly-schedule-controls {
    text-align: center;
    margin-top: 20px;
    color: #535353;
}

.week-nav-button {
    background-color: #7D40A0;
    color: #fff;
    padding: 6px 12px;
    margin: 0 10px;
    border-radius: 4px;
}

.week-nav-button:disabled {
    background-color: #AAAAAC;
    color: #fff;
    cursor: not-allowed;
}

#month-year,
#month-year-for-reschedule {
    font-size: 0.875rem;
}

.custom-therapist-reservation-form-group input[type="date"],
.custom-therapist-reservation-form-group select,
.custom-therapist-reservation-form-group input {
    border: none !important;
    background-color: #F5F5F5 !important;
    width: 100% !important;
    color: #535353 !important;
    border-radius: 1.5625rem !important;
    font-size: 0.875rem !important;
    margin-top: 1.25rem !important;
    padding: 0.8125rem !important;
}

#custom-therapist-reservation-form {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
    align-items: center;
}

#weekly-schedule {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    margin-top: 10px;
    width: 100%;
}

.custom-therapist-reservation-weekly-schedule {
    overflow-y: auto;
    overscroll-behavior-y: none;
    overflow-x: hidden;
    max-height: 100%;
    position: relative;
    border-top: solid 1px #535353;
}

.custom-therapist-reservation-weekly-schedule-shortcode {
    overflow-y: auto;
    overscroll-behavior-y: none;
    overflow-x: hidden;
    height: 50vh;
    position: relative;
    padding-right: 0 !important;
    border-top: solid 1px #535353;
}

.custom-therapist-reservation-weekly-schedule table,
.custom-therapist-reservation-weekly-schedule-shortcode table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.custom-therapist-reservation-weekly-schedule table .status-available,
.custom-therapist-reservation-weekly-schedule-shortcode table .status-available {
    background-color: #9E6CBB;
}

.custom-therapist-reservation-weekly-schedule thead th,
.custom-therapist-reservation-weekly-schedule-shortcode thead th {
    position: sticky;
    top: 0;
    background-color: #535353;
    z-index: 2;
    border: 1px solid #535353;
    text-align: center;
    color: #fff;
    font-weight: 500;
    font-size: 0.875rem;
    padding: 2px;
    line-height: 1.2;
}

.custom-therapist-reservation-empty-cell {
    background-color: #F5F5F5 !important;
    font-size: 14px !important;
    color: #535353 !important;
    width: 50px;
    min-width: 50px;
    max-width: 50px;
}

.custom-therapist-reservation-weekly-schedule tbody td,
.custom-therapist-reservation-weekly-schedule-shortcode tbody td{
    border: 1px solid #535353;
    padding: 2px;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 500;
    word-wrap: break-word;
    height: 20px;
    color: #fff;
    background-color: #9E6CBB;
}

.custom-therapist-reservation-weekly-schedule th,
.custom-therapist-reservation-weekly-schedule-shortcode th {
    background-color: #f2f2f2;
    color: #333;
}

.custom-therapist-reservation-weekly-schedule td.available,
.custom-therapist-reservation-weekly-schedule td.unavailable,
.custom-therapist-reservation-weekly-schedule-shortcode td.available,
.custom-therapist-reservation-weekly-schedule-shortcode td.unavailable {
    font-size: 0.875rem;
    font-weight: 500;
}

.custom-therapist-reservation-weekly-schedule td.available,
.custom-therapist-reservation-weekly-schedule-shortcode td.available {
    font-size: 0.75rem;
    font-weight: 500;
    background-color: #F3E7FD;
    cursor: pointer;
    color: #9E6CBB;
}

.custom-therapist-reservation-weekly-schedule td.unavailable,
.custom-therapist-reservation-weekly-schedule-shortcode td.unavailable {
    background-color: #fff;
    color: #535353;
}

.custom-therapist-reservation-weekly-schedule td.reserved {
    color: #fff;
    font-size: 0.875rem;
    font-weight: 200;
}

.custom-therapist-reservation-weekly-schedule td.reserved--pending {
    background-color: #FFA000;
}

.custom-therapist-reservation-weekly-schedule td.reserved--confirmed {
    background-color: #1976D2;
}

.custom-therapist-reservation-weekly-schedule td.reserved--store_confirmed {
    background-color: #4CAF50;
}

.custom-therapist-reservation-weekly-schedule td.highlight,
.custom-therapist-reservation-weekly-schedule-shortcode td.highlight {
    background-color: #F3E7FD;
    color: #9E6CBB;
}

.custom-therapist-reservation-weekly-schedule td.disabled,
.custom-therapist-reservation-weekly-schedule-shortcode td.disabled {
    background-color: #F5F5F5;
    color: #535353;
    cursor: not-allowed;
    position: relative;
}

.custom-therapist-reservation-weekly-schedule td.selected,
.custom-therapist-reservation-weekly-schedule-shortcode td.selected {
    background-color: #7D40A0;
    color: #fff;
}

.custom-therapist-reservation-weekly-schedule tbody td.status-empty,
.custom-therapist-reservation-weekly-schedule-shortcode tbody td.status-empty {
    color: #535353 !important;
    background-color: #F5F5F5 !important;
}

.custom-therapist-reservation-weekly-schedule-lite-shortcode {
  display: grid;
  gap: 10px;
  width: 100%;
  font-size: 1rem;
  color: #535353;
}

.custom-therapist-reservation-weekly-schedule-lite-shortcode .ctrw-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #AAAAAC;
  border-radius: 10px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.custom-therapist-reservation-weekly-schedule-lite-shortcode .ctrw-date {
  font-weight: bold;
}

.custom-therapist-reservation-weekly-schedule-lite-shortcode .ctrw-item.is-today .ctrw-date {
  color: #E9528E;
}

.custom-therapist-reservation-weekly-schedule-lite-shortcode .ctrw-time {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.custom-therapist-reservation-weekly-schedule-lite-shortcode .ctrw-time:empty::after {
  content: '—';
  color: #AAAAAC;
}

/* -------------------------------------------------------------------------------------- */
/* オプション選択モーダル */

#custom-therapist-reservation-options-form {
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.custom-therapist-reservation-options-form-group {
    width: 100%;
    padding-top: 40px;
    flex: 1;
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.custom-therapist-reservation-options-form-group::-webkit-scrollbar {
    display: none;
}

.custom-therapist-reservation-options-form-group label {
    font-size: 1rem;
    color: #7D40A0;
    text-align: center;
    border-bottom: solid 1px #7D40A0;
    width: 100%;
}

.custom-therapist-reservation-options-form-sub-group {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}

.reservation-no-options-container {
    width: 150px;
}

#reservation-options-container {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 10px;
    padding-top: 10px;
    border-radius: 4px;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#reservation-options-container input[type="checkbox"],
.reservation-no-options-container input[type="checkbox"] {
    display: none;
}

/* ラベルのスタイル */
#reservation-options-container label,
.reservation-no-options-container label {
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.875rem;
    min-width: 60px;
    transition: all 0.2s ease;
    border: 1px solid #AAAAAC;
    background-color: #ffffff;
    color: #AAAAAC;
}

#reservation-options-container input[type="checkbox"]:checked + label,
.reservation-no-options-container input[type="checkbox"]:checked + label {
    background-color: #7D40A0;
    color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.no-options-message {
    font-size: 0.875rem;
    margin: 0 auto;
    color: #AAAAAC;
}

.options-info-message {
    font-size: 0.75rem;
    color: #535353;
}



/* -------------------------------------------------------------------------------------- */
/* 詳細選択モーダル */


#custom-therapist-reservation-confirmation-form {
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.custom-therapist-reservation-confirmation-form-group {
    width: 100%;
    padding-top: 40px;
    flex: 1;
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.custom-therapist-reservation-confirmation-form-group::-webkit-scrollbar {
    display: none;
}

.custom-therapist-reservation-confirmation-form-group label {
    font-size: 1rem;
    color: #7D40A0;
    text-align: center;
    border-bottom: solid 1px #7D40A0;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
}

.custom-therapist-reservation-confirmation-form-sub-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 40px;
}

#transport-info-message,
#designation-info-message,
#schedule-info-message,
#max-points-message {
    font-size: 0.75rem !important;
    color: #535353;
    margin-top: 20px;
}

#cash-payment-info,
#credit-card-payment-info {
    display:none;
    font-size: 0.75rem;
    color: #535353;
}

#payment-info-message {
    display:none;
    font-size: 0.75rem;
    color: #535353;
    margin-top: 10px;
}

.transport-info-message-note,
.designation-info-message-note,
.max-points-message-note {
    font-size: 0.75rem;
    color: #535353;
}

#contact-info-message {
    color: #535353;
    font-size: 0.75rem;
    margin-top: 1.25rem;
}

#custom-therapist-reservation-confirmation-modal .radio-group {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    width: 230px;
}

#custom-therapist-reservation-confirmation-modal .radio-group input[type="radio"] {
    display: none;
}

#custom-therapist-reservation-confirmation-modal .radio-group .radio-label {
    background-color: #ffffff;
    border: 1px solid #AAAAAC;
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.875rem;
    min-width: 60px;
    transition: all 0.2s ease;
    color: #AAAAAC;
    display: inline-block;
    text-align: center;
}

#custom-therapist-reservation-confirmation-modal .radio-group input[type="radio"]:checked + .radio-label {
    background-color: #7D40A0;
    color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

#custom-therapist-reservation-confirmation-modal .designation-option {
    width: 100%;
    margin-top: 10px;
}

#custom-therapist-reservation-confirmation-modal .designation-option .radio-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 16px;
    border-radius: 16px;
}

#custom-therapist-reservation-confirmation-modal .designation-option .radio-label br {
    margin-bottom: 5px;
}

#custom-therapist-reservation-confirmation-modal .designation-counter {
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

#custom-therapist-reservation-confirmation-modal .designation-counter button {
    -webkit-tap-highlight-color: transparent;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    border: 1px solid #AAAAAC;
    background: #fff;
    color: #7D40A0;
    font-size: 1.125rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, transform .06s ease, box-shadow .2s ease, color .2s ease;
    box-sizing: border-box;
}

#custom-therapist-reservation-confirmation-modal .designation-counter button:hover{
    background: #F3E7FD; 
    border-color: #7D40A0;
}

#custom-therapist-reservation-confirmation-modal .designation-counter button:active {
    transform: scale(0.96);
}

#custom-therapist-reservation-confirmation-modal 
.designation-option input[type="radio"]:checked + .radio-label .designation-counter button {
    background-color: #ffffff;
    color: #7D40A0;
}

#custom-therapist-reservation-confirmation-modal .designation-count-display {
    min-width: 2.25rem;
    text-align: center;
    font-weight: 500;
    font-size: 1rem;
}

.custom-therapist-reservation-confirmation-form-sub-group input,
.custom-therapist-reservation-confirmation-form-sub-group select {
    font-size: 0.875rem;
    padding: 13px;
    border: none;
    border-radius: 25px;
    background-color: #F5F5F5;
    width: 100%;
    color: #535353;
    margin-top: 20px;
}

.custom-therapist-reservation-agree-checkbox-group {
    display: flex;
    justify-content: center;
    font-size: 0.75rem;
    color: #535353;
    margin-top: 10px;
}

.custom-therapist-reservation-agree-checkbox-group a {
    color: #7D40A0;
    text-decoration: underline;
}

.custom-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.custom-checkbox input[type="checkbox"] {
    display: none; /* デフォルト非表示 */
}

.custom-checkbox .checkmark {
    width: 16px;
    height: 16px;
    border: 2px solid #AAAAAC;
    border-radius: 3px;
    margin-right: 5px;
    box-sizing: border-box;
    position: relative;
    flex-shrink: 0;
}

.custom-checkbox input[type="checkbox"]:checked + .checkmark {
    background-color: #E9518E;
    border-color: #E9518E;
}

.custom-checkbox .checkmark::after {
    content: "";
    position: absolute;
    display: none;
    left: 4px;
    top: 0px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.custom-checkbox input[type="checkbox"]:checked + .checkmark::after {
    display: block;
}

.no-transport-price-message {
    font-size: 0.875rem;
    margin: 0 auto;
    color: #AAAAAC;
    text-align: center;
    margin-top: 20px;
}

.no-designation-message {
    font-size: 0.875rem;
    margin: 0 auto;
    color: #AAAAAC;
    text-align: center;
    margin-top: 20px;
}

.line-link-guide {
  display: inline-block;
  font-size: 0.875rem;
  color: #AAAAAC;
  text-decoration: underline;
  cursor: pointer;
  text-align: right;
  margin-top: 5px;
  display: none;
}


.contact-within-therame-line {
    display: flex;
    align-items: center;
    text-align: center;
    color: #535353;
    font-size: 0.875rem;
    margin: 20px 0;
    justify-content: center;
}

.contact-within-therame-line::before,
.contact-within-therame-line::after {
    content: "";
    flex: none;
    width: 80px;
    border-bottom: 1px solid #AAAAAC;
    margin: 0 10px;
}

.contact-within-therame{
    font-size: 0.875rem;
    text-align: center;
    color: #535353;
}

#points-section .points-mode-group {
    margin-top: 0.625rem;
}

#points-mode-coupon {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

#apply-coupon-button {
    color: #7D40A0;
    border: solid 1px #7D40A0;
    background: #fff;
    border-radius: 1.25rem;
    font-size: 0.875rem;
    min-width: 5rem;
    padding: 0.5rem 0.9375rem;
    margin-top: 0.625rem;
}

#coupon-apply-message {
    color: #535353;
    font-size: 0.875rem;
    margin-top: 0.625rem;
}



/* -------------------------------------------------------------------------------------- */
/* 最終確認モーダル */

.custom-therapist-reservation-modal-content-for-final {
    background: #ffffff;
    width: 100%;
    max-width: 600px;
    height: 100dvh;
    margin: 0 auto;
    box-sizing: border-box;
    font-family: 'Noto Sans JP', sans-serif;
    overflow: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 100;
    font-weight: 500;
}

.custom-therapist-reservation-final-confirmation-form {
    overflow-y: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#reservation-details {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

#reservation-details::-webkit-scrollbar {
    display: none;
}

.custom-therapist-reservation-final-confirmation-form-top {
    padding-left: 20px;
    padding-right: 20px;
    background: #fff;
    padding-top: 40px;
}

.custom-therapist-reservation-final-confirmation-form-bottom {
    padding-left: 20px;
    padding-right: 20px;
    background: #F5F5F5;
    padding-bottom: 40px;
    margin-top: -60px;
    padding-top: 60px;
}

.confirmation-modal-status-message {
    color: #535353;
    font-size: 0.875rem;
    margin-top: 10px;
}

.ctr-reservation-details-page-therapist-info-wrapper {
    padding-right: 20px;
    padding-left: 20px;
}

.ctr-reservation-details-page-therapist-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    border: solid 1px #AAAAAC;
    background: #fff;
    border-radius: 10px;
    margin-top: 40px;
    padding: 20px;
    gap: 10px;
    height: 120px;
    position: relative;
}

.ctr-reservation-details-page-therapist-info img {
    height: 80px;
    width: 80px;
    border-radius: 50%;
    object-fit: cover;

}

.ctr-reservation-details-page-therapist-and-store {
    color: #535353;
}

.ctr-reservation-details-page-therapist-name {
    font-size: 1rem;
}

.ctr-reservation-details-page-store-name {
    font-size: 0.875rem;
}

.ctr-reservation-details-page-user-info-wrapper {
    padding-right: 20px;
    padding-left: 20px;
}

.ctrm-reservation-details-page-external-user-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    border: solid 1px #AAAAAC;
    background: #fff;
    border-radius: 10px;
    margin-top: 40px;
    padding: 20px;
    gap: 10px;
    position: relative;
}

.ctrm-reservation-details-page-external-user-info img {
    height: 80px;
    width: 80px;
    border-radius: 50%;
    object-fit: cover;

}

.ctrm-reservation-details-page-external-user-name-and-phone {
    color: #535353;
}

.ctrm-reservation-details-page-user-name {
    font-size: 1rem;
}

.ctrm-reservation-details-page-external-user-phone {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.ctrm-reservation-details-page-external-user-phone img {
    width: 25px;
    height: auto !important;
}

.ctrm-reservation-details-page-user-phone-number {
    font-size: 0.875rem;
}

.ctr-reservation-details-page-datetime-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 40px;
    gap: 20px;
}

.ctr-reservation-details-page-start-datetime-info,
.ctr-reservation-details-page-end-datetime-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.875rem;
    border-radius: 10px;
    padding: 10px 10px;
    background: #fff;
    width: 100%;
}

.ctr-reservation-details-page-start-datetime-info-title,
.ctr-reservation-details-page-end-datetime-info-title {
    background: #7D40A0;
    color: #fff;
    font-size: 1rem;
    width: 90%;
    max-width: 155px;
    height: 30px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ctr-reservation-details-page-start-datetime,
.ctr-reservation-details-page-end-datetime {
    font-size: 1rem;
    color: #535353;
    text-align: center;
}

.ctr-reservation-details-page-meeting-place-info, 
.ctr-reservation-details-page-outfit-description-info, 
.ctr-reservation-details-page-schedule-adjusted-info, 
.ctr-reservation-details-page-question-info,
.ctr-reservation-details-page-outfit-description-info {
    border-radius: 0.625rem;
    padding: 0.625rem;
    background: #fff;
    width: 100%;
    margin-top: 1.25rem;
}

.ctr-reservation-details-page-meeting-place-title, 
.ctr-reservation-details-page-outfit-description-title, 
.ctr-reservation-details-page-schedule-adjusted-title, 
.ctr-reservation-details-page-question-title,
.ctr-reservation-details-page-contact-title {
    font-size: 1rem;
    color: #7D40A0;
}

.ctr-reservation-details-page-question, 
.ctr-reservation-details-page-outfit-description, 
.ctr-reservation-details-page-meeting-place, 
.ctr-reservation-details-page-schedule-adjusted,
.ctr-reservation-details-page-contact {
    box-sizing: border-box;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: hidden;
    font-size: 1rem;
    color: #535353;
}

.ctr-reservation-details-page-contact {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.ctr-reservation-details-page-contact-type {
  color: #535353;
  font-size: 1rem;
}

.ctr-reservation-details-page-contact-value {
  color: #535353;
  font-size: 1rem;
  word-break: break-all;
}

.ctr-reservation-details-page-receipt {
    padding: 10px;
    border-radius: 10px;
    background-color: #fff;
    margin-top: 20px;
    color: #535353;
}

.ctr-reservation-details-page-receipt .ctr-receipt-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.ctr-reservation-details-page-receipt .ctr-receipt-item-title {
    width: 50%;
    text-align: left;
    font-size: 1rem;
    color: #7D40A0;
    white-space: nowrap;
    overflow: hidden;
}

.ctr-reservation-details-page-receipt .ctr-receipt-item-price-and-reason {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.ctr-reservation-details-page-receipt .ctr-receipt-item-price {
    color: #535353;
    text-align: right;
    font-size: 1rem;
}

.ctr-reservation-details-page-receipt .ctr-receipt-total {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 2px solid #E1E1E1;
}

.ctr-reservation-details-page-receipt .ctr-receipt-total-title {
    font-size: 1rem;
    color: #7D40A0;
    text-align: left;
    width: 30%;
    white-space: nowrap;
    overflow: hidden;
}

.ctr-reservation-details-page-receipt .ctr-receipt-total-price-and-explanation {
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.ctr-reservation-details-page-receipt .ctr-receipt-total-price {
    color: #E9528E;
    text-align: right;
    font-size: 1.5rem;
}

.ctr-reservation-details-page-receipt .ctr-receipt-total-explanation {
    font-size: 10px;
    color: #535353;
    text-align: left;
}

.ctr-reservation-details-page-receipt .ctr-receipt-payment-method {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 2px solid #E1E1E1;
}

.ctr-reservation-details-page-receipt .ctr-receipt-payment-method-title {
    font-size: 1rem;
    color: #7D40A0;
    text-align: left;
    width: 30%;
    white-space: nowrap;
    overflow: hidden;
}

.ctr-reservation-details-page-receipt .ctr-receipt-payment-method-detail {
    color: #535353;
    text-align: right;
    font-size: 1rem;
    width: 70%;
}

.custom-therapist-reservation-confirmation-schedule-adjusted-content {
    margin-top: 10px;
}

.custom-therapist-reservation-confirmation-payment-method-content {
    margin-top: 10px;
}






#custom-therapist-reservation-confirmation-modal .custom-therapist-reservation-submit-button {
    width: 150px;
    height: 40px;
    background-color: #AAAAAC;
    border: none;
    border-radius: 40px;
    color: #fff;
    font-size: 0.875rem;
    cursor: pointer;
    position: relative;
}

#custom-therapist-reservation-confirmation-modal .custom-therapist-reservation-submit-button.enabled {
    background-color: rgb(233, 81, 142);
}


#custom-therapist-reservation-review-modal .custom-therapist-reservation-modal-content h2 {
    font-size: 20px;
    color: #333;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    border-radius: 4px;
}

#custom-therapist-reservation-review-modal .custom-therapist-reservation-form-group {
    display: flex;
    flex-direction: column;
    border-radius: 0px;
    gap: 3px;
}

#custom-therapist-reservation-review-modal .custom-therapist-reservation-form-group .value span {
    font-size: 0.875rem;
    color: #333333;
    border-radius: 8px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    box-sizing: border-box;
    white-space: pre-wrap;
    word-wrap: break-word;
}

#custom-therapist-reservation-review-modal .custom-therapist-reservation-form-group > label
{
    padding: 0px;
    font-size: 1rem;
    font-weight: bold;
    background-color: #fff;
}

.custom-therapist-reservation-datetime {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

#ctr-datetime {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#ctr-datetime-span {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}




#custom-therapist-reservation-review-modal .custom-therapist-reservation-submit-button {
    width: 150px;
}


/* -------------------------------------------------------------------------------------- */
/* お客様モーダル */

.custom-therapist-reservation-create-user-form {
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.custom-therapist-reservation-create-user-form-group {
    width: 100%;
    padding-top: 40px;
    flex: 1;
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.custom-therapist-reservation-create-user-form-group::-webkit-scrollbar {
    display: none;
}

.custom-therapist-reservation-create-user-form-sub-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 40px;
}


.custom-therapist-reservation-create-user-form-sub-group label {
    display: inline-block;
    font-size: 1rem;
    color: #7D40A0;
    text-align: center;
    border-bottom: solid 1px #7D40A0;
    width: 100%;
}

.custom-therapist-reservation-create-user-form input {
    font-size: 0.875rem;
    padding: 13px;
    border: none;
    border-radius: 25px;
    background-color: #F5F5F5;
    width: 100%;
    color: #535353;
    margin-top: 20px;
}

#create-user-info {
    font-size: 0.75rem;
    color: #535353;
    margin-top: 20px;
}

.custom-therapist-reservation-create-user-btn-content {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}

.custom-therapist-reservation-create-new-user-button {
    width: 200px;
    height: 40px;
    background-color: #E9528E;
    border: none;
    border-radius: 40px;
    color: #fff;
    font-size: 0.875rem;
    cursor: pointer;
    position: relative;
}

.custom-therapist-reservation-create-new-user-button::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 10px;
    width: 7px;
    height: 7px;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}

.custom-therapist-reservation-create-user-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
}

.no-create-user-message {
    font-size: 0.875rem;
    color: #AAAAAC;
    text-align: center;
}



.custom-therapist-reservation-create-user-search-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.custom-therapist-reservation-create-user-search-grid-item {
    border-radius: 5px;
    text-align: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    max-width: 300px;
    gap: 10px;
}

.custom-therapist-reservation-create-user-search-grid-item-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;    
}

.custom-therapist-reservation-ng-badge {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    background-color: #E57373;
    color: #fff;
    display: inline-block;
    text-align: center;
}

.custom-therapist-reservation-create-user-search-grid-item-user-name {
    font-size: 0.875rem;
    color: #535353;
    white-space: nowrap;
    overflow: hidden;
    flex: 1;
    text-align: left;
}

.custom-therapist-reservation-create-user-search-grid-item .custom-therapist-reservation-create-user-select-button {
    width: 100px;
    height: 40px;
    background-color: #E9528E;
    color: white;
    border-radius: 100px;
    cursor: pointer;
    font-size: 0.875rem;
    text-align: center;
    position: relative;
}

.custom-therapist-reservation-create-user-search-grid-item .custom-therapist-reservation-create-user-select-button::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 10px;
    width: 7px;
    height: 7px;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: translatey(-50%) rotate(-135deg);
    transform: translatey(-50%) rotate(-135deg);
}





.custom-therapist-reservation-create-user-section label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.875rem;
    color: #333;
    margin-top: 20px;
}

.custom-therapist-reservation-create-user-section input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.875rem;
}

.custom-therapist-reservation-create-user-section button {
    width: 150px;
    padding: 10px;
    background-color: rgb(233, 81, 142);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.875rem;
}

.custom-therapist-reservation-create-user-badge {
    background-color: rgb(233, 81, 142);
    color: white;
    padding: 0.2em 0.6em;
    border-radius: 0.5em;
    font-size: 0.8em;
    position: absolute;
    top: 10px;
    right: 10px;
}

.new-user-name-label,
.new-user-contact-label {
    font-size: 0.875rem;
    color: #333;
    align-self: flex-start;
}


.custom-therapist-reservation-notice {
    margin-top: 10px;
    font-size: 0.875rem;
    color: #333;
}

/* アニメーション */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


.week-nav-button {
    padding: 5px 10px;
    font-size: 0.75rem;
}

.custom-therapist-reservation-weekly-schedule th,
.custom-therapist-reservation-weekly-schedule td,
.custom-therapist-reservation-weekly-schedule-shortcode th,
.custom-therapist-reservation-weekly-schedule-shortcode td {
    padding: 4px;
    font-size: 10px;
    height: 16px;
}

.custom-therapist-reservation-weekly-schedule table,
.custom-therapist-reservation-weekly-schedule-shortcode table {
    width: 100%;
}

#custom-therapist-reservation-confirmation-modal input[type="radio"] {
    transform: scale(1.2);
}


#cancellation-policy-2 {
    width: 100%;
    border: none;
    border-radius: 25px;
    box-sizing: border-box;
    background-color: #F5F5F5;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: #535353;
    font-size: 0.875rem;
    min-height: 9.375rem;
    margin-top: 1.25rem;
    padding: 0.8125rem;
}

#customer-confirmation-2 {
    width: 100%;
    border: none;
    border-radius: 25px;
    box-sizing: border-box;
    background-color: #F5F5F5;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: #535353;
    font-size: 0.875rem;
    min-height: 9.375rem;
    margin-top: 1.25rem;
    padding: 0.8125rem;
}

#question-to-therapist-and-store {
    width: 100%;
    height: 150px;
    padding: 13px;
    font-size: 0.875rem;
    border: none;
    border-radius: 25px;
    box-sizing: border-box;
    background-color: #F5F5F5;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin-top: 20px;
    color: #535353;
}

.custom-therapist-reservation-form-group-therapist-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 5px 10px;
    justify-content: flex-start;
    gap: 15px;
}

.custom-therapist-reservation-form-group-therapist-and-store-name {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


.ctr-therapist-name {
    font-size: 20px;
}

.ctr-store-name {
    font-size: 1rem;
}

.custom-therapist-reservation-form-group-therapist-info img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}


#value-info-form-group {
    border: none !important;
    background-color: #ffffff !important;
    padding: 0px;
    display: flex;
    flex-direction: row !important;
    justify-content: center;
    gap: 10px !important;
    align-items: center;
}

#value-info-total-price {
    font-size: 20px !important;
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 1px;
}

/* -------------------------------------------------------------------------------------- */
/* セラピスト予約管理 */

.therapist-reservation-management-page {
    background: #fff;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;  
    height: 100dvh;
}

.therapist-reservation-management-page, 
.therapist-reservation-management-page * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.therapist-reservation-management-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    background-color: #fff;
    display: flex;
    align-items: center;
    z-index: 10;
    width: 100%;
    flex-direction: column;
    height: 50px;
}

.ctrm-date-navigation {
    display: flex;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

#ctrm-prev-day,
#ctrm-next-day {
    position: relative;
    margin: 0 10px;
    height: 29px;
    border: solid 1px #7D40A0;
    width: 30px;
    border-radius: 5px;
}

#ctrm-prev-day::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    left: 55%;
    width: 7px;
    height: 7px;
    border-bottom: 1px solid #7D40A0;
    border-left: 1px solid #7D40A0;
    transform: translate(-50%, -50%) rotate(45deg);
}

#ctrm-next-day::before {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    left: 55%;
    width: 7px;
    height: 7px;
    border-bottom: 1px solid #7D40A0;
    border-left: 1px solid #7D40A0;
    transform: translate(-50%, -50%) rotate(-135deg);
}


#formatted-date-display {
    width: 150px;
    padding: 5px;
    text-align: center;
    border: 1px solid #7D40A0;
    border-radius: 4px;
    font-size: 0.75rem;
    color: #535353;
}

.ctrm-setting-button {
    width: 40px;
    height: auto;
    position: fixed;
    top: 10px;
    right: 1.25rem;
}

.ctrm-reservation-status-navigation {
    position: fixed;
    top: 70px;
    right: 0;
    display: flex;
    flex-direction: column;
    z-index: 20;
    gap: 20px;
}

.ctrm-status-button {
    height: 90px;
    width: 40px;
    font-size: 0.75rem;
    background: #fff;
    color: #7D40A0;
    text-align: center;
    border: solid 1px #7D40A0;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    position: relative;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.ctrm-count-badge {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    position: absolute;
    top: -10px;
    left: -13px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    color: #fff;
    font-size: 0.75rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

#pending-reservations-count {
    background-color: #FFA000;
}

#confirmed-reservations-count {
    background-color: #1976D2;
}


.therapist-reservation-management-content {
    position: absolute;
    left: 0;
    right: 0;
    overflow-y: auto;
}

#therapist-calendar {
    width: 100%;
    height: 100%;
}

.therapist-reservation-management-content tr.fc-scrollgrid-section.fc-scrollgrid-section-header {
    display: none;
}


#ctrm-add-schedule-btn {
    position: fixed;
    bottom: 6.5rem;
    right: 1.25rem;
    padding: 4px 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    z-index: 100;
    border-radius: 50%;
    background-color: rgb(233 81 142);
    border: none;
}

@media screen and (min-width: 1024px) {
    #ctrm-add-schedule-btn {
        right: calc(13.0208333333% + 1.25rem);
    }

    .ctrm-reservation-status-navigation {
        right: calc(13.0208333333%);
    }

    .therapist-reservation-management-header {
        left: unset;
        right: 13.0208333333%;
        width: min(100%, 26.875rem);
    }
    
    .ctrm-setting-button {
        right: calc(13.0208333333% + 1.25rem);
    }
    
    .therapist-reservations-page-header {
        left: unset;
        right: 13.0208333333%;
        width: min(100%, 26.875rem);
    }    
}

#ctrm-add-schedule-btn img {
    width: 25px;
    height: 25px;
    filter: invert(1);
}

.fc-event-title-container {
    color: #fff;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    max-width: 250px;
    text-align: left;
    align-items: flex-start;
    line-height: 1.2;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
    font-size: 0.75rem;
    height: 40.5px;
    max-height: 40.5px;
    letter-spacing: 0.05em;
    justify-content: flex-start;
}

.fc-timegrid-event-harness.fc-timegrid-event-harness-inset.schedule-harness {
    left: 0% !important;
}

.fc-timegrid-event-harness.fc-timegrid-event-harness-inset.reservation-harness {
    left: 20% !important;
}

.reservation-event {
    position: relative;
    z-index: 2 !important;
}

.schedule-event {
    position: relative;
    z-index: 1 !important;
}

.fc-event.schedule-event {
    background-color: rgba(243, 231, 253, 0.7);
}

.fc-event.reservation-event.reservation-pending {
    background-color: #FFA000;
}

.fc-event.reservation-event.reservation-confirmed {
    background-color: #1976D2;
}

.fc-event.reservation-event.reservation-store-confirmed {
    background-color: #4CAF50;
}

/* ドラッグ中 */
.fc-timegrid .fc-v-event.fc-event-mirror,
.fc-timegrid .fc-v-event.fc-event-dragging {
  background: transparent !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 2px #E9528E !important;
  --fc-event-border-color: transparent;
  opacity: 1 !important;
}

.fc-timegrid .fc-v-event.fc-event-mirror .fc-event-time,
.fc-timegrid .fc-v-event.fc-event-dragging .fc-event-time {
  display: none !important;
}

.fc .fc-highlight {
  background: transparent !important;
}

.fc-timegrid .fc-v-event.fc-event-mirror .fc-event-main,
.fc-timegrid .fc-v-event.fc-event-mirror .fc-event-main-frame,
.fc-timegrid .fc-v-event.fc-event-dragging .fc-event-main,
.fc-timegrid .fc-v-event.fc-event-dragging .fc-event-main-frame {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.fc-v-event.fc-event-selected .fc-event-resizer {
  border: solid 1px #E9528E;
}

.csrm-delete-btn::before {
  content: '×';
  font-size: 0.75rem;
  line-height: 1;
  display: block;
}

.csrm-delete-btn {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* 長押しで選択・ドラッグ・リサイズ時に表示（ハンドルと同じタイミング） */
.fc-event.fc-event-selected .csrm-delete-btn,
.fc-event.fc-event-dragging .csrm-delete-btn,
.fc-event.fc-event-resizing .csrm-delete-btn,
.fc-timegrid .fc-v-event.fc-event-mirror .csrm-delete-btn {
  opacity: 1;
  pointer-events: auto;
}


.fc-timegrid-event {
    border: none;
    color: #fff;
    padding: 2px 2px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
}

.fc-v-event .fc-event-main{
    color: #fff;
}

.fc-event-title.fc-sticky {
    display: none;
}

.fc-timegrid-event .fc-event-time {
    display: none;
}

.fc .fc-timegrid-slot-label {
    vertical-align: middle;
    font-size: 0.875rem;
    font-weight: 500;
    background-color: #fff;
    color: #535353;
}

.fc .fc-timegrid-now-indicator-line {
    border-color: #E9528E !important;
    border-width: 2px 0px 0px !important;
}

.fc .fc-timegrid-now-indicator-arrow {
    border-color: #E9528E;
}

.fc-direction-ltr .fc-timegrid-now-indicator-arrow {
    border-bottom-color: transparent !important;
    border-top-color: transparent !important;
    border-width: 7px 0px 7px 8px;
}

.fc .fc-timegrid-col.fc-day-today {
    background-color: #fff;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 各ステータス予約一覧画面 */

.therapist-pending-reservations-page,
.therapist-confirmed-reservations-page,
.therapist-cancelled-reservations-page,
.therapist-store-confirmed-reservations-page {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    background: #fff;
}

.therapist-pending-reservations-page, 
.therapist-pending-reservations-page *,
.therapist-confirmed-reservations-page, 
.therapist-confirmed-reservations-page *,
.therapist-cancelled-reservations-page, 
.therapist-cancelled-reservations-page *,
.therapist-store-confirmed-reservations-page, 
.therapist-store-confirmed-reservations-page * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.therapist-pending-reservations-page-content,
.therapist-confirmed-reservations-page-content,
.therapist-cancelled-reservations-page-content,
.therapist-store-confirmed-reservations-page-content {
    height: 100%;
    overflow-y: auto;
}

.therapist-reservations-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    z-index: 10;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

.therapist-reservations-page-header-btn {
    width: 50px;
    font-size: 0.875rem;
    color: #535353;
    cursor: pointer;
    border: none;
}

.therapist-pending-reservations-table-content,
.therapist-confirmed-reservations-table-content,
.therapist-cancelled-reservations-table-content {
    flex: 1;
    overflow-y: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.therapist-store-confirmed-reservations-table-content {
    flex: 1;
    overflow-y: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.ctrm-no-reservations{
    text-align: center;
    font-size: 1rem;
    color: #AAAAAC;
    margin: 40px 0;
}

.ctrm-no-upcoming-reservations,
.ctrm-no-past-reservations {
    text-align: center;
    font-size: 1rem;
    color: #AAAAAC;
}

.ctrm-therapist-reservation-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ctrm-reservation-card {
    border-radius: 16px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 300px;
    max-width: 500px;
    width: 100%;
    border-top: 1px solid #AAAAAC;
    border-right: 1px solid #AAAAAC;
    border-bottom: 1px solid #AAAAAC;
    margin-bottom: 20px;
}

.ctrm-pending-reservation-card {
    border-left: 8px solid #FFA000;
}

.ctrm-confirmed-reservation-card {
    border-left: 8px solid #1976D2;
}

.ctrm-store-confirmed-reservation-card {
    border-left: 8px solid #4CAF50;
}

.ctrm-cancelled-reservation-card {
    border-left: 8px solid #AAAAAC;
}

.ctrm-reservation-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #535353;
    margin-bottom: 10px;
    border-bottom: 1px solid #AAAAAC;
    padding-bottom: 10px;
}

.ctrm-reservation-card-reservation-id {
    color: #E9528E;
    font-size: 1.125rem;
}

.ctrm-reservation-card-header-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ctrm-reservation-card-reservation-date {
    font-size: 1rem;
    color: #535353;
}

.ctrm-reservation-card-reservation-route {
    font-size: 0.75rem;
    color: #535353;
}

.ctrm-reservation-card-cancelled-reason {
    font-size: 0.75rem;
    color: #E9528E;
}


.ctrm-reservation-card-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ctrm-reservation-card-user-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.ctrm-reservation-card-user-name {
    font-size: 1rem;
    color: #535353;
    white-space: nowrap;
    overflow: hidden;
}

.ctrm-reservation-upcoming-label,
.ctrm-reservation-history-label {
    display: inline-block;
    font-size: 1rem;
    color: #7D40A0;
    text-align: center;
    border-bottom: solid 1px #7D40A0;
    width: 100%;
    margin-top: 40px;
    margin-bottom: 20px;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 予約詳細モーダル */

.reservation-details-for-therapist-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.reservation-details-for-therapist-modal, 
.reservation-details-for-therapist-modal * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.reservation-details-for-therapist-content {
    width: 100%;
    max-width: 600px;
    height: 100dvh;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    font-weight: 500;
    background: #fff;
}




.ctrm-reservation-details-content {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.ctrm-reservation-details-content::-webkit-scrollbar {
    display: none;
}

.ctrm-reservation-details-content-top {
    background: #fff;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 40px;
}


.ctrm-reservation-details-content-bottom {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 40px;
    background: #F5F5F5;
    margin-top: -108px;
    padding-top: 108px;
}

.ctrm-status-message {
    color: #535353;
    font-size: 0.875rem;
    margin-top: 10px;
}

.ctrm-user-info-wrapper {
    padding-right: 20px;
    padding-left: 20px;
}

.ctrm-user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    border: solid 1px #AAAAAC;
    background: #fff;
    border-radius: 10px;
    margin-top: 40px;
    padding: 20px;
    height: 216px;
    position: relative;
}

.ctrm-user-img-and-name {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    gap: 10px;
    padding-bottom: 20px;
    border-bottom: solid 1px #AAAAAC;
    margin-bottom: 20px;
}

.ctrm-user-img-and-name img {
    height: 80px;
    width: 80px;
    border-radius: 50%;
    object-fit: cover;

}

.ctrm-user-name {
    font-size: 1rem;
    color: #535353;
}


.ctrm-user-btn-content {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
}


.ctrm-user-info-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.875rem;
    color: #7D40A0;
    width: 70px;
}

.ctrm-user-info-button img {    
    height: 30px;
    width: auto;
}

.ctrm-datetime-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 40px;
    gap: 20px;
    align-items: stretch;
}

.ctrm-start-datetime-info,
.ctrm-end-datetime-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.875rem;
    border-radius: 10px;
    padding: 10px 10px;
    background: #fff;
    width: 100%;
}

.ctrm-start-datetime-info-title,
.ctrm-end-datetime-info-title {
    background: #7D40A0;
    color: #fff;
    font-size: 1rem;
    width: 90%;
    max-width: 155px;
    height: 30px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ctrm-start-datetime,
.ctrm-end-datetime {
    font-size: 1rem;
    color: #535353;
    text-align: center;
}

.ctrm-reservation-details-datetime-change-button {
    font-size: 0.875rem;
    color: #E9528D;
    background: #fff;
    width: 70px;
    height: 30px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: solid 1px #E9528E;
    border-radius: 25px;
    margin-top: 5px;
    display: none;
}

.ctrm-reservation-details-datetime-change-button img  {
    height: 20px;
    width: auto;
    margin-top: 2px;
}

.ctrm-meeting-place-info,
.ctrm-outfit-description-info,
.ctrm-schedule-adjusted-info,
.ctrm-question-info {
    border-radius: 10px;
    padding: 10px;
    background: #fff;
    width: 100%;
    margin-top: 20px;
}

.ctrm-meeting-place-title,
.ctrm-outfit-description-title,
.ctrm-schedule-adjusted-title,
.ctrm-question-title {
    font-size: 1rem;
    color: #7D40A0;
}

.ctrm-question,
.ctrm-outfit-description,
.ctrm-meeting-place,
.ctrm-schedule-adjusted {
    box-sizing: border-box;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: hidden;
    font-size: 1rem;
    color: #535353;
}

.ctrm-receipt {
    padding: 10px;
    border-radius: 10px;
    background-color: #fff;
    margin-top: 20px;
    color: #535353;
}

.ctrm-receipt-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.ctrm-receipt-item-title {
    width: 50%;
    text-align: left;
    font-size: 1rem;
    color: #7D40A0;
    white-space: nowrap;
    overflow: hidden;
}

.ctrm-receipt-item-price-and-reason {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.ctrm-receipt-item-price {
    color: #535353;
    text-align: right;
    font-size: 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.ctrm-receipt-item-reason {
    font-size: 0.875rem;
    color: #535353;
}

.ctrm-receipt-total {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 2px solid #E1E1E1;
}

.ctrm-receipt-total-title-with-btn {
    display: flex;
    flex-direction: column;
    width: 30%;
}

.ctrm-receipt-total-title {
    font-size: 1rem;
    color: #7D40A0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
}

.ctrm-receipt-total-price-and-explanation {
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.ctrm-receipt-total-price {
    color: #E9528E;
    text-align: right;
    font-size: 1.5rem;
}

.ctrm-receipt-date-explanation {
    font-size: 0.875rem;
    color: #535353;
}

.ctrm-receipt-total-explanation {    
    font-size: 0.875rem;
    color: #535353;
    text-align: left;
}

.ctrm-receipt-payment-method {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 2px solid #E1E1E1;
}

.ctrm-receipt-payment-method-title {
    font-size: 1rem;
    color: #7D40A0;
    text-align: left;
    width: 30%;
    white-space: nowrap;
    overflow: hidden;
}

.ctrm-receipt-payment-method-detail-with-btn {
    display: flex;
    flex-direction: column;
    width: 70%;
    align-items: flex-end;
}

.ctrm-receipt-payment-method-detail {
    color: #535353;
    text-align: right;
    font-size: 1rem;
}

.ctrm-course-change-button img,
.ctrm-transport-change-button img,
.ctrm-designation-change-button img,
.ctrm-option-change-button img,
.ctrm-add-price-change-button img,
.ctrm-add-price-after-start-change-button img,
.ctrm-payment-method-after-start-change-button img {
    height: 20px;
    width: auto;
    display: none;
}

.ctrm-add-course-footer {
    position: relative;
    height: 40px;
    display: none;
}

.ctrm-add-course-footer::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    border-top: 1px dashed #CCCCCC;
    transform: translateY(-50%);
    z-index: 0;
}

.ctrm-add-course-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    color: #E9528E;
    font-size: 0.875rem;
    border: solid 1px #E9528E;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    flex-direction: row;
    width: 120px;
    height: 30px;
    gap: 5px;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.ctrm-add-course-button img {
    height: 15px;
    width: auto;
}

.ctrm-add-price-footer {
    position: relative;
    height: 40px;
    display: none;
}

.ctrm-add-price-footer::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    border-top: 1px dashed #CCCCCC;
    transform: translateY(-50%);
    z-index: 0;
}

.ctrm-add-price-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    color: #E9528E;
    font-size: 0.875rem;
    border: solid 1px #E9528E;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    flex-direction: row;
    width: 120px;
    height: 30px;
    gap: 5px;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.ctrm-add-price-button img {
    height: 15px;
    width: auto;
}

.ctrm-add-price-after-start-footer {
    position: relative;
    height: 40px;
    display: none;
}

.ctrm-add-price-after-start-footer::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    border-top: 1px dashed #CCCCCC;
    transform: translateY(-50%);
    z-index: 0;
}

.ctrm-add-price-after-start-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    color: #E9528E;
    font-size: 0.875rem;
    border: solid 1px #E9528E;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    flex-direction: row;
    width: 120px;
    height: 30px;
    gap: 5px;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.ctrm-add-price-after-start-button img {
    height: 15px;
    width: auto;
}

.ctrm-reservation-details-btn-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 10px;
}

.ctrm-reservation-details-back-button {
    width: 150px;
    height: 40px;
    background-color: #AAAAAC;
    border: none;
    border-radius: 40px;
    color: #fff;
    font-size: 0.875rem;
    cursor: pointer;
    position: relative;
}

.ctrm-reservation-details-status-update-button {
    width: 150px;
    height: 40px;
    background-color: #E9528E;
    border: none;
    border-radius: 40px;
    color: #fff;
    font-size: 0.875rem;
    cursor: pointer;
    position: relative;
    display: none;
}


/* ------------------------------------------------------------------------------------------------------------------ */
/* リスケジュールモーダル */

.reservation-reschedule-for-therapist-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1010;
}

.reservation-reschedule-for-therapist-modal, 
.reservation-reschedule-for-therapist-modal * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.reservation-reschedule-for-therapist-content {
    background: #fff;
    width: 100%;
    max-width: 600px;
    height: 100dvh;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    padding-left: 20px;
    padding-right: 20px;
}

.ctrm-reservation-details-before-datetime-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #535353;
    font-size: 0.875rem;
    margin-top: 40px;
}

.ctrm-reservation-details-before-datetime-title {
    font-size: 1rem;
    color: #7D40A0;
}

#timeslot-container {
    height: 100dvh;
    margin-top: 10px;
}

.ctrm-reservation-details-back-reschedule-button {
    width: 150px;
    height: 40px;
    background-color: #AAAAAC;
    border: none;
    border-radius: 40px;
    color: #fff;
    font-size: 0.875rem;
    cursor: pointer;
    position: relative;
}

.ctrm-reservation-details-reschedule-button {
    width: 150px;
    height: 40px;
    background-color: #E9528E;
    border: none;
    border-radius: 40px;
    color: #fff;
    font-size: 0.875rem;
    cursor: pointer;
    position: relative;
}