@charset "UTF-8";

a.ts-button {
    text-decoration: none;
}


/* ------------------ 🔽🔽🔽 他 始 🔽🔽🔽　------------------ */

.ts-button-panel .ts-button.default-disabled {
    background:rgb(134, 134, 134);
}
.ts-button-panel .ts-button {
    border: none;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s ease-in-out;
    display: flex;
    justify-content: center;
    width: 100%; height: 100%;
}

.ts-button-panel .ts-button * {
    margin-top: auto;
    margin-bottom: auto;
}
.ts-button-panel .ts-button:not(.ts-button-v3) .loading-image {
    width: 1.2em;
    height: 1.2em;
    margin-left: 0.8em;
    display: none;
}
.ts-button-panel.ts-button-black-bg .ts-button.ts-button-v3 .loading-image {
    filter: invert(44%) sepia(12%) saturate(12%) hue-rotate(359deg) brightness(86%) contrast(89%);
}


/* ts-button-white-bg */
.ts-button-panel.ts-button-white-bg .ts-button {
    padding: 6px 15px;
    background: #2d2d2d;
    color: #fff;
}
body:not(.--CLIENT-USE-TOUCH, .--CLIENT-USE-PEN) .ts-button-panel.ts-button-white-bg .ts-button:enabled:not(:is(.ts-disabled, [data-btn_status="disabled"], [data-btn_status="loading"])):hover,
body:not(.--CLIENT-USE-TOUCH, .--CLIENT-USE-PEN) .ts-button-panel.ts-button-white-bg a.ts-button:not(:is(.ts-disabled, [data-btn_status="disabled"], [data-btn_status="loading"])):hover {
    background: #4db4b4;
}
.ts-button-panel.ts-button-white-bg .ts-button:disabled,
.ts-button-panel.ts-button-white-bg .ts-button:is(.ts-disabled, [data-btn_status="disabled"], [data-btn_status="loading"]) {
    background: rgb(179 179 179);
}

/* ts-button-black-bg */
.ts-button-panel.ts-button-black-bg .ts-button {
    padding: 6px 15px;
    background: #f5f5f5;
    color: #2d2d2d;
}
form .ts-button-panel.ts-button-black-bg .ts-button {
    padding: 6px 15px;
    background: #f1f1f1;
    color: #2d2d2d;
}
body:not(.--CLIENT-USE-TOUCH, .--CLIENT-USE-PEN) .ts-button-panel.ts-button-black-bg .ts-button:enabled:not(:is(.ts-disabled, [data-btn_status="disabled"], [data-btn_status="loading"])):hover,
body:not(.--CLIENT-USE-TOUCH, .--CLIENT-USE-PEN) .ts-button-panel.ts-button-black-bg a.ts-button:not(:is(.ts-disabled, [data-btn_status="disabled"], [data-btn_status="loading"])):hover {
    color: #fff;
    background: #4db4b4;
}
.ts-button-panel.ts-button-black-bg .ts-button:disabled,
.ts-button-panel.ts-button-black-bg .ts-button:is(.ts-disabled, [data-btn_status="disabled"], [data-btn_status="loading"]) {
    color: #979797;
}

/* ts-button-icon-small */
.ts-button-panel.ts-button-icon-small .ts-button {
    width: 30px; height: 30px;
}

/* ts-button-icon-middle */
.ts-button-panel.ts-button-icon-middle .ts-button {
    width: 35px; height: 35px;
    font-size: 1.15em;
}

/* ts-button-icon-large */
.ts-button-panel.ts-button-icon-large .ts-button {
    width: 40px; height: 40px;
    font-size: 1.3em;
}

/* ts-button-icon-white */
.ts-button-panel.ts-button-icon-white .ts-button {
    background: transparent;
    color: #fff;
    border-radius: 50%;
}
body:not(.--CLIENT-USE-TOUCH, .--CLIENT-USE-PEN) .ts-button-panel.ts-button-icon-white .ts-button:enabled:not(:is(.ts-disabled, [data-btn_status="disabled"], [data-btn_status="loading"])):hover,
body:not(.--CLIENT-USE-TOUCH, .--CLIENT-USE-PEN) .ts-button-panel.ts-button-icon-white a.ts-button:not(:is(.ts-disabled, [data-btn_status="disabled"], [data-btn_status="loading"])):hover {
    background: rgba(255, 255, 255, 0.2);
}
.ts-button-panel.ts-button-icon-white .ts-button:disabled,
.ts-button-panel.ts-button-icon-white .ts-button:is(.ts-disabled, [data-btn_status="disabled"], [data-btn_status="loading"]) {
    color: #999;
}

/* ts-button-icon-black */

.ts-button-panel.ts-button-icon-black .ts-button {
    background: transparent;
    color: #2d2d2d;
    border-radius: 50%;

    .loading-image {
        filter: brightness(0);
    }
}
body:not(.--CLIENT-USE-TOUCH, .--CLIENT-USE-PEN) .ts-button-panel.ts-button-icon-black .ts-button:enabled:not(:is(.ts-disabled, [data-btn_status="disabled"], [data-btn_status="loading"])):hover,
body:not(.--CLIENT-USE-TOUCH, .--CLIENT-USE-PEN) .ts-button-panel.ts-button-icon-black a.ts-button:not(:is(.ts-disabled, [data-btn_status="disabled"], [data-btn_status="loading"])):hover {
    background: rgba(0, 0, 0, 0.2);
}
.ts-button-panel.ts-button-icon-black .ts-button:disabled,
.ts-button-panel.ts-button-icon-black .ts-button:is(.ts-disabled, [data-btn_status="disabled"], [data-btn_status="loading"]) {
    color: #f5f5f5;
}



/* ts-button-icon-white-bg */

.ts-button-panel.ts-button-icon-white-bg .ts-button {
    background: #2d2d2d;
    color: #fff;
    border-radius: 50%;
}
body:not(.--CLIENT-USE-TOUCH, .--CLIENT-USE-PEN) .ts-button-panel.ts-button-icon-white-bg .ts-button:enabled:not(:is(.ts-disabled, [data-btn_status="disabled"], [data-btn_status="loading"])):hover,
body:not(.--CLIENT-USE-TOUCH, .--CLIENT-USE-PEN) .ts-button-panel.ts-button-icon-white-bg a.ts-button:not(:is(.ts-disabled, [data-btn_status="disabled"], [data-btn_status="loading"])):hover {
    background: #4db4b4;
}
.ts-button-panel.ts-button-icon-white-bg .ts-button:disabled,
.ts-button-panel.ts-button-icon-white-bg .ts-button:is(.ts-disabled, [data-btn_status="disabled"], [data-btn_status="loading"]) {
    background: rgb(179 179 179);
}

/* ts-button-icon-black-bg */

.ts-button-panel.ts-button-icon-black-bg .ts-button {
    border-radius: 50%;
    background: #f5f5f5;
    color: #2d2d2d;

    .loading-image {
        filter: brightness(0);
    }
}
body:not(.--CLIENT-USE-TOUCH, .--CLIENT-USE-PEN) .ts-button-panel.ts-button-icon-black-bg .ts-button:enabled:not(:is(.ts-disabled, [data-btn_status="disabled"], [data-btn_status="loading"])):hover,
body:not(.--CLIENT-USE-TOUCH, .--CLIENT-USE-PEN) .ts-button-panel.ts-button-icon-black-bg a.ts-button:not(:is(.ts-disabled, [data-btn_status="disabled"], [data-btn_status="loading"])):hover {
    color: #fff;
    background: #4db4b4;
}
.ts-button-panel.ts-button-icon-black-bg .ts-button:disabled,
.ts-button-panel.ts-button-icon-black-bg .ts-button:is(.ts-disabled, [data-btn_status="disabled"], [data-btn_status="loading"]) {
    color: #f5f5f5;
}

/* ts-button-transparent */

.ts-button-panel.ts-button-transparent .ts-button {
    padding: 4px 6px;
    border-radius: 5px;
    background: transparent;
    color: #2d2d2d;

    .loading-image {
        filter: brightness(0);
    }
}
body:not(.--CLIENT-USE-TOUCH, .--CLIENT-USE-PEN) .ts-button-panel.ts-button-transparent .ts-button:enabled:not(:is(.ts-disabled, [data-btn_status="disabled"], [data-btn_status="loading"])):hover,
body:not(.--CLIENT-USE-TOUCH, .--CLIENT-USE-PEN) .ts-button-panel.ts-button-transparent a.ts-button:not(:is(.ts-disabled, [data-btn_status="disabled"], [data-btn_status="loading"])):hover {
    background: rgba(0, 0, 0, 0.2);
}
.ts-button-panel.ts-button-transparent .ts-button:disabled,
.ts-button-panel.ts-button-transparent .ts-button:is(.ts-disabled, [data-btn_status="disabled"], [data-btn_status="loading"]) {
    color: rgb(91, 91, 91);
}


/* v3 */
.ts-button-panel:not(.ts-button-icon-small, .ts-button-icon-middle, .ts-button-icon-large) .ts-button.ts-button-v3 {
    width: 100%; height: 100%;
}
.ts-button-panel .ts-button.ts-button-v3[data-btn_status="standby"] {
    .ts-button-text-standby {
        display: block !important;
    }
    .ts-button-text-loading {
        display: none !important;
    }
    .ts-button-text-disabled {
        display: none !important;
    }
    .loading-image {
        display: none !important;
    }
}
.ts-button-panel .ts-button.ts-button-v3[data-btn_status="loading"] {
    .ts-button-text-standby {
        display: none !important;
    }
    .ts-button-text-loading {
        display: block !important;
    }
    .ts-button-text-disabled {
        display: none !important;
    }
    .loading-image {
        display: block !important;
    }
}
/* .ts-button-panel .ts-button.ts-button-v3:not([data-btn_status="standby"]):not([data-btn_status="loading"]) {
    .ts-button-text-standby {
        display: none !important;
    }
    .ts-button-text-loading {
        display: block !important;
    }
    .ts-button-text-disabled {
        display: none !important;
    }
    .loading-image {
        display: block !important;
    }
} */
.ts-button-panel .ts-button.ts-button-v3[data-btn_status="disabled"] {
    .ts-button-text-standby {
        display: none !important;
    }
    .ts-button-text-loading {
        display: none !important;
    }
    .ts-button-text-disabled {
        display: block !important;
    }
    .loading-image {
        display: none !important;
    }
}







/*まるボタン*/
.ts-button-round-icon.ts-button-panel .ts-button {
    font-size: 1em;
    border-radius: 0px;
    border-radius: 50%;
}
.ts-button-round-icon.ts-button-panel p {
    font-size: 14px;
    margin: auto;
}
.ts-button-round-icon.ts-button-panel {
    width: 2em;
    height: 2em;
    display: flex;
    margin: 0;
}

/* 白背景ボタン */
.ts-button-white.ts-button-panel .ts-button {
    background: #eeeeee;
    color: #2d2d2d;
}
body:not(.--CLIENT-USE-TOUCH, .--CLIENT-USE-PEN) .ts-button-white.ts-button-panel .ts-button:not(.ts-button-v3):enabled:hover,
body:not(.--CLIENT-USE-TOUCH, .--CLIENT-USE-PEN) .ts-button-white.ts-button-panel .ts-button.ts-button-v3:not(:is(.ts-disabled, [data-btn_status="disabled"], [data-btn_status="loading"])):hover {
    background: #4db4b4;
    color: #eeeeee;
}
.ts-button-white.ts-button-panel .ts-button:disabled,
.ts-button-white.ts-button-panel .ts-button:is(.ts-disabled, [data-btn_status="disabled"], [data-btn_status="loading"]) {
    background: rgb(134, 134, 134);
    color: #eeeeee;
}

/* 透明背景ボタン */
.ts-button-transparent.ts-button-panel:not(.ts-button-white-bgc) .ts-button {
    background: transparent;
    color: #2d2d2d;
}
body:not(.--CLIENT-USE-TOUCH, .--CLIENT-USE-PEN) .ts-button-transparent.ts-button-panel:not(.ts-button-white-bgc) .ts-button:not(.ts-button-v3):enabled:hover,
body:not(.--CLIENT-USE-TOUCH, .--CLIENT-USE-PEN) .ts-button-transparent.ts-button-panel:not(.ts-button-white-bgc) .ts-button.ts-button-v3:not(:is(.ts-disabled, [data-btn_status="disabled"], [data-btn_status="loading"])):hover {
    background: rgba(0, 0, 0, 0.2);
}
.ts-button-transparent.ts-button-panel:not(.ts-button-white-bgc) .ts-button:disabled, .ts-button-transparent.ts-button-panel:not(.ts-button-white-bgc) .ts-button:is(.ts-disabled, [data-btn_status="disabled"], [data-btn_status="loading"]) {
    color: #959595;
}

/* 透明背景ボタン(黒背景用) */
.ts-button-transparent.ts-button-panel.ts-button-white-bgc .ts-button {
    background: transparent;
    color: #ffffff;
}
body:not(.--CLIENT-USE-TOUCH, .--CLIENT-USE-PEN) .ts-button-transparent.ts-button-panel.ts-button-white-bgc .ts-button:not(.ts-button-v3):enabled:hover,
body:not(.--CLIENT-USE-TOUCH, .--CLIENT-USE-PEN) .ts-button-transparent.ts-button-panel.ts-button-white-bgc .ts-button.ts-button-v3:not(:is(.ts-disabled, [data-btn_status="disabled"], [data-btn_status="loading"])):hover {
    background: rgba(255, 255, 255, 0.2);
}
.ts-button-transparent.ts-button-panel.ts-button-white-bgc .ts-button:disabled, .ts-button-transparent.ts-button-panel.ts-button-white-bgc .ts-button:is(.ts-disabled, [data-btn_status="disabled"], [data-btn_status="loading"]) {
    color: #959595;
}