body {
      font-family: "Helvetica Neue", sans-serif;
      padding: 0;
      background-color: #fff;
      color: #222;
    }

    .menu {
      display: flex;
      gap: 12px;
      margin-bottom: 30px;
      flex-wrap: wrap;
    }
    .menu a {
      padding: 6px 16px;
      background-color: #f2f2f2;
      border: 1px solid #ccc;
      text-decoration: none;
      color: #333;
      font-weight: bold;
      border-radius: 5px;
      font-size: 14px;
    }
    .menu a:hover {
      background-color: #ddd;
    }

    .league-block {
      margin-bottom: 60px;
    }
    .league-block h2 {
      font-size: 20px;
      margin-bottom: 20px;
      border-left: 5px solid #b4aa88;
      padding-left: 10px;
    }

    .match-item {
      display: flex;
      flex-direction: column;
      margin-bottom: 12px;
      border: 1px solid #ddd;
      border-radius: 6px;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      cursor: pointer;
      position: relative;
      padding: 12px;
    }

.match-item::after {
    /*content: "▼";*/  /* または "+" や "⌵" など */
    position: absolute;
    left: 17px;
    top: 70px;
    transform: translateY(-50%);
    font-size: 10px;
    color: #999;
}

    .match-header {
      display: flex;
      align-items: center;
      background: #111;
      color: white;
      font-size: 14px;
      position: relative;
    }
    
    .match-header span.arrow {
      padding: 0 1rem;
    }
    
    .match-header span.arrow svg {
      width: 24px;
    }
    
    .post-content .match-item {
      display: flex;
      text-decoration: none;
    }

    .match-round {
      background: #9a926a;
      color: white;
      font-weight: bold;
      /*width: 60px;*/
      text-align: center;
      clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 11px;
      padding: 9px 26px 9px 10px;
    }

    .match-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6px 15px;
      flex: 1;
    }

    .match-opponent {
      font-size: 14px;
    }

    .match-time {
      font-size: 14px;
      white-space: nowrap;
    }

    .match-detail {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 10px 6px 11px;
      background: #f9f9f9;
      font-size: 13px;
      color: #444;
    }

    .match-score {
      /*flex: 1;*/
      font-size: 16px;
      font-weight: bold;
      color:#9a926a;
    }

    .match-venue {
      text-align: right;
      white-space: nowrap;
    }

    .match-extra {
      display: none;
      flex-direction: column;
      gap: 10px;
      background-color: #fcfcfc;
      padding: 10px 20px;
      border-top: 1px solid #ccc;
      font-size: 13px;
      line-height: 1.5;
    }

    .match-extra .result {
      font-size: 16px;
      font-weight: bold;
      color: #9a926a;
      margin-bottom: 10px;
    }

    .match-extra .close-btn {
      align-self: flex-end;
      background: #999;
      color: white;
      padding: 4px 10px;
      border: none;
      border-radius: 4px;
      font-size: 12px;
      cursor: pointer;
    }
    .match-extra .close-btn:hover {
      background: #666;
    }
    /* Back to top button styles */
    .back-to-top {
      display: inline-block;
      position: sticky;
      bottom: 20px;
      margin-top: 20px;
      text-align: center;
      font-size: 14px;
      text-decoration: none!important;
      width: 100%;
    }
    
    .back-to-top-button {
      background-color: #9a926a;
      color: white;
      border: none;
      border-radius: 5px;
      padding: 8px 20px;
      cursor: pointer;
      font-weight: bold;
      transition: background-color 0.2s;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      text-decoration: none!important;
    }
    
    .back-to-top-button:hover {
      background-color: #b4aa88;
      text-decoration: none!important;
      color: white;
    }
    .back-to-top-buttona:visited {
      color: #fff;
      text-decoration: none!important;
    }
    
    .back-to-top-icon {
      font-size: 18px;
      color: white;
　　　text-decoration: none!important;
    }
@media screen and (max-width: 380px) {
  .menu a,
  .match-header,
  .match-round,
  .match-opponent,
  .match-time,
  .match-detail,
  .match-score,
  .match-extra,
  .match-extra .close-btn,
  .back-to-top,
  .back-to-top-button {
    font-size: 12px !important;
  }

  .match-extra .result {
    font-size: 14px !important;
  }

  .league-block h2 {
    font-size: 16px !important;
  }

  .match-item {
    padding: 8px !important;
  }
.match-item::after {
    left: 15px;
    top: 60px;
    font-size: 8px;
}
  .match-detail {
    padding: 6px 10px 6px 30px !important;
  }

  .match-info {
    padding: 6px 10px !important;
  }

  .match-extra {
    padding: 8px 15px !important;
  }
}

.nendo {
  max-width: 260px;           /* 幅はお好みで */
  width: 100%;
  margin: 0 0 20px;
}

/* select本体 */
.nendo select {
  width: 100%;
  height: 42px;
  padding: 0 44px 0 14px;     /* 右側は矢印分あける */
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #f2f2f2;
  color: #333;
  font-weight: bold;
  font-size: 14px;
  outline: none;
  cursor: pointer;

  /* ブラウザ標準の矢印を消す */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* 右側の矢印（疑似要素） */
.nendo {
  position: relative;
}
.nendo::after {
  content: "▼";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: #777;
  pointer-events: none;
}

/* hover / focus */
.nendo select:hover {
  background-color: #ddd;
}
.nendo select:focus {
  border-color: #9a926a; /* サイトのキーカラーに合わせた */
  box-shadow: 0 0 0 3px rgba(154, 146, 106, 0.25);
  background-color: #fff;
}

/* option（環境により効きにくいですが念のため） */
.nendo select option {
  font-weight: normal;
  color: #222;
}

.flex {
  display: flex;
  justify-content: space-between;
}

.match-header .arrow {
  position: absolute;
  right: 10px;
  width: 15px;
}