.rank_f, .gray {
    color: #494969;
}
.rank_e, .green {
    color: #008000;
}
.rank_d, .darkred {
    color: #8B0000;
}
.rank_c, .blue {
    color: #0000cd;
}
.rank_b, .orange {
    color: #DF6C00;
}
.rank_a, .red {
    color: #FF0000;
}
.rank_s, .purple {
    color: #9932cc;
}
.center {
    text-align: center;
    display: inline-block; /* または block */
    width: 100%; /* 必要に応じて幅を指定 */
}

.left {
    text-align: left;
    display: inline-block; /* または block */
    width: 100%; /* 必要に応じて幅を指定 */
}

.right {
    text-align: right;
    display: inline-block; /* または block */
    width: 100%; /* 必要に応じて幅を指定 */
}


.text-button {
    background-color: transparent;
    border: 0;
    margin-left: 0.2em;
    margin-right: 0.2em;
}

.home_line_height {
     /* height: 38px; */
}


/* footer用 */
.footer-link {
    text-decoration: underline; /* リンクに下線を追加 */
}

/* common */

.custom-max-width-left {
    max-width: 1200px;
    margin-right: auto;
    margin-left: 0;
}

.custom-max-width {
    max-width: 1200px;
}

.collapsing {
    -webkit-transition: none !important;
    transition: none !important;
}

@media (max-width: 767px) {
    body {
        font-size: 0.85em;
    }
    h2 {
        font-size: 1.5em;
        font-weight: bold;
    }
    h3 {
        font-size: 1.2em;
        font-weight: bold;
    }
}

@media (max-width: 767px) {
    .small1 {
        font-size: 0.70em;
    }
}

.table-div-border {
    font-size: 2px !important;
    background-color:  rgb(168, 161, 161) !important;
    padding: 0em !important;
}

@media (max-width: 767px) {
    .table-div-border {
        border: 0.35em solid rgb(168, 161, 161);
    }
}

.centering {
    text-align: center;
}

input[type=text] {
    font-size: 16px;
}

.highlight {
    background-color: #5d1459;
    color: #fff; /* This is to make the text visible on the dark background. */
    text-align: center;
}

.highlight2 {
    background-color: #7e7a7e;
    color: #fff; /* This is to make the text visible on the dark background. */
    text-align: center;
}

.highlight3 {
    background-color: #9e8b9e;
    color: #fff; /* This is to make the text visible on the dark background. */
    text-align: left;
}

.highlight4 {
    background-color: #d8b620;
    color: #fff; /* This is to make the text visible on the dark background. */
    text-align: left;
}

.rainbow-text {
    background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
    -webkit-background-clip: text;
    color: transparent;
    font-weight: bold;
    display: inline-block;
}

.table-fixed-layout {
    table-layout: fixed;
    width: 100%;
}

.wide-column {
    width: 180px;
}

.narrow-column {
    width: 70px;
}

.narrow2-column {
    width: 90px;
}

.card-bg1 {
    background-color: rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0.2);
}

.card {
    background-color: rgba(255, 255, 255, 0.75) !important;
}

.bg-1 {
    background-color: rgba(240, 240, 240, 0.6);
}

.bg-2 {
    background-color: rgba(255, 255, 255, 0.3);
}

.bg-3 {
    background-color: rgba(255, 255, 255, 0.6);
}

.border1 {
    border: 1px solid;
    border-color: rgb(168, 161, 161, 0.6);
}

.border2 {
    border-top: 1px solid rgba(126, 122, 126, 0.3);

}

.comment1 {
    text-align: left;
    background: rgba(240, 240, 240, 0.6);
    padding: 10px;
    max-width: 100%;
}

.comment2 {
    text-align: left;
    background: rgba(180, 164, 80, 0.2);
    padding: 10px;
    max-width: 100%;
}

.comment3 {
    text-align: center;
    background: rgba(188, 231, 151, 0.5);
    padding: 10px;
    width: 100%;
}

.comment4 {
    text-align: center;
    background: rgba(146, 236, 179, 0.5);
    padding: 10px;
    width: 100%;
}

.comment5 {
    text-align: left;
    background: rgba(255, 255, 255, 0.5);
    padding: 1px;
    width: 100%;
}

.alert-warning{
    text-align: left;
    background-color: rgba(232, 215, 105, 0.877);
    color: black;
    padding: 6px;
}

.alert-error{
    text-align: left;
    background-color: rgba(230, 111, 111, 0.877);
    color: white;
    padding: 6px;
}

@keyframes blinker {
    50% {
      opacity: 0;
    }
}

@keyframes marquee {
    0% {
        transform: translateX(100vw);
      }
      100% {
        transform: translateX(-100%);
      }
}

.marquee-text {
    display: inline-block;
    white-space: nowrap;
}

.hide_name {
    display: none;
}

/* キャラ画像 */
#chara-pet-wrapper {
    position: relative;
    display: inline-block;
}

#chara-image {
    position: relative;
    z-index: 2;
}

#pet-image {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0px;
    z-index: 3;
    width: 50%;
    height: 50%;
}

.material-image {
    position: relative;
    width: 28px;
    height: 28px;
}

#effect-image {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0px;
    z-index: 4;
    width: 100%;
    height: 100%;
}

/* map */


#map-sub-chara-image1 {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0px;
    z-index: 2;
    width: 50%;
    height: 50%;
}
#map-sub-chara-image2 {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0px;
    z-index: 2;
    width: 50%;
    height: 50%;
}
#map-sub-chara-image3 {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0px;
    z-index: 2;
    width: 50%;
    height: 50%;
}
#map-sub-chara-image4 {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0px;
    z-index: 2;
    width: 50%;
    height: 50%;
}

#map-world-flag {
    position: absolute;

    width: calc(24px * var(--base-ratio));
    height: calc(16px * var(--base-ratio));          
    left: calc(12px * var(--base-ratio));     
    top: calc(-30px * var(--base-ratio));   

    margin: 0px;
    z-index: 2;
    opacity: 1;
}

#map-image {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 0;
}

#map-object-image {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
}

@media (max-width: 767px) {
    .map-size {
        width: 36px;
        height: 36px;
    }
    .map-object-size {
        width: 36px;
        height: 45px;
    }
}

/* 大きい画面用の設定 */
@media (min-width: 768px) {
    .map-size {
        width: 48px;
        height: 48px;
    }
    .map-object-size {
        width: 48px;
        height: 60px;
    }
}

:root {
    --base-ratio: 1; /* 初期値を1に設定 */
}



.linkLines {
    position:absolute;
    width: calc(1400px * var(--base-ratio));
    height: calc(1600px * var(--base-ratio));    
    left: calc(0px * var(--base-ratio));     
    top: calc(0px * var(--base-ratio));  
    pointer-events:none;
}

.world-land_map-size {
    position:absolute;   
    width: calc(1400px * var(--base-ratio));
    height: calc(1600px * var(--base-ratio));    
    left: calc(0px * var(--base-ratio));     
    top: calc(0px * var(--base-ratio));  
}


.world-map-size {
    position:absolute;   
    width: calc(48px * var(--base-ratio));
    height: calc(48px * var(--base-ratio));     
    left: calc(0px * var(--base-ratio));     
    top: calc(0px * var(--base-ratio));  
}

.world-map-object-size {
    position:absolute;   
    width: calc(48px * var(--base-ratio));
    height: calc(60px * var(--base-ratio));          
    left: calc(0px * var(--base-ratio));     
    top: calc(-16px * var(--base-ratio));   
}


.transparent-circle {
    position: absolute;

    width: calc(64px * var(--base-ratio));
    height: calc(48px * var(--base-ratio));          
    left: calc(-8px * var(--base-ratio));     
    top: calc(1px * var(--base-ratio));   


    border-radius: 50%;      /* 丸くするための設定 */
    opacity: 0.50;
    border: none;            /* 枠線を表示しない */
}

.transparent-circle2 {
    position: absolute;

    width: calc(96px * var(--base-ratio));
    height: calc(64px * var(--base-ratio));          
    left: calc(-24px * var(--base-ratio));     
    top: calc(-6px * var(--base-ratio));   

    border-radius: 50%;      /* 丸くするための設定 */
    opacity: 0.80;
    border: none;            /* 枠線を表示しない */
}

.transparent-marker {
    position: absolute;
    z-index: 998;           /* 座標情報より後面に表示 */

    width: calc(24px * var(--base-ratio));
    height: calc(24px * var(--base-ratio));          
    left: calc(-12px * var(--base-ratio));
    top: calc(-24px * var(--base-ratio));   

    font-weight: bold;            /* 太字にする */
    border-radius: 50%;      /* 丸くするための設定 */
    border: none;            /* 枠線を表示しない */
    box-sizing: border-box;  /* borderを含めたサイズ計算 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* battle */
.chara-name-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}



.users {
    font-weight: bold;
    display: inline;
}

.enemies {
    font-weight: bold;
    display: inline;
}

.user_monster_name {
    color: rgb(112, 5, 110);
}

.action-bar {
    margin: 1px;
    width: 100%;
    height: 2px;
    background-color: #f1f1f3;
    border-radius: 3px;
}

.action-bar > .current-action {
    height: 2px;
    background-color: #8da4d6;
    border-radius: 3px;
    width: 0%; /* This will be changed dynamically */
}

.health-bar {
    margin: 1px;
    width: 100%;
    height: 6px;
    background-color: #f68888;
    border-radius: 3px;
    position: relative;
}

.health-bar > .pre-health {
    height: 6px;
    background-color: #fab73c;
    border-radius: 3px;
    width: 0%; /* This will be changed dynamically */
    position: absolute;
    left: 0;
}

.health-bar > .current-health {
    height: 6px;
    background-color: #57c65b;
    border-radius: 3px;
    width: 0%; /* This will be changed dynamically */
    position: absolute;
    left: 0;
}

.mp-bar {    
    margin: 1px;
    width: 100%;
    height: 5px;
    background-color: #c7c7d8;
    border-radius: 3px;
}

.mp-bar > .current-mp {
    height: 6px;
    background-color: #7688ee;
    border-radius: 3px;
    width: 0%; /* This will be changed dynamically */
}

.damage {
    color: red;
    display: inline;
    font-weight: bold;
    font-size: 1.5em;
}

.mpdamage {
    color: rgba(255, 0, 166);
    display: inline;
    font-weight: bold;
    font-size: 1.5em;
}

.cure {
    color: rgb(45, 160, 168);
    display: inline;
    font-weight: bold;
    font-size: 1.5em;
}

.attack_chara {
    border-color: #a9a7fa;
    border-width: 1px;
    border-style: solid;
    background-color: rgb(45, 160, 168, 0.1);

    color: blue;
    font-weight: bold;
}
/* 
.enemy_attack_chara {
    border-color: #e02181;
    border-width: 1px;
    border-style: solid;
    background-color: rgba(199, 68, 155, 0.1);

    color: rgb(221, 21, 21);
    font-weight: bold;
} */

.battle_message {
    color: rgb(70, 45, 212);
    display: inline;
    font-size: 1.6em;
    font-weight: bold;
}

.battle_lose_message {
    color: rgb(230, 51, 51);
    display: inline;
    font-size: 1.6em;
    font-weight: bold;
}

.base_skill {
    color: rgb(93, 93, 106);
}

.skill_user_message {
    color: rgb(25, 28, 196);
    display: inline;
    font-size: 1.0em;
    font-weight: bold;
}

.skill_title {
    color: rgb(196, 25, 181);
    display: inline;
    font-size: 1.3em;
    font-weight: bold;
}

.skill_message {
    color: rgb(8, 105, 57);
    display: inline;
}

.critical {
    color: rgb(85, 0, 255);
    display: inline;
    font-weight: bold;
    font-size: 1.5em;
}

/* jquery用 */
table.dataTable tbody td {
    padding: 4px !important;
}
table.dataTable {
    margin: 0 !important;
}

table.nopad_table tbody td {
    padding: 0 !important;
}
table.nopad_table {
    margin: 0 !important;
}
.dataTables_info, .dataTables_length, .dataTables_filter, .dataTables_paginate {
    background-color: rgb(248, 238, 238, 0.5);
}

.rainbow{
    background: linear-gradient(to right,#e60000,#f39800,#a8a230,#009944,#0068b7,#1d2088,#920783,#e60000) 0 / 200%;
    height: 80px;
    animation: 3s rainbow linear infinite;
    border-radius: 10px;
    opacity: 0.8;
}
@keyframes rainbow{
    100% { background-position: 200%; }
}

.details-style {
    --accent-color: #3388ff;
    --v-rythm: 1.6em;
    --gap: 1em;
    position: relative;
    border-radius: 1em;
    width: fit-content;
}

.favorite-btn {
  font-size: 24px; /* アイコンのサイズを調整 */
  color: #9a9ae3; /* 非アクティブ時の色を見やすく変更 */
  border: none;
  background-color: transparent;
  cursor: pointer;
  transition: color 0.3s ease;
}

.favorite-btn:hover {
  color: #e44; /* ホバー時の色 */
}

.is-favorite {
  color: #e44; /* アクティブ（お気に入り）時の色 */
}

.btn-link {
    user-select: text !important;
}
  
/* ソートのマーク */
.sortableTable thead th {
    cursor: pointer;
    position: relative;
}

.sortableTable thead th:not(.no-sort)::before, .sortableTable thead th:not(.no-sort)::after {
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    border: 5px solid transparent;
    right: 10px;
    top: 50%;
}

.sortableTable thead th:not(.no-sort)::before {
    border-bottom-color: #aaa;
    margin-top: -10px;
}
.sortableTable thead th:not(.no-sort)::after {
    border-top-color: #aaa;
    margin-top: 2px;
}

.sortableTable thead th.asc:not(.no-sort)::before {
    border-bottom-color: #444;
}

.sortableTable thead th.desc:not(.no-sort)::after {
    border-top-color: #444;
}

/* ペットレース関連 */
.waku1 { background-color: rgba(255, 255, 255, 0.3); } /* 白 */
.waku2 { background-color: rgba(0, 0, 0, 0.3); } /* 黒 */
.waku3 { background-color: rgba(255, 0, 0, 0.3); } /* 赤 */
.waku4 { background-color: rgba(0, 0, 255, 0.3); } /* 青 */
.waku5 { background-color: rgba(255, 255, 0, 0.3); } /* 黄 */
.waku6 { background-color: rgba(0, 255, 0, 0.3); } /* 緑 */
.waku7 { background-color: rgba(255, 128, 0, 0.3); } /* 橙 */
.waku8 { background-color: rgba(255, 128, 128, 0.3); } /* 桃 */


/* 戦略の色分け */
.strategy-nige { /* 逃げ */
    background-color: rgba(255, 0, 0, 0.2); 
}
.strategy-sashi { /* 差し */
    background-color: rgba(0, 0, 255, 0.2);
}
.strategy-oikomi { /* 追込 */
    background-color: rgba(0, 255, 0, 0.2);
}
.strategy-senko { /* 先行 */
    background-color: rgba(255, 165, 0, 0.2);
}


/* bs5の上書き */
.table {
    --bs-table-bg: rgba(255, 255, 255, 0.8) !important;
    --bs-table-hover-bg: rgba(255, 255, 255, 0.9) !important;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.7) !important;
}

/* グラフ関連のスタイル */
.card.shadow-sm {
    border: none;
    border-radius: 10px;
    overflow: hidden;
}

.card-header.bg-gradient {
    background: linear-gradient(to right, rgba(40, 167, 69, 0.1), rgba(23, 162, 184, 0.1));
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.legend {
    font-size: 0.9rem;
    color: #666;
}

.legend i {
    font-size: 0.8rem;
    margin-right: 5px;
}

.legend .text-success {
    color: #28a745 !important;
}

.legend .text-info {
    color: #17a2b8 !important;
}

html { -webkit-text-size-adjust: 100%; } /* または none */

/* 汎用セリフセクションのスタイル */
.turn-dialogues-section {
    border-radius: 0.375rem;
    margin: 0rem 0;
    padding: 0rem;
    background-color: rgba(173, 216, 230, 0.4); /* 青ベースの灰色（味方） */
    border: 1px solid rgba(173, 216, 230, 0.5);
}

/* 敵チームの背景色 */
.turn-dialogues-section:has(.enemy-dialogue) {
    background-color: rgba(255, 218, 185, 0.4); /* オレンジベースの灰色（敵） */
    border: 1px solid rgba(255, 218, 185, 0.5);
}

.dialogue-bubble {
    background-color: #e3f2fd;
    border: 1px solid #bbdefb;
    border-radius: 0.5rem;
    padding: 0.5rem 0.5rem;
    font-weight: 500;
    max-width: 80%;
    word-wrap: break-word;
}

/* 重ダメージバブルは薄赤 */
.dialogue-heavy_damage {
    background-color: #ffebee !important;
    border-color: #ffcdd2 !important;
    color: #c62828;
}

.enemy-dialogue {
    background-color: #fce4ec;
    border-color: #f8bbd9;
}

/* キャラクター名のスタイル（画像下） */
.dialogue-character-name {
    font-size: 0.7rem;
    color: #2e7db8; /* 青ベース（味方） */
    margin-top: 0.2rem;
    white-space: nowrap;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 敵チームのキャラクター名 */
.turn-dialogues-section:has(.enemy-dialogue) .dialogue-character-name {
    color: #d87c47; /* オレンジベース（敵） */
}


/* ❶ 本来の計算サイズは 16px 以上に */
/* iOSでフォーカス時の高さ変化を防止するためのスタイル */
.fix-ios-zoom {
    font-size: 24px;    
    transform: scale(.60);
    transform-origin: left top;
    height: 26px;
    width: fit-content;
    position: relative;
    white-space: nowrap;
    display: flex;
    align-items: flex-start;
}

/* iOSの入力フィールドのデフォルトスタイルを無効化 */
.ios-ignore-input {
    appearance: none; 
    -webkit-appearance: none; 
    border: none;  
    font: inherit;  
    padding: 0; 
    border-radius: 0;
    -webkit-touch-callout: none;
    max-height: 42px;
}

/* iOSのボタンのデフォルトスタイルを無効化 */
.ios-ignore-button {
    appearance: none; 
    -webkit-appearance: none; 
    border: none;  
    font: inherit; 
    margin: 0;
    border-radius: 0;

}

/* あるけみすと 特別カラー（やさしい配色） */
/* 1) Lavender */
.btn-alchemist-soft-lavender { color: #fff; background-color: #c4a3d4; border-color: #a890c0; }
.btn-alchemist-soft-lavender:hover { color: #fff; background-color: #a890c0; border-color: #9276a7; }
.btn-alchemist-soft-lavender:focus { color: #fff; background-color: #a890c0; border-color: #9276a7; box-shadow: 0 0 0 0.25rem rgba(205, 180, 219, 0.45); }
.btn-alchemist-soft-lavender:active { color: #fff; background-color: #9276a7; border-color: #7f6796; }
.btn-alchemist-soft-lavender:disabled { color: #fff; background-color: #c4a3d4; border-color: #a890c0; opacity: .65; }

/* 2) Sky */
.btn-alchemist-soft-sky { color: #fff; background-color: #97baf1; border-color: #76a8ee; }
.btn-alchemist-soft-sky:hover { color: #fff; background-color: #76a8ee; border-color: #659ceb; }
.btn-alchemist-soft-sky:focus { color: #fff; background-color: #76a8ee; border-color: #659ceb; box-shadow: 0 0 0 0.25rem rgba(163, 196, 243, 0.45); }
.btn-alchemist-soft-sky:active { color: #fff; background-color: #659ceb; border-color: #558fe7; }
.btn-alchemist-soft-sky:disabled { color: #fff; background-color: #97baf1; border-color: #76a8ee; opacity: .65; }

/* 3) Mint */
.btn-alchemist-soft-mint { color: #fff; background-color: #a9dbbb; border-color: #88cdaa; }
.btn-alchemist-soft-mint:hover { color: #fff; background-color: #88cdaa; border-color: #68bf96; }
.btn-alchemist-soft-mint:focus { color: #fff; background-color: #88cdaa; border-color: #68bf96; box-shadow: 0 0 0 0.25rem rgba(183, 228, 199, 0.45); }
.btn-alchemist-soft-mint:active { color: #fff; background-color: #68bf96; border-color: #57b083; }
.btn-alchemist-soft-mint:disabled { color: #fff; background-color: #a9dbbb; border-color: #88cdaa; opacity: .65; }

/* 4) Peach */
.btn-alchemist-soft-peach { color: #fff; background-color: #ffc98c; border-color: #ffb56d; }
.btn-alchemist-soft-peach:hover { color: #fff; background-color: #ffb56d; border-color: #ffa24a; }
.btn-alchemist-soft-peach:focus { color: #fff; background-color: #ffb56d; border-color: #ffa24a; box-shadow: 0 0 0 0.25rem rgba(255, 214, 165, 0.45); }
.btn-alchemist-soft-peach:active { color: #fff; background-color: #ffa24a; border-color: #ff9025; }
.btn-alchemist-soft-peach:disabled { color: #fff; background-color: #ffc98c; border-color: #ffb56d; opacity: .65; }

/* 5) Rose */
.btn-alchemist-soft-rose { color: #fff; background-color: #ffb7c6; border-color: #ffa1b3; }
.btn-alchemist-soft-rose:hover { color: #fff; background-color: #ffa1b3; border-color: #ff8ba1; }
.btn-alchemist-soft-rose:focus { color: #fff; background-color: #ffa1b3; border-color: #ff8ba1; box-shadow: 0 0 0 0.25rem rgba(255, 202, 212, 0.45); }
.btn-alchemist-soft-rose:active { color: #fff; background-color: #ff8ba1; border-color: #ff7893; }
.btn-alchemist-soft-rose:disabled { color: #fff; background-color: #ffb7c6; border-color: #ffa1b3; opacity: .65; }

/* 6) Sand */
.btn-alchemist-soft-sand { color: #fff; background-color: #dde3b6; border-color: #d2dca1; }
.btn-alchemist-soft-sand:hover { color: #fff; background-color: #d2dca1; border-color: #c7d48b; }
.btn-alchemist-soft-sand:focus { color: #fff; background-color: #d2dca1; border-color: #c7d48b; box-shadow: 0 0 0 0.25rem rgba(233, 237, 201, 0.45); }
.btn-alchemist-soft-sand:active { color: #fff; background-color: #c7d48b; border-color: #bccd78; }
.btn-alchemist-soft-sand:disabled { color: #fff; background-color: #dde3b6; border-color: #d2dca1; opacity: .65; }

/* あるけみすと特別ボタン（高彩度マゼンタ系） */
.btn-alchemist {
    color: #fff;
    background-color: #a81caf; /* vivid */
    border-color: #8d1393;
    font-weight: 600;
}

.btn-alchemist:hover {
    color: #fff;
    background-color: #8d1393;
    border-color: #7c117f;
}

.btn-alchemist:focus, .btn-alchemist.focus {
    color: #fff;
    background-color: #8d1393;
    border-color: #7c117f;
    box-shadow: 0 0 0 0.25rem rgba(168, 28, 175, 0.35);
}

.btn-alchemist:disabled, .btn-alchemist.disabled {
    color: #fff;
    background-color: #a81caf;
    border-color: #8d1393;
    opacity: .65;
}

.btn-alchemist:active, .btn-alchemist.active {
    color: #fff;
    background-color: #740e78;
    border-color: #620c65;
}