/* =======================================================================================
  root
======================================================================================= */
:root, [data-bs-theme=light] {
    --bs-border-color-translucent: rgba(0, 0, 0, 1);
    --bs-border-width: 1px;

    --bs-danger-rgb: 255, 50, 0;
    --bs-success-rgb: 0, 214, 0;
    --bs-primary-rgb: 13, 110, 253;
}

body {
    font-size: 0.9em;
    line-height: 1.2em;
    background-color: #000 !important;
    height: 100vh;
}

.medium {
    font-size: 0.9em;
    line-height: 1.2em;
}

small, .small {
    font-size: 0.8em;
    line-height: 1.1em;
}

img {
    pointer-events: none;
}

a {
    color: rgb(13, 202, 240);
    text-decoration: none;
    -webkit-touch-callout: none;
}

/* =======================================================================================
  card
======================================================================================= */
.card-header {
    padding: 0.5rem 0.5rem;
}

.card {
    --bs-card-spacer-y: 0.5rem;
    --bs-card-spacer-x: 0.5rem;
    --bs-card-title-spacer-y: 0.5rem;
    --bs-card-title-color: ;
    --bs-card-subtitle-color: ;
    --bs-card-border-width: var(--bs-border-width);
    --bs-card-border-color: var(--bs-border-color-translucent);
    --bs-card-border-radius: var(--bs-border-radius);
    --bs-card-box-shadow: ;
    --bs-card-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
    --bs-card-cap-padding-y: 0.5rem;
    --bs-card-cap-padding-x: 0.5rem;
    --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03);
    --bs-card-cap-color: ;
    --bs-card-height: ;
    --bs-card-color: ;
    --bs-card-bg: var(--bs-body-bg);
    --bs-card-img-overlay-padding: 1rem;
    --bs-card-group-margin: 0.75rem;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: var(--bs-card-height);
    color: #FFFFFF;
    word-wrap: break-word;
    background-color: #444444;
    background-clip: border-box;
    border: var(--bs-card-border-width) solid var(--bs-card-border-color);
    border-radius: var(--bs-card-border-radius);
    box-shadow: var(--bs-card-box-shadow);
}

.bg-trans {
    background-color: transparent !important;
}
.bg-dark-trans {
    background-color: rgb(18, 18, 18, 0.8) !important;
}
.bg-dark2-trans {
    background-color: rgb(69, 69, 69, 0.8) !important;
}

.bg-secondary-trans {
    background-color: rgb(108, 117, 125, 0.7) !important
}
.bg-info-trans {
    background-color: rgb(13, 202, 240, 0.7) !important
}
.bg-warning-trans {
    background-color: rgb(255, 193, 7, 0.7) !important
}
.bg-danger-trans {
    background-color: rgb(220, 53, 69, 0.7) !important
}
.bg-indigo-trans {
    background-color: rgb(102, 16, 242, 0.7) !important
}

.bg-dark {
    background-color: #121212 !important;
}

.bg-dark2 {
    background-color: #454545 !important;
}

.bg-dark3 {
    background-color: #121212 !important;
    background-image: linear-gradient(45deg, #262626 25%, transparent 25%, transparent 75%, #262626 75%, #262626), linear-gradient(45deg, #262626 25%, transparent 25%, transparent 75%, #262626 75%, #262626);
    background-position: 0 0, 25px 25px;
    background-size: 50px 50px;
}
.bg-black {
    background-color: #000000 !important;
}
.bg-indigo {
    background-color: #6610f2 !important;
}
.text-indigo {
    color: #6610f2 !important;
}
.bg-purple {
    background-color: #6f42c1 !important;
}
.text-purple {
    color: #6f42c1 !important;
}
.border-purple {
    border-color: #6f42c1 !important;
}
.bg-violet {
    background-color: #800080 !important;
}
.border-violet {
    border-color: #800080 !important;
}
.bg-pink {
    background-color: #d63384 !important;
}
.text-pink {
    color: #FF9BAD !important;
}
.bg-orange {
    background-color: #fd7e14 !important;
}
.text-orange {
    color: #fd7e14 !important;
}
.border-orange {
    border-color: #fd7e14 !important;
}

/* ピンク × オレンジ（高揚感・毒々しい華やかさ） */
.bg-split-pink-orange {
    background: linear-gradient(90deg, #d63384 50%, #fd7e14 50%) !important;
}

/* バイオレット × ブラック（耽美・V系・闇） */
.bg-split-violet-black {
    background: linear-gradient(90deg, #800080 50%, #000000 50%) !important;
}

/* クリムゾン（深紅） × ブラック（ホラー・ダメージ・警告） */
.bg-split-crimson-black {
    background: linear-gradient(90deg, #b00000 50%, #000000 50%) !important;
}

/* シアン（水色） × パープル（サイバー・幻想的・冷気） */
.bg-split-cyan-purple {
    background: linear-gradient(90deg, #0dcaf0 50%, #6f42c1 50%) !important;
}

/* エメラルド（緑） × バイオレット（猛毒・不気味な森） */
.bg-split-emerald-violet {
    background: linear-gradient(90deg, #198754 50%, #800080 50%) !important;
}

/* 鉄色（ダークグレー） × ブラック（無機質・重厚） */
.bg-split-iron-black {
    background: linear-gradient(90deg, #343a40 50%, #000000 50%) !important;
}



/* =======================================================================================
  hr
======================================================================================= */
hr {
    margin: 1rem 0;
    color: #FFFFFF !important;
    border: 0;
    border-top: 1px #FFFFFF dashed;
    opacity: 1;
}

/* =======================================================================================
  general
======================================================================================= */

.app-header {
    border-bottom: 0px solid #121212 !important;
}

.app-footer {
    border-top: 1px solid #121212 !important;
}

[data-bs-theme=dark].app-sidebar, [data-bs-theme=dark] .app-sidebar {
    --lte-sidebar-hover-bg: rgba(255, 255, 255, 0.1);
    --lte-sidebar-color: #FFFFFF;
    --lte-sidebar-hover-color: #fff;
    --lte-sidebar-active-color: #fff;
    --lte-sidebar-menu-active-bg: rgba(255, 255, 255, 0.1);
    --lte-sidebar-menu-active-color: #fff;
    --lte-sidebar-submenu-bg: transparent;
    --lte-sidebar-submenu-color: #c2c7d0;
    --lte-sidebar-submenu-hover-color: #fff;
    /* --lte-sidebar-submenu-hover-bg: rgba(255, 255, 255, 0.1); */
    --lte-sidebar-submenu-active-color: #fff;
    /* --lte-sidebar-submenu-active-bg: rgba(255, 255, 255, 0.1); */
    --lte-sidebar-header-color: rgb(197.05, 201.8, 210.35);
}

.sidebar-brand {
    border-bottom: 0px solid #000000 !important;
}

.sidebar-wrapper {
    scrollbar-color: #210148 !important;
}

/*
*:not(input,select,textarea){
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
*/

::placeholder{
    color:#BBBBBB !important;
}
::selection {
    background: #800080;
    color: #FFFFFF;
}
*:focus {
    outline: none !important;
}

input:focus,
button:focus,
a:focus {
  outline: none !important;
}

.w-0px{
    width: 0px !important;
}
.w-1px{
    width: 1px !important;
}
.w-50px{
    min-width: 50px !important;
}
.w-60{
    width: 60% !important;
}
.w-70{
    width: 70% !important;
}
.w-80{
    width: 80% !important;
}
.w-90{
    width: 90% !important;
}

.text-normal {
    color: #212529;
}

.text-outlined {
    color: #FFFFFF !important;
    text-shadow:1px 1px 0 #121212, -1px -1px 0 #121212,
    -1px 1px 0 #121212, 1px -1px 0 #121212,
    0px 1px 0 #121212,  0-1px 0 #121212,
    -1px 0 0 #121212, 1px 0 0 #121212;
}

.btn-primary {
    background: linear-gradient(#007BFF 0%, #007BFF 50%, #0046FF 50%, #0046FF 100%);
}

.btn-info {
    background: linear-gradient(#00F5FF 0%, #00F5FF 50%, #00C2FF 50%, #00C2FF 100%);
}

.btn-danger {
    background: linear-gradient(#FF0000 0%, #FF0000 50%, #C10000 50%, #C10000 100%);
}

.btn-warning {
    background: linear-gradient(#FFE600 0%, #FFE600 50%, #FFB900 50%, #FFB900 100%);
}

.btn-success {
    background: linear-gradient(#39FF14 0%, #39FF14 50%, #32CD32 50%, #32CD32 100%);
}

.btn-violet {
    background: linear-gradient(#D500F9 0%, #D500F9 50%, #A000E0 50%, #A000E0 100%);
}

.btn-orange {
    background: linear-gradient(#FF9100 0%, #FF9100 50%, #FF6200 50%, #FF6200 100%);
}

.btn-light {
    background: linear-gradient(#FFFFFF 0%, #FFFFFF 50%, #DDDDDD 50%, #DDDDDD 100%);
}

.btn-dark {
    background: linear-gradient(#414141 0%, #414141 50%, #212529 50%, #212529 100%);
}

/*
.btn-primary {
    background: linear-gradient(#4784ff 0%, #4784ff 50%, #0060ec 50%, #0060ec 100%);
}

.btn-info {
    background: linear-gradient(#87ceeb 0%, #87ceeb 50%, #0dcaf0 50%, #0dcaf0 100%);
}

.btn-danger {
    background: linear-gradient(#F74259 0%, #F74259 50%, #dc143c 50%, #dc143c 100%);
}

.btn-warning {
    background: linear-gradient(#FFDF00 0%, #FFDF00 50%, #ffc107 50%, #ffc107 100%);
}

.btn-success {
    background: linear-gradient(#24a424 0%, #24a424 50%, #008000 50%, #008000 100%);
}

.btn-violet {
    background: linear-gradient(#a424a4 0%, #a424a4 50%, #800080 50%, #800080 100%);
}

.btn-orange {
    background: linear-gradient(#fd7e14 0%, #fd7e14 50%, #eb5300 50%, #eb5300 100%);
}

.btn-light {
    background: linear-gradient(#FFFFFF 0%, #FFFFFF 50%, #DDDDDD 50%, #DDDDDD 100%);
}

.btn-dark {
    background: linear-gradient(#414141 0%, #414141 50%, #212529 50%, #212529 100%);
}
*/

.circle-thumb200 {
    object-fit: cover;
    object-position: top;
    background-color: #ffc107;
    border-radius: 50%;
    width: 200px;
    height: 200px;
    filter: contrast(120%);
}

.circle-thumb {
    object-fit: cover;
    object-position: top;
    background-color: #ffc107;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    filter: contrast(120%);
}
.circle-mini-thumb {
    object-fit: cover;
    object-position: top;
    background-color: #ffc107;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    filter: contrast(120%);
}
.circle-xmini-thumb {
    object-fit: cover;
    object-position: top;
    background-color: #ffc107;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    filter: contrast(120%);
}
.circle-lg-thumb {
    object-fit: cover;
    object-position: top;
    background-color: #ffc107;
    border-radius: 50%;
    width: 65px;
    height: 65px;
    filter: contrast(120%);
}

/* アイテム用アイコン
.circle-lg-thumb2 {
    object-fit: contain;
    object-position: center;
    background-color: #ffc107;
    border: 1px solid #121212;
    border-radius: 25%;
    width: 65px;
    height: 65px;
}
 */

/* アイテム用アイコン */
.square-thumb {
    object-fit: contain;
    object-position: center;
    background-color: #ffc107;
    border-radius: 0%;
    width: 40px;
    height: 40px;
    filter: contrast(120%);
}

.square-mini-thumb {
    object-fit: contain;
    object-position: center;
    background-color: #ffc107;
    border-radius: 0%;
    width: 25px;
    height: 25px;
    filter: contrast(120%);
}

.square-lg-thumb {
    object-fit: contain;
    object-position: center;
    background-color: #ffc107;
    border-radius: 0%;
    width: 65px;
    height: 65px;
    filter: contrast(120%);
}

.store-thumb {
    object-fit: cover;
    object-position: center;
    background-color: #800080;
    border: 1px solid #121212;
    border-radius: 0%;
    width: 100%;
    height: 60px;
    filter: contrast(120%);
}

.form-check-input:checked {
    background-color: #800080 !important;
    border-color: #800080 !important;
}

.form-check-input {
    width: 1.25em !important;
    height: 1.25em !important;
}

.form-select-xsm {
    padding-top: 0.05rem;
    padding-bottom: 0.05rem;
    padding-left: 0.5rem;
    font-size: 0.5rem;
}

.form-select.bg-dark {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

.op-top {
    object-position: top !important;
}

.op-center {
    object-position: center !important;
}

.op-bottom {
    object-position: bottom !important;
}

.border {
    border: 1px solid #121212 !important;
}

.border-right {
    border-right: 1px solid #121212 !important;
}

.border-gray {
    border: 1px solid #999999 !important;
}

.border-white {
    border: 1px solid #FFFFFF !important;
}
.border-white-2 {
    border: 2px solid #FFFFFF !important;
}
.border-right-white {
    border-right: 1px solid #FFFFFF !important;
}

.dashed {
    border: 1px dashed #121212 !important;
}
.dashed-white {
    border: 1px dashed #FFFFFF !important;
}
.dashed-white-2 {
    border: 2px dashed #FFFFFF !important;
}


.btn-close {
    --bs-btn-close-opacity: 1;
}

.grayscale{
    filter: grayscale(100%);
}
.sepia{
    filter: sepia(100%);
}
.contrast{
    filter: contrast(120%);
    background-color: #121212;
}

.silvercolor {
    background: linear-gradient(to right, #7F7F7F, #FFFFFF, #7F7F7F, #FFFFFF, #7F7F7F) 0% center/200%;
    animation: silvercolor 3s linear infinite;
}
@keyframes silvercolor {
    100% { background-position-x: 200%; }
}

.goldcolor {
    background: linear-gradient(to right, #AD9300, #FFEE93, #AD9300, #FFEE93, #AD9300) 0% center/200%;
    animation: goldcolor 3s linear infinite;
}
@keyframes goldcolor {
    100% { background-position-x: 200%; }
}

.rainbowcolor {
    background: linear-gradient(to right, Magenta, yellow, Cyan, Magenta) 0% center/200%;
    animation: rainbowcolor 3s linear infinite;
}
@keyframes rainbowcolor {
    100% { background-position-x: 200%; }
}

.burningcolor {
    /* 両端と中心を「鮮やかな赤」に。その間をオレンジと黄色が駆け抜けます */
    background: linear-gradient(90deg, #E57A00, #FE2D49, #E57A00, #ffff00, #E57A00) 0% center / 200%;
    animation: burningcolor 1.5s linear infinite;
}
@keyframes burningcolor {
    100% { background-position-x: 200%; }
}

.darkmattercolor {
    /* 黒と鮮やかな紫・マゼンタを混ぜることで、闇の中でエネルギーが走る様子を表現 */
    background: linear-gradient(to right, #000, #9d00ff, #000, #ff00ff, #000) 0% center / 200%;
    animation: darkmattercolor 1.5s linear infinite;
}
@keyframes darkmattercolor {
    100% { background-position-x: 200%; }
}

.text-shadow-none {
    text-shadow: 0px 0px 0 #121212, 0px 0px 0 #121212, 0px 0px 0 #121212, 0px 0px 0 #121212, 0px 0px 0 #121212, 0 0px 0 #121212, 0px 0 0 #121212, 0px 0 0 #121212 !important;
}

.direct-chat-text {
    background-color: #121212;
}
.direct-chat-text::after, .direct-chat-text::before {
    border-right-color: #121212;
}
.end > .direct-chat-text {
    background-color: #121212;
    border-color: #121212;
}
.end > .direct-chat-text::after, .end > .direct-chat-text::before {
    border-left-color: #121212;
}

.card-body.p-0 .table thead > tr > th:first-of-type, .card-body.p-0 .table thead > tr > td:first-of-type, .card-body.p-0 .table tfoot > tr > th:first-of-type, .card-body.p-0 .table tfoot > tr > td:first-of-type, .card-body.p-0 .table tbody > tr > th:first-of-type, .card-body.p-0 .table tbody > tr > td:first-of-type {
    padding-left: 0.25rem;
}

.card-body.p-0 .table thead > tr > th:first-of-type, .card-body.p-0 .table thead > tr > td:first-of-type, .card-body.p-0 .table tfoot > tr > th:first-of-type, .card-body.p-0 .table tfoot > tr > td:first-of-type, .card-body.p-0 .table tbody > tr > th:first-of-type, .card-body.p-0 .table tbody > tr > td:first-of-type {
    padding-left: 0.25rem;
}

.card-body.p-0 .table thead > tr > th:last-of-type, .card-body.p-0 .table thead > tr > td:last-of-type, .card-body.p-0 .table tfoot > tr > th:last-of-type, .card-body.p-0 .table tfoot > tr > td:last-of-type, .card-body.p-0 .table tbody > tr > th:last-of-type, .card-body.p-0 .table tbody > tr > td:last-of-type {
    padding-right: 0.25rem;
}

.table-admin > thead > tr > th {
    background-color: #121212 !important;
    color: #FFFFFF;
}

.table-admin > tbody > tr.update > td {
    background-color: #ffc107 !important;
}

.table-admin > tbody > tr > td {
    color: #121212;
    text-shadow: 0px 0px 0 #121212, 0px 0px 0 #121212, 0px 0px 0 #121212, 0px 0px 0 #121212, 0px 0px 0 #121212, 0 0px 0 #121212, 0px 0 0 #121212, 0px 0 0 #121212 !important;
}


.offcanvas {
    transition: transform 0.15s linear !important;
}


#modall{
  --bs-modal-zindex: 1055 !important;
}
#modal2 {
  --bs-modal-zindex: 1056 !important;
}
#modal3 {
  --bs-modal-zindex: 1057 !important;
}
.modal-backdrop {
    --bs-backdrop-zindex: 1045;
    --bs-backdrop-opacity: 0.7 !important;
}
.modal-body {
  -webkit-overflow-scrolling: touch !important;
}
.modal-dialog-scrollable .modal-body {
    -webkit-overflow-scrolling: touch !important;
    max-height: 410px !important;
}
/*
@media (min-width: 620px) {
  .modal-body {
    min-width: 620px !important;
  }
}
*/
.modal-content { 
    border: 0px solid rgba(0, 0, 0, 0.2) !important;
    background-color: transparent !important;
}
.modal-header { 
    border-bottom: 0px solid #dee2e6 !important;
    min-height: 3px;
} 

.modal .btn-close {
    outline: none !important;
    filter: invert(1);
    opacity: 1 !important;
    z-index: 1200 !important;
    padding: 0.5rem !important;
    background-color: #FFFFFF;
    border-radius: 50%;
}

.iframe-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Loading */
#nowloading {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1061;
	width: 100vw;
	height: 100vh;
    height: 100dvh; /* ここを追加！ iOSで正確な高さを取得します */
	background-color: #000;
	opacity: 0.5;
	background-image: url("/assets/images/Loading-bar.svg?20260220");
	background-repeat:no-repeat;
	background-position:center center;
}

/* Loading */
#blackout {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100vw;
	height: 100vh;
	background-color: #000;
	opacity: 1;
}

.snowfall-flakes {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform, top, left;
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}









/* COLOR */
[class$="-newicon"]{
display: inline-flex;
    padding: 1px;
    position: relative;
    z-index: 0;
    border-radius: 50%;
    contain: paint;
    isolation: isolate;
}
[class$="-newicon"]::before {
    content: "";
    position: absolute;
    inset: 0px;
    width: 200%;
    background-size: 50% 100%;
    z-index: -1;
    transform: translateZ(0);
    will-change: transform;
}

@keyframes newicon {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.grayscale-newicon {
    filter: grayscale(100%);
    background-color: #BBBBBB;
}
.sepia-newicon{
    filter: sepia(100%);
    background-color: #BD9300;
}
.contrast-newicon::before{
    background-color: #ffc107;
}
.silvercolor-newicon::before {
    background: linear-gradient(90deg, 
    #4D4D4D, #B8B8B8, #FFFFFF, #B8B8B8, 
    #4D4D4D, #B8B8B8, #FFFFFF, #B8B8B8, #4D4D4D);
    animation: newicon 3s linear infinite;
}
.goldcolor-newicon::before {
    background: linear-gradient(90deg, 
    #734610, #E1B12C, #FFEE93, #E1B12C, 
    #734610, #E1B12C, #FFEE93, #E1B12C, #734610);
    animation: newicon 3s linear infinite;
}
.rainbowcolor-newicon::before {
    background: linear-gradient(90deg, 
    Magenta, yellow, Cyan, lightGreen, 
    Magenta, yellow, Cyan, lightGreen, Magenta);
    animation: newicon 3s linear infinite;
}
.burningcolor-newicon::before {
    /* 両端と中心を「鮮やかな赤」に。その間をオレンジと黄色が駆け抜けます */
    background: linear-gradient(90deg, 
    #E57A00, #FE2D49, #ffff00, #E57A00,  
    #E57A00, #FE2D49, #ffff00, #E57A00, #E57A00);
    animation: newicon 1s linear infinite;
}
.darkmattercolor-newicon::before {
    /* 黒と鮮やかな紫・マゼンタを混ぜることで、闇の中でエネルギーが走る様子を表現 */
    background: linear-gradient(90deg, 
    #000, #9d00ff, #000,
    #000, #ff00ff, #000, #000);
    animation: newicon 1s linear infinite;
}

.bg-silver{
    background-color: #999999 !important;
}
.bg-gold{
    background-color: #AD9300 !important;
}

.bg-warning-primary{
    background: linear-gradient(90deg, #ffc107 50%, #0d6efd 50%) !important;
}
.bg-warning-danger{
    background: linear-gradient(90deg, #ffc107 50%, #dc3545 50%) !important;
}
.bg-warning-info{
    background: linear-gradient(90deg, #ffc107 50%, #0dcaf0 50%) !important;
}
.bg-warning-orange{
    background: linear-gradient(90deg, #ffc107 50%, #fd7e14 50%) !important;
}
.bg-warning-success{
    background: linear-gradient(90deg, #ffc107 50%, #00d600 50%) !important;
}
.bg-warning-pink{
    background: linear-gradient(90deg, #ffc107 50%, #d63384 50%) !important;
}
.bg-warning-dark{
    background: linear-gradient(90deg, #ffc107 50%, #121212 50%) !important;
}
.bg-warning-silver{
    background: linear-gradient(90deg, #ffc107 50%, #999999 50%) !important;
}
.bg-warning-gold{
    background: linear-gradient(90deg, #ffc107 50%, #AD9300 50%) !important;
}
.bg-warning-light{
    background: linear-gradient(90deg, #ffc107 50%, #FFFFFF 50%) !important;
}


.bg-dark-light{
    background: linear-gradient(90deg, #121212 50%, #FFFFFF 50%) !important;
}