/* ---------- 全体 ---------- */
body {
  font-family: 'Noto Sans JP', sans-serif;
  margin: 0 auto;
  padding: 1rem 0;
  background-color: #fff;
  color: #333;
  text-align: center;
}

/* 更新状況 */
#update-row {
  margin: 0 auto 1rem;
  text-align: left;
  width: 90%;
}
#update-label { font-size: 0.9rem; color:#666; }
#update-status { font-size: 1rem; font-weight:600; margin-top:0.3rem; }

/* 名前行 */
#name-row {
  display:flex; gap:0.5rem;
  justify-content: center; align-items:center;
  margin:0.5rem 0;
}
#name-input {
  padding:0.5rem;
  font-size:1rem;
  border:1px solid #ccc;
  border-radius:6px;
  min-width:10rem; max-width:12rem;
}
#search-button {
  background: linear-gradient(45deg,#4caf50,#81c784);
  color:#fff; border:none; border-radius:8px;
  padding:0.5rem 0.75rem;
  font-size:1rem; cursor:pointer;
}

/* 日付行 */
#date-row {
  display:flex; gap:0.5rem;
  justify-content: right; align-items:center;
  margin-bottom:0.5rem;
  margin-top:1rem;
  margin-right:22vw;
}
.nav-btn {
  background: linear-gradient(45deg,#4caf50,#81c784);
  color:#fff;
  border:none; border-radius:8px;
  padding:0.5rem 0.75rem;
  font-size:1rem; cursor:pointer;
}
.nav-btn[hidden]{ display:none; }

#date-select {
  padding:0.5rem;
  padding-right:0.5rem;
  padding-left:2rem;
  font-size:1rem;
  border-radius:6px; border:1px solid #ccc;
}

/* Loading */
#loading-area {
  width:90%; margin:1rem auto;
  display:none; 
  flex-direction: column;
  text-align: center;
  align-items:center;
  justify-content:space-between;
  gap:0.5rem;
}
#loading-bar {
  width:80%; height:0.75rem;
  background:#f2f2f2;
  border-radius:8px;
  overflow:hidden; border:1px solid #ddd;
}
#loading-fill {
  width:0%; height:100%;
  background: linear-gradient(90deg,#ff8b8b,#ff3b3b);
}
#loading-text {
  color:red; font-size:0.9rem; font-weight:bold;
}

/* 結果エリア */
#results { margin-top:1rem; text-align:center; }
#info-container { width:90%; margin:0 auto 1rem; text-align:left; }
#visitor-count { font-size:1rem; margin-left:0.5rem; }
#member-info { font-size:1.1rem; margin-left:0.5rem; margin-top:0.3rem; }

/* 見出しボックス */
.box15,.box16,.box17,.box18 {
  padding:0.5rem 1rem;
  max-width:85vw; width:85vw;
  height:2rem;
  display:flex; justify-content:center; align-items:center;
  background: repeating-linear-gradient(-45deg,#f0f8ff,#f0f8ff 3px,#e9f4ff 3px,#e9f4ff 7px);
  margin: 1rem auto;
}

/* テーブル（グリッド） */
.table {
  display:grid; width:100%;
  grid-auto-rows:2.2rem;
  border-radius:4px;
  overflow:hidden;
  margin:0 auto 1.5rem;
  margin-left:5vw
}
.table div {
  border:0.5px solid #555;
  display:flex; align-items:center; justify-content:center;
  padding:0.3rem; box-sizing:border-box;
}
.header {
  font-weight:bold;
  background-color:#d0ebff;
  font-size:0.6rem;
}
.data {
  background-color:#fff;
  font-size:0.8rem;
  justify-content:flex-end;
  text-align:right;
  padding-right:0.5rem;
}

/* スコアカード */
.score-card {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: #fff;
  border-radius: 8px;
  padding: 0.6rem 1rem;
  margin: 0.5rem 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.score-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.card-left {
  font-family: monospace;
  font-size: 0.9rem;
  font-weight: bold;
  color: #333;
}
.card-right {
  margin-left:37vw;
  font-size: 0.9rem;
  color: #444;
  font-weight: 500;
}

/* グラフ */
.chart-wrap {
  width:100%;
  display:flex;
  justify-content:center;
  margin-bottom:1rem;
}
#bar-chart {
  width: 100%;
  max-width: 95%;
  height: 10vh !important;
}
#pie-chart {
  width: 95vw;
  height: 35vh;   /* ←ここ重要！ */
  display: block;
  margin-left:10px
}
  


/* 空セルは非表示 */
.empty-cell {
  display:none;
  border: none !important;
  background: none !important;
}

  .setumei p1 {
  font-size: 3vw;   /* スマホなら画面幅に応じたサイズ */
  display: flex;
  flex-direction: column;
  text-align: left;
  margin-left: 7vw;
  margin-bottom: 1rem;
  margin-top: -1rem;
}

/* 大画面向け調整 */
@media (min-width:600px){
  #name-input { font-size:1rem; min-width:12rem; }
  #date-select { font-size:1rem; }
  #search-button { font-size:1rem; }
  #loading-text { font-size:1rem; }
  .header { font-size:1rem; }
  .data { font-size:1rem; }
}