@charset "UTF-8";

.-hasRuby {
  .updateBox {
    .updateList {
      li {
        &::before {
          top: 1em;
        }
      }
    }
  }
}

@scope (.election) {
  --key-color: #C32830;
  --text-color: #232323;
  --bar-color: #271f1f;

  .content-section {
    margin-block-end: 40px;
    overflow-wrap: anywhere;
    word-break: normal;
    line-break: strict;
    text-autospace: normal;
  }

  .siteName {
    margin-block: 0 40px;
    font-size: 2.6rem;
    font-weight: bold;
    text-align: center;
    font-weight: 700 !important;
    @media (768px >= width) {
      margin-block-end: 20px;
      font-size: 2rem;
    }

    .tsutaeruRuby__phrase,
    .tsutaeruRuby__translation,
    ruby {
      font-weight: 700 !important;
    }
  }

  .breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5em 0;
    margin: 0 0 20px;
    padding-inline-start: 0;
    list-style: none;
    
    @media (768px <= width) {
      margin-block-end: 40px;
    }
  
    a[aria-current] {
      color: var(--text-color) !important;
      text-decoration: none;
      pointer-events: none;
    }
  
    li {
      display: inline;
      
      a {
        word-break: auto-phrase; /* Chrome 119+ */
        word-break: break-word; /* フォールバック */
        overflow-wrap: anywhere;
      }
    }
  
    li + li {
      &::before {
        display: inline;
        margin-inline: 0.5em;
        white-space: nowrap; /* > は改行させない */
        content: ">";
      }
    }
  }

  .navigationWrapper {
    margin: 0 0 50px;
  }

  .navigationToggle {
    display: block;
    margin-inline: 0;
    width: 100%;
    box-shadow: none !important;
    @media (768px <= width) {
      display: none;
    }
  }

  .navigation {
    margin: 0;
    padding-inline-start: 0;
    list-style: none;
    font-size: 1.25em;
    @media (768px <= width) {
      display: grid !important;
      grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
      gap: 20px;
      font-size: 1.2em;
    }
    @media (1200px <= width) {
      display: flex !important;
      flex-wrap: wrap;
      justify-content: safe center;
      gap: 3em;
    }

    li {
      + li {
        border-top: 1px solid #ccc;
        padding-block: 0.5em;
        @media (768px <= width) {
          border-top: none;
          padding-block: 0;
        }
      }
    }

    a {
      display: block;
      padding-inline: 1em;
      color: var(--text-color) !important;
      text-decoration: none;

      @media (768px <= width) {
        padding-inline: 0;
        font-weight: bold;
        text-align: center;
        text-decoration: underline;
        transition: color 0.3s ease;

        &:hover,
        &:active,
        &:focus {
          color: var(--key-color) !important;
        }
      }
    }
  }

  .pageTitle {
    position: relative;
    margin-block: 0 .4em;
    padding-inline-start: 32px;
    font-size: 2.2rem;
    font-weight: bold;
    @media (768px >= width) {
      font-size: 1.6rem;
    }

    &::before {
      position: absolute;
      top: calc(0.5lh - 0.5em - 0.1em);
      left: 0;
      content: "";
      display: inline-block;
      margin-inline-end: 20px;
      border-radius: 5px;
      width: 12px;
      height: 1.2em;
      background-color: var(--bar-color);
      vertical-align: middle;
    }
  }

  .electionLead {
    margin-block-end: 26px;
    font-size: 1.5em;
    @media (768px >= width) {
      font-size: 1.2em;
    }
  }

  #update {
    margin-block-end: 60px;
  }

  .updateBox {
    padding: 24px min(140px, 8vw) 40px;
    background-color: #f0f0f0;
    @media (768px >= width) {
      padding: 20px min(100px, 5vw) 30px;
    }

    .updateTitle {
      font-size: 1.875em;
      font-weight: bold;
      text-align: center;
      @media (768px >= width) {
        font-size: 1.5em;
      }
    }
    
    .updateList {
      margin-block-end: 0;
      padding-inline-start: 0;
      list-style: none;
      font-size: 1.5em;
      @media (768px >= width) {
        font-size: 1.2em;
      }

      li {
        position: relative;
        padding-inline-start: 2rem;

        &::before {
          position: absolute;
          top: 0.6em;
          left: 0;
          content: "";
          display: inline-block;
          margin-inline-end: 0.5em;
          width: 1rem;
          height: 1rem;
          border-radius: 50%;
          background-color: var(--bar-color);
          vertical-align: middle;
        }

        + li {
          margin-block-start: 0.25em;
        }
      }

      a {
        color: var(--text-color) !important;
        &:hover,
        &:active,
        &:focus {
          color: var(--key-color) !important;
        }
      }
    }
  }

  .updateMore {
    margin-block-start: 26px;
    text-align: right;

    a {
      color: var(--text-color) !important;
      font-size: 1.25em;
      font-weight: bold;
      
      &:hover,
      &:active,
      &:focus {
        color: var(--key-color) !important;
      }
    }
  }

  .districtList {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 30px;
    list-style: none;
    padding-inline-start: 0;

    a {
      display: block;
      padding: .75rem 1.25rem;
      border: 3px solid var(--key-color);
      border-radius: 10px;
      background-color: var(--key-color);
      color: #fff !important;
      font-size: 1.5em;
      text-align: center;
      text-decoration: none;
      transition: background-color 0.3s ease;
      @media (768px >= width) {
        padding: .5rem .75rem;
        font-size: 1.25em;
      }

			rt {
				color: #fff !important;
			}

      &:hover,
      &:active,
      &:focus {
        background-color: #fff;
        color: var(--key-color) !important;

				rt {
					color: var(--key-color) !important;
				}
      }
    }
  }

/* Webkit系 - 細めのスクロールバー */
.table-responsive::-webkit-scrollbar {
  height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
  background: #999;
}

/* Firefox */
.table-responsive {
  scrollbar-width: thin;
  scrollbar-color: #ccc #f5f5f5;
}

  .candidateTable {
    min-width: 960px;

    th,
    td {
      border-top-color: var(--bar-color);
      vertical-align: middle;
    }

    thead {
      th {
        border-bottom-color: var(--bar-color);
        font-weight: bold;
        text-align: center;
        @media (768px >= width) {
          text-align: left;
        }
      }
    }

    tbody {
      td {
        &:nth-of-type(2),
        &:nth-of-type(3),
        &:nth-of-type(4),
        &:nth-of-type(5) {
          text-align: center;
        }
      }
    }
  }

  .candidateSearch {
    .submit {
      border-color: var(--key-color) !important;
      background-color: var(--key-color) !important;
    }
  }

  .candidateNote {
    text-align: right;
    @media (768px >= width) {
      margin-block-start: 20px;
      text-align: left;
    }
  }
}
.content-block h2 {
  font-weight: 700;
  font-size: 120%;
}
.content-block h3 {
  font-weight: 700;
  font-size: 115%;
}
.content-block h4 {
  font-weight: 700;
  font-size: 110%;
}