.results-list { list-style: none; padding: 0; }
.result-item { margin-bottom: 20px; border-bottom: 1px solid #ccc; padding-bottom: 10px; }
.line1 { font-size: 0.95em; margin-bottom: 5px; display: flex; align-items: center; gap: 6%; }
.amount { color: #ff9e00; font-weight: bold; font-size: 1.2em; }
.amount .yen { margin-left: 3px; font-size: 1em; }
.result-image { width: 30px; height: 30px; object-fit: cover; cursor: pointer; border: 1px solid #ccc; }

.line2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.race { display: flex; align-items: center; gap: 4px; }
.box { display: inline-block; width: 20px; height: 20px; text-align: center; line-height: 20px; font-size: 12px; font-weight: bold; border-radius: 2px; }
.color1 { background: #ffffff; color: #000; border: 1px solid #ccc; }
.color2 { background: #0000ff; }
.color3 { background: #ff0000; }
.color4 { background: #00ff00; }
.color5 { background: #ffff00; color: #000; }
.color6 { background: #ff9900; }

.arrow::before { content: "➡"; font-size: 1.2em; color: #ff0000; }

#popup {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.7);
    justify-content: center;
    align-items: center;
}
#popup img {
    max-width: 90vw;
    max-height: 90vh;
    box-shadow: 0 0 10px #fff;
}


/* 追記: 色・サイズ・太字設定 */
.color2 {
    background: #000;
	color: #fff;
}
.color3 {
    background: #e53935;
	color: #fff;
}
.color4 {
    background: #1b5dbf;
	color: #fff;
}
.color5 {
    background: #fdd835;
}
.color6 {
    background: #43a047;
	color: #fff;
}

.plan {
	background: linear-gradient(transparent 75%, #cae8ff 30%);
	font-weight: bold;
}
/* スマホ時に日付の直後で改行（＝日付だけを1行目にする）*/
@media screen and (max-width: 768px) {
  .line1 {
    display: flex;         /* 念のため明示 */
    flex-wrap: wrap;       /* 折り返し許可 */
    align-items: center;
    /* 既存の gap 指定が別ブロックにあるならそのままでもOK。
       ここでまとめるなら gap: 3%; を入れても構いません。*/
  }

  /* 日付だけを1行占有 → ここで改行が入る */
  .line1 .date {
    flex: 0 0 100%;
    white-space: nowrap;   /* 日付が途中で折り返されないように（任意） */
  }

  /* 以前入れた .plan のブロック化を打ち消し（横並びを維持）*/
  .line1 .plan {
    display: inline;       /* または inline-block */
    margin-bottom: 0;
  }

  /* 画像や金額の並びは通常のままでOK。明示したい場合は下記も可 */
  .line1 .amount,
  .line1 img.result-image {
    flex: 0 0 auto;
  }
}


@media only screen and (max-width: 768px){
.line1 {
	gap: 3%;
}
}
@media screen and (max-width: 768px) {
  .line2 {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .race-left,
  .race-right {
    width: 100%;
  }

.arrow::before {
	content: "➡";
	margin-right: 6px;
	font-size: 1.2em;
	color: #ff0000;
  }

  .arrow {
    display: none;
  }

  .race-right::before {
    content: "➡";
    display: inline-block;
    margin-right: 6px;
    font-size: 1.2em;
    color: #ff0000;
  }
}