:root {
  --table_bg:#333;
  --font_main: #fff;

  --color-text: #222;
  --color-bg: #fff;
  --color-primary: #2b6cf6;
  --color-border: #ddd;

  --contents-width:950px;

  --radius-sm: 4px;
  --radius-md: 8px;
}


/*背景 デザイン*/
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background: linear-gradient(-45deg, #222 5%, #444 5%, #444 10%, #222 10%, #222 15%, #444 15%, #444);
    background-size: 10px 10px;
    width: var(--contents-width);
    margin: 0 auto;
    border-left: 2px solid white;
    border-right: 2px solid white;
  }

/*header,footer*/
header {
    background-color: var(--table_bg);
    color:  var(--font_main);

    display: flex;
    justify-content: space-between; /* 要素を左右に配置 */
    align-items: center; /* 要素を垂直方向に中央に配置 */
    padding: 5px;
    margin-bottom: 5px;
    height: 80px;
    min-width: 900px;
}

.header_all {
    display: flex;
    margin: 0 auto; /* メニュー全体を中央に寄せます */
    list-style: none;
    justify-content: center;
}

.header_left {
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 10px;
    margin-right: 5px;
    flex: 3.3;
}

.header_right {
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 10px;
    flex: 2;
}


footer {
    background-color: var(--table_bg);
    color:  var(--font_main);
    text-align: center;
    padding: 5px; /* 上下左右5pxの余白 */
    box-sizing: border-box; /* ボックスサイジングをボーダーボックスに設定 */
}

/* ボタン周り */
    nav ul {
        display: flex; /* 横並びにします */
        padding: 0;
        margin: 0;
        list-style: none;
    }
    
    nav ul li {
        margin-right: 15px; 
    }
    
    nav ul li a {
        position: relative; /* 擬似要素の位置を親要素に相対的にします */
        display: inline-block;
        color: #fff;
        text-decoration: none;
        background-color: #666;
        width: 95px;
        text-align: center;
        overflow: hidden; /* 擬似要素が親要素の外に出ないようにします */
        transition: color 0.3s ease, background-color 0.3s ease;
    }
    
    nav ul li a::after {
        content: ""; /* 擬似要素の中身を空にします */
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0; /* アウトラインの初期幅を0にします */
        height: 2px; /* アウトラインの高さを指定します */
        background-color: rgb(128, 25, 25); /* アウトラインの色を指定します */
        transition: width 0.4s ease; /* 幅の変更をアニメーションで表示します */
    }
    
    nav ul li a:hover {
        color: rgb(128, 25, 25);
        background-color: rgb(0, 0, 0);
        text-decoration: bold;
    }

    nav ul li a:hover::after {
        width: 100%; /* ホバー時にアウトラインが全幅に広がります */
    }


/*コンテンツ部分------------------------------------------------------------------------*/
  main {
      height: auto;
      background-color: rgba(255, 255, 255, 0.5);
  }

  main h2 {
      background-color: #444;
      color: #fff;
      padding: 10px;
      border-radius: 5px;
      position: relative;
      overflow: hidden;
  }

  main h2 {
      background: linear-gradient(45deg, #444 5%, #555 40%, #666 50%);
      color: #fff;
      padding: 10px;
      border-radius: 5px;
      text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
      overflow: hidden; /* 角の丸みに影響を与える */
  }


  main h3 {
      margin-top:5px;
      width: 75%;
      position: relative;
      padding-left: 15px; /* ラインと見出しの間のスペースを広げる */
      font-size: 24px;
      color: white;
      background: linear-gradient(45deg, #222 70%, #666 50%);
      align-items: center;
      margin-bottom: 5px;
  }
  main h3:before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 4px; /* ラインを太くする */
      background-color: white; /* ラインの色を青にする */
  }

  .daizi {
      margin-left:5px;
      color:rgb(255, 190, 212);
      font-weight: bold;
      font-size:20px;
  }

  .main_all {
      padding: 0 5px 0px 5px;
      height: auto;
      margin: 0 auto;
      flex-grow: 1;
  }

  .main_contents {
      padding: 0 5px; /* 左右5pxの余白 */
      margin: 0 auto;
      background-color: #888; /* メインコンテンツの背景色を白に設定 */
      margin-left: 2px; /* 左側の余白 */
      margin-right: 2px; /* 右側の余白 */
      
  }
  .main_contents_table{
      background-color: #666; /* メインコンテンツの背景色を白に設定 */
      padding: 5px;
  }
/*--------------------------------------------------------------------------------------*/

/*コロシアム部分---------------------------------------------------------------------------*/
  .main_colosseum{
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
  }
  .left_chat{
    flex: 1 1 0;           /* 伸びる:1, 縮む:1, 基準幅:0 */
    min-width: 0;          /* 中身がはみ出しても幅を維持するための魔法の指定 */
  }
  
  .right_battle{
    flex: 1 1 0;           /* 伸びる:1, 縮む:1, 基準幅:0 */
    min-width: 0;          /* 中身がはみ出しても幅を維持するための魔法の指定 */  
  }
/*--------------------------------------------------------------------------------------*/






/*セリフ部分（仮移植）---------------------------------------------------------------------------------*/
/* キャラ発言共通処理 */
.serif_control{
    margin-top: 3px;
    margin-bottom: 3px;
    margin-left: 10px;
}
.serif_control_right{
    margin-top: 3px;
    margin-bottom: 3px;
    margin-right: 10px;
}
.character-icon-container {
    box-sizing: border-box; /* パディングやボーダーを含めた高さを計算する */
    width: 60px; /* アイコンの幅 */
    height: 60px;
    min-height: 60px; /* アイコンの最小高さ */
    max-height: 80px; /* アイコンの最大高さ */
    flex-shrink: 0; /* アイコンのサイズが変化しないようにする */
    margin-top: 0;
    margin-bottom: 0;
}
.character-name {
    color: white;
    margin-top: 1px;
    background-color: #701313;
    padding: 1px 9px;
    border-radius: 5px;
    margin-left: 5px;
    display: inline-block;
    position: relative; /* 相対配置を指定 */
    z-index: 4; /* 一番手前に表示 */
}
  
.message {
    font-size: 14px;
    color: #333;
    margin: 0; /* テキストのマージンをリセット */
}


/* 発言の吹き出し */
.speech-container {
    height:auto;
    margin-left :3px;
    margin-top :3px;
    margin-bottom: 3px;
    display: flex;
    align-items: flex-start; /* アイコンと吹き出しの上端を揃える */

  }

.speech-content {
    position: relative; /* 相対配置を指定 */
    z-index: 2; /* character-nameより手前に表示 */
}


.speech-bubble {
    background-color: #fff;
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 7px;
    padding-bottom: 3px;
    position: relative; /* 相対配置を指定 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-left:15px;
    margin-top: -7px;
    z-index: 2;
}
  
.speech-bubble:before {
    content: '';
    position: absolute;
    top: 0;
    right: 100%;
    border-width: 15px;
    border-style: solid;
    border-color: transparent;
    border-right-color: #fff;
    transform: translateY(10%) translateX(60%) rotate(80deg);
    z-index: -1; /* 重なり順を指定 */
}
/*右寄せ*/


/*思考の吹き出し*/
.thinking-container {
    margin-left :3px;
    margin-top :3px;
    margin-bottom: 3px;
    display: flex;
    align-items: flex-start; /* アイコンと吹き出しの上端を揃える */
}

.thinking-content {
    position: relative; /* 相対配置を指定 */
    z-index: 2; /* character-nameより手前に表示 */
}

  
.thinking-bubble {
    background-color:  rgb(180, 180, 180);
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 7px;
    padding-bottom: 3px;
    position: relative; /* 相対配置を指定 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-left:15px;
    margin-top: -7px;
    z-index: 2;
}
  
.thinking-bubble:before {
    content: '';
    position: absolute;
    top: 65%;
    right: 100%;
    width: 8px; /* 吹き出しの直径 */
    height: 8px; /* 吹き出しの直径 */
    background-color: rgb(162, 162, 162); /* 吹き出しの色 */
    border-radius: 50%; /* 丸い形にする */
    transform: translateY(-50%) translateX(0%);
    z-index: -1;
}

.thinking-bubble:after {
    content: '';
    position: absolute;
    top: 70%;
    right: 100%;
    width: 5px; /* 吹き出しの直径 */
    height: 5px; /* 吹き出しの直径 */
    background-color: rgb(124, 124, 124); /* 吹き出しの色 */
    border-radius: 50%; /* 丸い形にする */
    transform: translateX(-30%) translateX(-135%);
    z-index: -1;
}


/*地の分の処理*/


.descript-container {
    margin-left:3px;
    margin-top :3px;
    margin-bottom: 3px;
    display: flex;
    align-items: flex-start; /* アイコンと吹き出しの上端を揃える */
  }

.descript-content {
    position: relative; /* 相対配置を指定 */
    z-index: 2; /* character-nameより手前に表示 */
}


.descript-bubble {
    border-radius: 10px;
    padding-left: 0px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 3px;
    position: relative; /* 相対配置を指定 */
    margin-left:15px;
    margin-top: -7px;
    z-index: 2;
}


/* 右寄せ */
.character-name_right {
    color: white;
    margin-top: 1px;
    background-color: #701313;
    padding: 1px 9px;
    border-radius: 5px;
    margin-right: 5px;
    display: inline-block;
    position: relative; /* 相対配置を指定 */
    z-index: 4; /* 一番手前に表示 */
    
}

.speech-container_right {
    margin-right:3px;
    margin-top :3px;
    margin-bottom: 3px;

    display: flex;
    align-items: flex-start; /* アイコンと吹き出しの上端を揃える */
    flex-direction: row-reverse;
}

.speech-content_right {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* 右寄せに */
}


.speech-bubble_right {
    background-color: #fff;
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 7px;
    padding-bottom: 3px;
    position: relative; /* 相対配置を指定 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-right:15px;
    margin-top: -7px;
    z-index: 2;
}
  
.speech-bubble_right:before {
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    border-width: 15px;
    border-style: solid;
    border-color: transparent;
    border-right-color: #fff;
    transform: translateY(-10%) translateX(-60%) rotate(100deg) scaleY(-1);
    z-index: -1; /* 重なり順を指定 */
}

/**/
.thinking-container_right {
    margin-right:3px;
    margin-top :3px;
    margin-bottom: 3px;

    display: flex;
    align-items: flex-start; /* アイコンと吹き出しの上端を揃える */
    flex-direction: row-reverse;
}

.thinking-content_right {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* 右寄せに */
}

.thinking-bubble_right {
    background-color: rgb(180, 180, 180);
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 7px;
    padding-bottom: 3px;
    position: relative; /* 相対配置を指定 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-right:15px;
    margin-top: -7px;
    z-index: 2;
}
  
.thinking-bubble_right:before {
    content: '';
    position: absolute;
    top: 65%;
    left: 100%;
    width: 8px; /* 吹き出しの直径 */
    height: 8px; /* 吹き出しの直径 */
    background-color: rgb(162, 162, 162); /* 吹き出しの色 */
    border-radius: 50%; /* 丸い形にする */
    transform: translateY(-50%) translateX(0%);
    z-index: -1;
}

.thinking-bubble_right:after {
    content: '';
    position: absolute;
    top: 70%;
    left: 100%;
    width: 5px; /* 吹き出しの直径 */
    height: 5px; /* 吹き出しの直径 */
    background-color: rgb(124, 124, 124); /* 吹き出しの色 */
    border-radius: 50%; /* 丸い形にする */
    transform: translateX(155%);
    z-index: -1;
}




/*地の分の処理*/
.descript-container_right {
    margin-right:3px;
    margin-top :3px;
    margin-bottom: 3px;

    display: flex;
    align-items: flex-start; /* アイコンと吹き出しの上端を揃える */
    flex-direction: row-reverse;
}

.descript-content_right {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* 右寄せに */
}

.descript-bubble_right {
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 0px;
    padding-top: 5px;
    padding-bottom: 3px;
    position: relative; /* 相対配置を指定 */
    margin-right:15px;
    margin-top: -7px;
    z-index: 2;
}

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

/*プロフ画面用---------------------------------------------------------------------------------*/


/* プロフ宣言画面用 */
.prof-field{
    display: flex;
    margin-bottom : 5px;
}
.prof-field p {
    min-width: 180px; /* ラベルの固定幅 */
}

.icon-field{
    display: flex;
    margin-bottom : 8px;
}
.serif-field{
    display: flex;
    margin-bottom : 8px;
}

.serif-field input{
    width: 600px;
}
.serif-field p {
    min-width: 200px; /* ラベルの固定幅 */
}

.prof_container {
    display: flex;
}

.prof_left {
    margin-left:5px;
    margin-top: 5px;
    position: relative;
    display: inline-block;
    width: 420px;
}
.prof_right {
    margin-top: 5px;
    margin-left: 15px;
    margin-right: 15px;
    width: 500px;
    display: flex;
    flex-direction: column; /* 縦並び */
}



/* ここからプロフフィールド欄 */
    .prof_details {
        margin: 0;
        padding: 0;
    }

    .prof_detail {
        display: flex;
        background-color: white;
        padding:3px;
    }



    .prof_detail_fix {
        width: 220px;
        display: flex;
        color: black;
    }

    .prof_detail_field {
        width: 100%;
        max-width: 100%;
        display: flex;
        color: red;
    }

    .prof_detail:nth-child(odd) {
        background-color: #f9f9f9; /* 偶数行の背景色 */
    }

    .prof_detail:nth-child(even) {
        background-color: #e0e0e0; /* 奇数行の背景色 */
    }

    .prof_detail dt {
        width: 100px; /* タイトルの幅を指定 */
        font-weight: bold;
    }

    .prof_detail dd {
        margin: 0;
        padding-left: 10px; /* 内容の左パディング */
    }
/* ここまでプロフフィールド欄 */

.prof_fullname {
    color: white;
    font-size: 38px;
    margin-left:35px;
    margin-bottom: 10px; /* 名前の下に余白を追加する */
}

.prof_image {
    margin-left: 10px; /* 画像の右側に余白を追加する */
}

.prof_status {
    margin-top:-5px;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px;
    border-radius: 5px;
    font-size: 14px;
}

.prof_status span {
    font-family: 'Roboto Condensed', sans-serif;

}

.prof_profile {
    margin-top: 10px;
    margin-bottom: 5px;
    background-color: #888;
    
}
.prof_profile_field 
{
    margin-top:-5px;
    padding-left: 2px;
    padding-right: 2px;
    color:#222;
    border: 4px solid #222; /* 枠線の太さ、スタイル、色を指定 */
    flex: 1; /* プロフィールを残りのスペースに広げる */

    background-color: #f9f9f9;
}

.prof_under{

}
.prof_icon_all{
    margin-left:5px;
}

.prof_icon_set
{
    display: flex;
    flex-direction: row;
}

.prof_icon_detail 
{  
    padding-left: 2px;
    padding-right: 2px;
    padding-bottom: 2px;
    padding-top: 0;
    margin-bottom: 5px;
    margin-left: 12px;
    margin-right: 5px;
    display: flex;
    flex-direction: column; /* 縦並び */
    background-color: black;
    border-top: 12px solid rgb(87, 87, 87);
}

.prof_icon_img
{
    width: 60px;
    height: auto;
    background-color: white;
    
}

.prof_icon_number
{  
    margin-top:-14px;
    padding-top:0;
    font-size: 10px;
    text-align: center;    

}



.writingfield {
    margin-top:-5px;
    padding-left: 12px;
    padding-right: 12px;
    color:#222;
    border: 4px solid #222; /* 枠線の太さ、スタイル、色を指定 */
    flex: 1; /* プロフィールを残りのスペースに広げる */
    background-color: #e0e0e0;
}

.writingfield p {
    color:#222;

}

/* ここからプロフスキル欄 */

.prof_profile_skill
{
    margin-top:-5px;
    padding-left: 2px;
    padding-right: 2px;
    color:#222;
    border: 4px solid #222; /* 枠線の太さ、スタイル、色を指定 */
    flex: 1; /* プロフィールを残りのスペースに広げる */

    background-color: #f9f9f9;
}

.prof_skill:nth-child(odd) {
    background-color: #f9f9f9; /* 偶数行の背景色 */
}

.prof_skill:nth-child(even) {
    background-color: #e0e0e0; /* 奇数行の背景色 */
}

.prof_skill dt {
    width: 100px; /* タイトルの幅を指定 */
    font-weight: bold;
}
.prof_skill_text-container{
    padding-left:10px;
    padding-top:2px;
    padding-bottom:2px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.prof_skill_name{
    font-weight: bold;
}

.prof_skill_icon {
    width: 60px;
    height: 60px;
    border-radius: 15%;
    margin-right: 5px;
    margin-left: 5px;
}

.prof_skill{
    display: flex;
    align-items: center;
    width: 100%;
    border: 1px solid #ccc;
    padding-left: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 3px;
}

.prof_skill_text-container:nth-child(odd) {
    background-color: #f9f9f9; /* 偶数行の背景色 */
}

.prof_skill_text-container:nth-child(even) {
    background-color: #e0e0e0; /* 奇数行の背景色 */
}

/* ここまでプロフフィールド欄 */


/* チャット部分 */

.talk_display{
    width: 90%;
    margin-left:8px;
    margin-top:4px;
    margin-bottom:8px;
    display: flex;
    flex-direction: column;

    background-color: #f7f2f2;
    border-left: 8px solid #6b6b6b; /* 赤いボーダー */
    padding: 5px 10px;
    color: #333;
}
.talk_timestamp {
    width: 100%;
    font-size: 10px;
    color: rgb(126, 126, 126);
    text-align: right; /* テキストを右に揃える */
    display: flex;
    justify-content: space-between;
    align-items: center; /* 必要に応じて縦方向の中央揃え */
}

.talk_timestamp_left {
}
.talk_timestamp_right {
}


.talk_timestamp a {
    color: rgb(90, 21, 210); /* 任意の色に変更 */
    text-decoration: none; /* 下線を消したい場合 */
    transition: 0.3s ease; /* 色が変化する際に0.3秒のスムーズな遷移を適用 */
}

.talk_timestamp a:hover {
    background-color: #868686;
    color: #C70039; /* ホバー時の色を変更したい場合 */
}

.pagination {
    display: flex;
    justify-content: center; /* 横方向に中央揃え */
    align-items: center;     /* 縦方向に中央揃え（必要に応じて） */
    width: 100%;             /* 横幅100% */
    gap: 10px;               /* 要素間の間隔を10pxに設定 */
}

.reply_link {
    text-align: right;
    font-size: 50%;
    color: #007BFF; /* Default color */
    text-decoration: none; /* Remove underline */
}

.equip_submit {
    margin: 5px;
    padding-left: 3px;
    padding-right: 3px;
}


.action-buttons label {
    display: inline-block;
    padding: 8px 16px;
    margin: 4px;
    border: 1px solid #888;
    border-radius: 6px;
    background-color: #f0f0f0;
    cursor: pointer;
  }
  
  input[type="radio"]:checked + label {
    background-color: #444;
    color: white;
    font-weight: bold;
  }
  
  /* 操作フォームの表示切替 */
  .action-box {
    display: none;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #aaa;
    background-color: #f9f9f9;
  }






  
  /* テーブル */
  /* テーブル全体のスタイル */
table.item_table {
    border-collapse: collapse;
    text-align: left;
    border: none;

}

/* ヘッダーセルのスタイル */
table.item_table th {
    background-color: #8a938b;
    color: white;
    padding: 10px;
}

/* データセルのスタイル */
table.item_table td {
    border: none;
    padding: 8px;
    
}

table.item_table th.item_pow,
table.item_table td.item_pow,
table.item_table th.item_type,
table.item_table td.item_type
 {
    width: 8%;
    text-align: center;

}

table.item_table th.item_no,
table.item_table td.item_no
 {
    width: 5%; /* 年齢列 */
    text-align: center;
}

table.item_table td.item_pow,
table.item_table td.item_no,
table.item_table td.item_type
{
    font-size: 80%
}

table.item_table th.item_name,
table.item_table td.item_name
 {
    width: 31%; /* 年齢列 */
    font-size: 85%;
}

table.item_table th.item_descript,
table.item_table td.item_descript
 {
    width: 60%; /* 年齢列 */
}

/* 行のホバー時のスタイル */
table.item_table tr:hover {
    background-color: #f1f1f1;
}





/* テーブル全体のスタイル */
table.shop_table {
    border-collapse: collapse;
    text-align: left;
    background-color: #f3ebe5;
    border: none;

}

/* ヘッダーセルのスタイル */
table.shop_table th {
    background-color: #8a938b;
    color: white;
    padding: 10px;
}

/* データセルのスタイル */
table.shop_table td {
    border: none;
    padding: 8px;
    
}

/* 行のホバー時のスタイル */
table.shop_table tr:hover {
    background-color: rgb(202, 202, 202);
}


/* テーブル全体のスタイル */
table.charalist_table {
    border-collapse: collapse;
    text-align: left;
    background-color: #f3ebe5;
    border: none;
}

table.charalist_table img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ヘッダーセルのスタイル */
table.charalist_table th {
    background-color: #8a938b;
    color: white;
    padding: 10px;
    height: 40px;
}

/* データセルのスタイル */
table.charalist_table td {
    border: none;
    padding: 3px;
    height: 46px;
}

table.charalist_table td img{
    width: 40px;
    height: 100%;
    object-fit: contain; 
    display: block;
    margin: 0 auto;
}

.charalist_tablerow{
    display: flex;
}

/* 行のホバー時のスタイル */
table.charalist_table tr:hover {
    background-color: rgb(202, 202, 202);
}

.charalist_name {
    width: 200px;
}