.creator-container {
  display: flex;
  flex-direction: column; /* スマホは縦並び */
  align-items: center;
  gap: 1rem;
  margin: 1rem auto;
  max-width: 900px;
  padding: 0 2%;
}

@media screen and (min-width: 768px) {
 .creator-container {padding: 0 2%;}
}

.creator-image {
  width: 95%;
  max-width: 240px;
  height: auto;
  border-radius: 8px;
  border: solid 1px #ccc;
}

.creator-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}
.info-visits{
  color:#FF4747;font-weight: bold;
}

h1 {
  font-size: 1.5rem;
  margin: 12px 3% 0 3%;

 
}

/* PC: */
@media screen and (min-width: 768px) {
 h1 {padding: 0 1rem;margin:12px 0 8px 0px;}
}
.creator-info .meta {
  font-size: 1.2rem;
  line-height: 1.5;
}


/* PC: 横並び + 画像左、情報右 */
@media screen and (min-width: 768px) {
  .creator-container {
    flex-direction: row;
    align-items: flex-start;
  }

  .creator-image {
    width: 300px;
  }

  .creator-info {
    width: auto;
    flex: 1;
  }



  .creator-info .meta {
  font-size: 1.2rem;
  line-height: 1.3; /* または 1.2 など調整可 */
  margin: 0.3rem 0;  /* 上下の余白も少し詰めると効果的 */
}
}
.creator-stats {
  border-collapse: collapse;
  width: 100%;
  max-width: 100%;
  font-size: 1.3rem;
  table-layout: auto;
  width: 100%;
}

.creator-stats th {
  text-align: left;
  font-weight: normal;

  white-space: nowrap;
  vertical-align: middle; /* ← ここを top → middle に変更 */
  font-size: 0.8rem;
  line-height:1.2em;
  width: 1px; /* 最小限の幅にする */
}

.creator-stats td {
  font-size: 1rem;
  font-weight: bold;
  padding: 0.3rem 0;
  word-break: break-word;
  vertical-align: middle; /* ← こちらにも追加 */
  line-height:1.2em;
  width: 100%;
}
.creator-stats td,th{
border:solid 1px #ccc ;
 padding: 4px 6px;
}
/* PC: */
@media screen and (min-width: 768px) {
.creator-stats td {font-size: 1.2rem;}
.creator-stats th {font-size: 0.8rem;}
}



.creator-highlight {
  width: 100%;
  max-width: 900px;
  margin: 0 auto 2px;
  border-collapse: collapse;
  
  font-weight: bold;
  text-align: center;
  background-color: #fdfdfd;
  table-layout: auto;
  width: 100%;

}

.creator-highlight th,
.creator-highlight td {
  padding: 4px 6px;
  border: 0px solid #ddd;
  vertical-align: middle;
  text-align:left;

}
.creator-highlight th{
  font-weight: normal;white-space: nowrap;
  font-size:0.7rem;line-height:1.2em;
  width: 1px;
  }

  .creator-highlight td{
  font-weight: normal;
  font-size:1.2rem;line-height:1.2em;
  width: 100%;word-break: break-word;
  }

.creator-highlight .unit {
  font-size: 0.9rem;
  font-weight: normal;
  margin-left: 0.3rem;
}

.creator-highlight tr{
border-bottom:solid 1px #ccc;
}


/* PC: */
@media screen and (min-width: 768px) {
.creator-highlight {
  width: 100%;
  max-width: 900px;
  margin: 0 auto 2px;
  border-collapse: collapse;
  
  font-weight: bold;
  text-align: center;
  background-color: #fdfdfd;
   table-layout: auto;
  width: 100%;

}


.creator-highlight .desc{
  font-size: 1rem;
}

.creator-highlight th,
.creator-highlight td {
padding: 0.1rem 0.3rem;  /* 👈 かなり小さく */
  border: 0px solid #ddd;
  vertical-align: middle;
  text-align:left;
}
.creator-highlight th{
  font-weight: normal;
  font-size:1rem;line-height:1.5em; width: 1px;
  }

  .creator-highlight td{
  font-weight: normal;
  font-size:1.3rem;
  line-height:1.5em;width: 100%;
  word-break: break-all;
  line-height: 1.6;
  }

.creator-highlight .unit {
  font-size: 0.9rem;
  font-weight: normal;
  margin-left: 0.3rem;
}
}









.game-list-cards {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1rem;
  margin: 1rem 0;
}
h2{
  padding: 0 2%;
}
@media screen and (min-width: 768px) {
h2{
  padding: 0 4px;
}
}


.game-card {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 0.7rem;
  background: #fff;
  margin:0 1%;
  

}

.game-card-image{
width:20%;
}

.game-card-image img {
  width: 100%;
  
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

.game-card-info {
  margin-left: 1rem;

  

}

.game-title a {
  font-weight: bold;
  font-size: 1.1rem;
  color: #333;
  text-decoration: none;
}

.game-title a:hover {
  text-decoration: underline;
}

.game-meta {
  
  gap: 1.5rem;
  font-size: 0.9rem;
  color: #666;
  margin-top: 0.3rem;
}

.game-meta .visits {
  white-space: nowrap;
}

@media screen and (max-width: 767px) {
  .game-card {
   
  }

  .game-card-image img {
    width: 100%;
    
  }

  .game-title a {
    font-size: 1rem;
  }

  .game-meta {
    font-size: 0.85rem;
   
  }
}


#like-done-area {
  width: 50%;
  margin: 0 auto;
  border: solid 2px #ffa8a8;
}

/* スマホ用のメディアクエリ */
@media screen and (max-width: 768px) {
  #like-done-area {
    width: 90%;
    margin: 0 auto;
  }
}

#like-button:disabled {
  background-color: #ccc;
  color: #666;
  cursor: not-allowed;
}

#vote-wrapper {
  visibility: hidden;
}

/*投票*/
.v-title{ float: left; width: 550px; margin:20px 0 0 0; padding:6px 3%; background-color: #D97272; color: #FFF; font-size: 20px; background-image: url("/image/design/dark-matter.png"); line-height: 1.2; font-weight: bold; border-radius: 5px 5px 0 0;}
.h2-span{ font-weight: normal; font-size: 12px; }
.v-all{ float: left; width: 550px; }
.v-maintain{ float: left; width: 100%; padding-top: 20px 10%; font-weight: bold; color: #FFB4B4; }
/* .v-form{ float: left; width: 100%; height: 80px; padding: 12px 0 8px 120px;   }
.v-btn{ float: left; width: 150px; height: 60px; margin:0 5px; border-radius: 3px; padding: 13px 0 0 60px; color: #fff; font-size: 24px; }
.v-btn i{ margin-right: 3px;  }
.v-like{ background-color: #EA5660; background-image: url("/image/design/face1.png"); background-repeat: no-repeat; background-size: 28px; background-position: 22px 50%;}
.v-dislike{ background-color: #498FC5; background-image: url("/image/design/face0.png"); background-repeat: no-repeat; background-size: 28px; background-position: 22px 50%;} */


.v-form{ float: left; width: 100%; height: 120px; padding: 26px 0 8px 0; }
.v-btn{  text-align:center; width:50%;height: 65px;line-height: 65px; margin:0 auto; padding: 0 0 65px 0 ;  border-radius: 15px; color: #fff; font-size: 1.6rem;
; }
@media screen and (max-width: 768px) {
  .v-btn {
    width: 80%;
    margin: 0 auto;
  }
}


.v-btn i{ margin-right: 10px;  }
.v-like{ background-color: #EA5660; box-shadow: inset 0px 3px 0 rgba(255,255,255,0.3), 0 3px 3px rgba(0, 0, 0, 0.3);border-bottom: solid 3px #EA5660; text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4); }
.v-btn:active{ -webkit-transform: translateY(1px);  transform: translateY(1px);  box-shadow: 0 0 2px rgba(0, 0, 0, 0.35);  border-bottom: none;}
.v-like-disable{background-color: #EA5660; box-shadow: inset 0px 3px 0 rgba(255,255,255,0.3), 0 3px 3px rgba(0, 0, 0, 0.3);border-bottom: solid 3px #EA5660; text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4); display: none;}




.v-result{  margin:5px auto; padding: 8px 0; background-color: #FDE7E7; border-radius: 3px;}
.v-wv{ float: left; width: 100%; text-align: center; }
.v-wv span{ margin:0 2px ; font-weight: bold; font-size: 1.2rem; }
.v-wv-check{ float: left; width: 100%; text-align: center; font-size: 0.8rem; }
.v-wv-check span{ font-size: 0.7rem; opacity: 0.7; }

.v-chart{ float: left; width: 510px; margin:5px 10px 0 10px; border-spacing: 3px 8px; }
.v-chart th{ font-weight: normal; width: 60px; text-align: right; padding:0 15px 0 0;  }
.v-chart-rabel{ width: 30px; text-align: right; }
.v-chart-bar{ width: 410px; background-color: #F3CDCD; }
/* .v-total{ float: left; width: 100%; text-align: center; }
.v-total span{ margin:0 0 0 10px; font-weight: bold; }
 */

.v-history{ float: left; margin:5px 0; width: 100%; text-align: center; }

.v-bar-like{ float: left; background-color: #EA5660; height: 14px; border-radius: 0 3px 3px 0; }
.v-bar-dislike{ float: left; background-color: #498FC5; height: 14px; border-radius: 0 3px 3px 0; }
.v-comp{ float: left; width: 100%; height: 60px; padding: 16px; text-align: center; line-height: 1.2;}
.v-comp-l{ float: left; width: 100%; min-height: 105px; padding: 10px; text-align: center; line-height: 1.2; color:#666;}
.v-comp-d{ float: left; width: 100%; height: 60px; padding: 10px; text-align: center; line-height: 1.2; color:#666;}
.v-comp-thanks{ float:left; width: 100%; margin:0; padding:0; font-size:28px; font-weight: bold; text-align: center; }

.v-ip-dup{ float: left; width:100%; margin:10px 0; padding: 7px 10px; color: #219C00; font-size: 14px; line-height: 1.3; text-align: center;}

.v-pic{ float: left; width: 50px; height: 50px; margin:0px 0 0 25%; overflow:hidden; border-radius: 10px; }
.v-balloon {
  float: left;
  position: relative;
  margin: 0px 0 0 20px;
  padding: 5px 15px 5px 18px;
  color: #555;
  font-size: 0.8rem;
  line-height: 1.3;
  background: #e0edff;
  border-radius: 5px;
}
.v-balloon:before{
  content: "";
  position: absolute;
  top: 50%;
  left: -20px;
  margin-top: -10px;
  border: 10px solid transparent;
  border-right: 10px solid #e0edff;
}
.v-balloon p {
  margin: 0;
  padding: 0;
}


.v-pic2{ float: left; width: 14%; height: 85px; margin:0 0 0 1%; overflow:hidden; border-radius: 10px; }
.v-balloon2 {
  display: table;
  float: left;
  width:74%;
  min-height: 85px;
  position: relative;
  margin: 0 0 0 15px;
  padding: 6px 8px;
  color: #555;
  font-size: 1.1rem;
  line-height: 1.3;
  background: #FFF6EC;
  border-radius: 5px;
    border: 2px solid #E2C5A3;
}
.v-balloon2:before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 20px;
  border-right: 15px solid #E2C5A3;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}
.v-balloon2::after{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -12px;
  top: 20px;
  border-right: 15px solid #FFF6EC;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}
.v-balloon2 p {display: table-cell; height: 100%; vertical-align: middle;margin: 0; padding: 0;}











.v-timer-box{ float: left; width: 100%; height: 25px margin:0 0 0 0; font-size: 1rem; color: #666; text-align: center;}
.v-timer{ margin:0 0 0 5px; font-size: 1.2rem; color: #EA5660;}
.v-timer-box-bk{
  animation-name: blinktimer;
  animation-duration: 1s; 
  animation-iteration-count:6; /*アニメーションを回再生する*/
}
@keyframes blinktimer{
  0%{ background:#FFF; }
  30%{ background:#F0FF6E;}
  100%{ background:#FFF;}
}
.v-timer-jitan-icon{ margin:0 0 0 5px; font-size: 12px; color: #05C620; }


.v-loading{position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(255,255,255,.7);
  background-image: url(../image/design/co-loading.gif);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 150px auto;}
.v-hide{ display: none; }

.v-reword-info{ float: left; width: 100%; color: #FF6868; margin:10px 0; font-size: 13px; padding: 0 4%;}







/*relation*/

.related-section {
  
  padding: 2%;
}

.related-section h2 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.card-slider {
  display: flex;
  overflow-x: auto;

  padding-bottom: 1rem;
  scroll-snap-type: x mandatory;
}


.card-slider::-webkit-scrollbar {
  display: none;
}

.related-game-card {
  flex: 0 0 auto;
  width: 150px;
  scroll-snap-align: start;
  text-align: center;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin:0 8px 0 0;
}

/* スマホ用のメディアクエリ */
@media screen and (max-width: 768px) {
  .related-game-card {
    width: 100px;
    margin:0 6px 0 0;
    
  }
}

.card-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}


.game-title {
  font-size: 0.9rem;
  margin-top: 5px;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;       /* 最大2行で切る */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;      /* 単語の途中でも折り返す */
  max-height: 2.6em;           /* 行の高さ×行数に合わせて調整 */
  line-height: 1.3em;
}



.breadcrumb{
    margin:4px 12px;
}

/* スマホ用のメディアクエリ */
@media screen and (max-width: 768px) {
  .breadcrumb {
    font-size: 0.8rem;
    margin:6px 2%; 0 0;
    
  }
}