@charset "UTF-8";

/* 基本的な余白のリセット */
p, h2, h3, h4, h5 {
  margin: 0;
  padding: 0;
}

/* 水平線（hr）のスタイル */
hr {
  height: 10px;
  background-color: #f2f2f2;
  border-radius: 20px;
  border: none; /* デフォルトのborderは削除し、背景色で表現 */
  margin: 2rem auto;
}

/* プログラムタイトルボックス */
.program-title-box {
  background-color: #dbf227;
  padding: 0;
  margin: 0 auto; /* 中央寄せを明確に */
}

.program-title-box h2 {
  color: white;
  font-size: 30px;
  text-align: center;
  margin: 0 auto 20px; /* 上下左右中央寄せ、下マージンのみ20px */
  padding: 20px 0;
}

/* メディアクエリ: 画面幅500px以下でのh2サイズ調整 */
@media screen and (max-width: 500px) {
  .program-title-box h2 {
    font-size: 20px;
    margin: 0 auto; /* 全マージン0 auto */
  }
}

/* メインビデオボックス（もし動画を静止画に変更した場合、このセレクタの役割が変わる可能性があります） */
.main-v-box {
  text-align: center;
  padding: 0 0 10px;
}

.main-v-box img {
  max-width: 960px;
  width: 100%;
  height: auto;
}

/* 特定要素のスマホ非表示 */
.brsp-only {
  display: none;
}

/* フル背景 */
.full-bg {
  overflow: hidden;
  background-color: #f2f2f2;
  margin: 0 auto;
  padding: 0;
}

/* ページトップに戻るボタン/リンク */
#page-top {
  background-color: #289fd0;
  margin: 0 auto;
  padding: 20px 0;
  text-align: center;
}

#page-top a {
  color: #fff;
  font-weight: 700;
}

/* inner-box 内のリストスタイル */
.inner-box ul {
  margin: 1rem 0 !important; /* !importantは可能な限り避けるべきですが、現状維持 */
}

.inner-box li {
  margin-bottom: 0.2rem !important; /* !importantは可能な限り避けるべきですが、現状維持 */
}

.time-box {
  margin: 0 auto 2rem;
}


/* inner-box 内のタイムボックス */
.inner-box .time-box p {
  text-align: center;
  color: #289fd0;
  font-size: 2.6rem;
  line-height: 1.6;
  padding: 0.4em 0;
  margin-bottom: 1rem;
}

.inner-box .time-box p span {
  margin: 0 2em;
}

/* コンテンツブロックとホワイトボックス */
.content-block .white-box {
  border-radius: 6px;
  display: flex;
  justify-content: center;
  background-color: white;
  padding: 30px 0;
  margin: 0 auto;
  width: 960px;
  border: 1px solid #000;
}

/* メディアクエリ: 画面幅1200px以下でのホワイトボックス調整 */
@media screen and (max-width: 1200px) {
  .content-block .white-box {
    width: 100%; /* 幅を100%に */
    border: 1px solid #289fd0; /* ボーダー色変更 */
  }
  .content-block {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* メディアクエリ: 画面幅500px以下でのホワイトボックスとh3調整 */
@media screen and (max-width: 500px) {
  .content-block .white-box {
    border-radius: 1.5rem;
    width: 90%;
  }
  h3 { /* 全てのh3に影響 */
    font-size: 2rem !important; /* !importantは可能な限り避けるべきですが、現状維持 */
  }
  .content-block .inner-box {
    /* max-width: 260px; */ /* コメントアウトされているため変更なし */
    margin: 0 auto;
    padding: 1rem;
  }
  .content-block {
    padding-left: 3vw;
    padding-right: 3vw;
  }
}


.content-block {
  padding: 26px 0;
}

.content-block .inner-box {
  width: 960px;
  margin: 0 auto;
  padding: 1rem;
}

.content-block .inner-box h3 {
  font-weight: bold;
  letter-spacing: 0.1em;
  padding-bottom: 0.5em;
  text-align: center;
  position: relative;
  margin-bottom: 3rem;
}

.content-block .inner-box h3::after {
  content: '';
  background-color: #4c9ac0;
  width: 2em;
  height: 5px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* コンテンツブロック内の見出しh4, h5, h6 */
.content-block .inner-box h4,
.content-block .inner-box h5 {
  color: #20639b;
  letter-spacing: 0.1em;
  margin: 0 auto;
  text-align: left;
  font-weight: 700;
}

.content-block .inner-box h4 {
  font-size: 1.8rem;
}

.content-block .inner-box h5,
.content-block .inner-box h6 {
  font-size: 1.6rem;
}

.content-block .inner-box h6 {
  color: #20639b;
  margin: 1.2rem auto 0.6rem;
  text-align: left;
  font-weight: 700;
}

/* メディアクエリ: 画面幅500px以下でのh6調整 */
@media screen and (max-width: 500px) {
  .content-block .inner-box h6 {
    font-size: 1.4rem;
    margin-top: 1.2em;
    margin-bottom: 0.5em;
  }
}

/* メディアクエリ: 画面幅500px以下でのp, liフォントサイズ調整 */
@media screen and (max-width: 500px) {
  .content-block .inner-box p,
  .content-block .inner-box li {
    font-size: 3.5vw;
  }
}

/*====================================*/

/* 青いリンクボタン */
.blue-linkbtn {
  margin: 2rem auto;
  text-align: center;
  max-width: 320px;
}

.blue-linkbtn a {
  display: inline-block;
  background-color: #1594e1;
  border: 1px solid #ffffff;
  color: #ffffff;
  text-align: center;
  width: 100%;
  padding: 0.5em 0;
  font-size: 16px;
  font-weight: bold;
  border-radius: 3em;
}

/* 黄色いリンクボタン (基本スタイルが不足している可能性) */
@media screen and (max-width: 500px) {
  .yellow-linkbtn {
    margin-top: 2.5rem;
    max-width: calc(100% - 40px); /* 画面幅から余白を引いたサイズ */
  }
}

/*=================================================*/

/* テキストボックスコンテナ */
.container_txtbox {
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
}

.container_txtbox img {
  width: 100%;
  margin: 0 auto;
}

/* メディアクエリ: 画面幅600px以下でのテキストボックスコンテナ調整 */
@media screen and (max-width: 600px) {
  .container_txtbox {
    max-width: 280px;
    width: 100%;
    margin: 0 auto;
  }
}

/*=================================================*/

/* 汎用コンテナ（画像とテキストのFlexboxレイアウト） */
.container {
  display: flex;
  max-width: 960px;
  width: 90%;
  margin: 0 auto 20px;
  border: 1px solid #d6d6d6;
  padding: 20px 10px;
}

.image {
  flex: 20%;
  text-align: left;
  margin: 0 10px;
}

.image img {
  height: 160px;
}

.text {
  flex: 80%;
}

/* メディアクエリ: 画面幅600px以下での汎用コンテナ調整 */
@media screen and (max-width: 600px) {
  .container {
    display: block; /* Flexboxを解除しブロック要素に */
    margin: 0 auto 2rem;
    padding: 10px;
    max-width: 240px;
    width: 100%;
    border: 1px solid;
  }

  .image {
    display: block;
    max-width: 220px;
    text-align: center;
    margin: 0 auto;
  }

  .text {
    max-width: 300px; /* 必要であれば調整 */
    display: block;
    width: 100%;
  }
}

/*=================================================*/

/* 記事コンテナ */
#articles-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px; /* 要素間のスペース */
  justify-content: center;
}

.articles {
  border: 1px solid #ccc;
  padding: 16px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.articles img {
  max-width: 100%;
  height: auto;
}

.articles .title {
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.4;
  margin-bottom: 0.6rem;
  color: #20639b;
}

.articles .txt {
  font-size: 1.2rem;
}

/* メディアクエリ: 画面幅768px以上での記事レイアウト（PC） */
@media (min-width: 768px) {
  .articles {
    flex: 1 1 calc(33.333% - 32px); /* 3つ横並び */
  }
}

/* メディアクエリ: 画面幅767px以下での記事レイアウト（スマホ） */
@media (max-width: 767px) {
  #articles-container {
    flex-direction: column; /* 縦並び */
    gap: 16px; /* 要素間のスペース */
  }

  .articles {
    flex: 1 1 100%; /* 1つずつ表示 */
  }
}

/*========================================*/

/* SNSリンクボックス内のFlexレイアウト */
.content-block .sns-link-box .flex3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.content-block .sns-link-box .flex3 .yellow-linkbtn {
  width: 33.3333333333%;
  padding: 5px;
}

/* メディアクエリ: 画面幅768px以下でのSNSリンクボタン調整 */
@media screen and (max-width: 768px) {
  .content-block .sns-link-box .flex3 .yellow-linkbtn {
    width: 100%;
    margin: 0.2rem auto;
  }
}

/*========================================*/

/* YouTubeボックスのレスポンシブ埋め込み */
@media screen and (min-width: 768px) {
  .youtube_box {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    width: 560px;
  }
}

@media screen and (max-width: 767px) {
  .youtube_box {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9のアスペクト比を維持 */
  }
  .youtube_box iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
  }
}

/*========================*/

/* 下マージン調整用クラス */
.bottom_m_30 {
  margin-bottom: 30px;
}

/* フォントサイズ調整用クラス */
.font-small {
  font-size: 1.4rem;
}

/*===================================================*/

/* バナー要素 (flex3の外で使われる場合) */
/* flex3内の.bnrと重複するスタイルはflex3 .bnrに統合を推奨 */
.bnr {
  border: 1px solid #999;
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 1rem; /* 個別に設定する場合 */
  box-sizing: border-box; /* ここも重要 */
  /* flexプロパティはflex3 .bnrに譲る */
}

/* バナー用Flexコンテナ */
.flex3 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 各バナーの間隔を設定 */
}

.flex3 .bnr {
  flex: 1 1 calc(33.333% - 10px); /* 3つ並ぶための設定 */
  box-sizing: border-box;
  margin: 0; /* flexbox の gap で間隔を制御するため、bnr 自体のマージンは0のまま */
  border: 1px solid #999; /* 1pxの黒いボーダー */
  border-radius: 6px;
  padding: 10px; /* 上下左右に10pxの余白 */
}

/* メディアクエリ: 画面幅768px以下でのflex3内のbnr調整 */
@media (max-width: 768px) {
  .flex3 .bnr {
    flex: 1 1 calc(50% - 10px); /* スマホでは2つ並ぶように設定 */
  }
}

/*===================================================*/

/* 選挙メインセクション */
#senkyo_main {
  background-color: #ffff01;
  padding: 10px 0;
  margin: 0 auto;
  width: 100%;
}

#senkyo_main ul {
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  max-width: 960px;
}

#senkyo_main li {
  flex: 1;
  margin: 5px;
  padding: 5px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  font-weight: 700;
  color: #d4d4d4; /* デフォルトの文字色 */
}

#senkyo_main li:hover {
  background-color: #1594e1;
}

#senkyo_main li:hover a {
  color: #fff;
}

#senkyo_main li.nolinks:hover {
  background-color: #fff; /* nolinksクラスを持つliのホバー時は背景色を変えない */
}

/* メディアクエリ: 画面幅768px以下での選挙メインセクション調整 */
@media (max-width: 768px) {
  #senkyo_main ul {
    flex-direction: row; /* 横方向に並べる */
    justify-content: space-between;
    padding: 0 10px;
  }
  #senkyo_main li {
    flex: 0 0 calc(50% - 20px); /* 各項目を50%幅にして左右の余白を調整 */
    margin: 5px 0; /* 縦方向のマージンを調整 */
    height: auto; /* 自動の高さにする */
  }
}

/*==[開票速報]=================================================*/

.allcontents {
  width: 960px;
  height: 1080px;
  border: none;
}

/* メディアクエリ: 画面幅769px以下でのallcontents調整 */
@media screen and (max-width: 769px) {
  .allcontents {
    width: 100%;
    height: 1000px;
  }
}

/*==[アコーディオン全体]=================================================*/

/* アコーディオンエリア */
.accordion-area {
  list-style: none;
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
}

.accordion-area li {
  margin: 10px 0;
}

.accordion-area section {
  border: 1px solid #ccc;
}

/* アコーディオンタイトル */
.titles {
  position: relative;
  cursor: pointer;
  font-size: 1.4rem;
  font-weight: 700; /* 太字 */
  padding: 3% 3% 3% 50px;
  transition: all .5s ease;
}

/* アイコンの＋と× */
.titles::before,
.titles::after {
  position: absolute;
  content: '';
  width: 15px;
  height: 2px;
  background-color: #1594e1;
}

.titles::before {
  top: 48%;
  left: 15px;
  transform: rotate(0deg);
}

.titles::after {
  top: 48%;
  left: 15px;
  transform: rotate(90deg);
}

/* closeクラスがついたら形状変化 */
.titles.close::before {
  transform: rotate(45deg);
}

.titles.close::after {
  transform: rotate(-45deg);
}

/* アコーディオンで現れるエリア */
.boxs {
  display: none; /* はじめは非表示 */
  background: #f3f3f3;
  margin: 0 3% 3% 3%;
  padding: 3%;
}

.boxs p {
  padding-bottom: 1.2rem;
  border-bottom: 1px solid #000;
}

/*--------------------------------*/

/* アンケートリスト */
.anq_lists {
  background-color: #fff;
  border: 1px solid #666;
  padding: 6px;
  margin-bottom: 1rem;
}

.anq_lists ol {
  font-size: 1.2rem;
  margin: 0;
  padding: 0;
}

.anq_lists ol li {
  list-style: decimal;
  margin: 0.6rem 1rem 0.6rem 1rem;
  display: inline-block; /* 横並びにする意図があればこのまま */
}

/*=====================================*/

.hyoukisetumei {
  padding: 0.6rem;
  margin: 1rem auto 2rem;
}

.kouho_matome {
  display: block;
  margin: 0 auto 10px;
  max-width: 100%;
  width: 660px;
}

.kouho_matome img {
  width: 100%;
}

#senkyoku_img_box {
  /* スタイルなし */
}

.kuwari p {
  font-weight: bold;
  margin-bottom: 1rem;
  text-align: center;
  font-size: 2.4rem !important;
}

/* メディアクエリ: 画面幅769px以下での調整 */
@media screen and (max-width: 769px) {
  .hyoukisetumei {
    border: 1px solid #000;
    background-color: #ececec;
    padding: 1rem;
    margin: 1rem auto 1.6rem;
    width: 240px;
  }
  .kouho_matome {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    width: 260px;
  }
}

/* テキストボックス */
.text_box {
  padding: 1rem 2rem;
  max-width: 860px;
  margin: 0 auto;
}

/* 赤いテキスト */
.txr-red {
  color: crimson;
  padding: 8px 0;
}

/* レスポンシブテーブル */
table.responsive-table {
  width: 100%;
  max-width: 800px; /* PCでの最大幅 */
  margin: 0 auto; /* 水平方向の中央配置 */
}

/* th要素を太字にする */
th {
  font-weight: 900; /* または bold */
}

/* メディアクエリ: 画面幅768px以下でのFlexboxテーブルレイアウト */
@media (max-width: 768px) {
  table.responsive-table {
    display: block; /* テーブル全体をブロック要素として扱う */
    border-collapse: collapse;
    border-spacing: 0;
    max-width: 100%; /* スマホでは全幅 */
  }

  table.responsive-table tbody {
    display: block;
    width: 100%;
  }

  table.responsive-table tr {
    display: flex; /* 各行をFlexコンテナにする */
    flex-direction: row;
    flex-wrap: wrap;
    border: 1px solid #ccc; /* 各行にボーダーを追加 */
    margin-bottom: 10px; /* 各行の下に余白 */
    padding: 5px;
    box-sizing: border-box;
    align-items: flex-start;
  }

  table.responsive-table td {
    display: block;
    padding: 5px 0;
    box-sizing: border-box;
    border-bottom: none; /* tdの下ボーダーを非表示 */
  }

  table.responsive-table td:first-child {
    font-weight: bold;
    width: 30%;
    text-align: left;
    margin-right: 10px;
    flex-shrink: 0;
  }

  table.responsive-table td:last-child {
    width: calc(70% - 10px);
    text-align: left;
    flex-grow: 1;
  }
}