@charset "utf-8";

/* メインCSS */

/* Regular (ウェイト: 400) */
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    url("../fonts/NotoSansJP/NotoSansJP-Regular.woff2") format("woff2"),
    url("../fonts/NotoSansJP/NotoSansJP-Regular.woff") format("woff");
}

/* Medium (ウェイト: 500) */
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src:
    url("../fonts/NotoSansJP/NotoSansJP-Medium.woff2") format("woff2"),
    url("../fonts/NotoSansJP/NotoSansJP-Medium.woff") format("woff");
}

/* SemiBold (ウェイト: 600) */
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src:
    url("../fonts/NotoSansJP/NotoSansJP-SemiBold.woff2") format("woff2"),
    url("../fonts/NotoSansJP/NotoSansJP-SemiBold.woff") format("woff");
}

/* ExtraBold (ウェイト: 800) */
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src:
    url("../fonts/NotoSansJP/NotoSansJP-ExtraBold.woff2") format("woff2"),
    url("../fonts/NotoSansJP/NotoSansJP-ExtraBold.woff") format("woff");
}

/*cssのリセット*/
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  border: 0;
  outline: 0;
  background: transparent;
}

body {
  line-height: 1;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

a {
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none;
}

ins {
  text-decoration: none;
  color: #000;
  background-color: #ff9;
}

mark {
  font-weight: bold;
  font-style: italic;
  color: #000;
  background-color: #ff9;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  cursor: help;
  border-bottom: 1px dotted;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

hr {
  display: block;
  height: 1px;
  margin: 1em 0;
  padding: 0;
  border: 0;
  border-top: 1px solid #ccc;
}

/* =================================================================
   3. WordPressコアスタイル
================================================================= */

/* --- 配置クラス --- */
.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.alignleft {
  float: left;
  margin-right: 1.5em;
}
.alignright {
  float: right;
  margin-left: 1.5em;
}
.has-text-align-center {
  text-align: center;
}
.has-text-align-right {
  text-align: right;
}
.has-text-align-left {
  text-align: left;
}

/* 回り込み解除 */
.clear,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
  content: "";
  display: table;
  clear: both;
}

/* --- 幅広・全幅（ブロックエディタ用） --- */
/* .entry-content は投稿や固定ページの本文を囲む要素のクラス名（ご自身のテーマに合わせて変更） */
.entry-content > .alignwide {
  margin-left: -100px;
  margin-right: -100px;
  max-width: initial;
  width: auto;
}
.entry-content > .alignfull {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  width: 100vw;
}

/* --- 画像キャプション --- */
.wp-caption {
  margin-bottom: 1.5em;
  max-width: 100%;
}
.wp-caption img[class*="wp-image-"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.wp-caption-text {
  font-size: 1.4rem; /* 14px */
  color: #666;
  text-align: center;
  margin: 0.8em 0;
}

/* --- アクセシビリティ（スクリーンリーダー用テキスト） --- */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

/*サイト全体の基準となるCSSを記述*/

body {
  font-family: "Noto Sans JP", sans-serif;
}

.no-scroll {
  overflow: hidden;
}

html {
  /* ブラウザの標準設定（通常16px）を1remとする */
  font-size: 16px;
  /* 文字の読みやすさを確保 */
  -webkit-text-size-adjust: 100%;
}

/* 一般的な本文 */
body {
  font-size: clamp(0.9375rem, 1vw + 0.5rem, 1rem);
}

/* メイン背景 */

/* 文字色 */

/* センター文字 */
.text-center {
  text-align: center;
}

/* 左寄せ文字 */
.text-left {
  text-align: left;
}

/* 改行 */
.br-sp {
  display: none;
}

/* 区切り線 */
/* シンプルな細い線 */
.separator-thin {
  border: none;
  border-top: 1px solid #ddd;
  margin: 10px auto;
  width: 90%;
}

/* びわこらしい青のドット線 */
.separator-dot {
  border: none;
  border-top: 3px dotted #005bac;
  margin: 40px auto;
  width: 50%; /* 中央に短く引くとかっこいいです */
}

/* トップページ */
/* メインビジュアル内の紹介文 */
.intro-text p {
  font-size: clamp(0.75rem, 2vw + 0.625rem, 1.375rem);
  line-height: 1.8;
  color: #294565;
}

/* お知らせ */
.news-section {
  text-align: center;
  background-color: #dbedf2;
}

.news-section h2 {
  display: inline-block;
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 400;
  color: #294565;
  display: inline-block;
  border-bottom: 2px solid #294565;
  padding-bottom: 5px;
}

/* --- お知らせリストのコンテナ --- */
.news-list-wrapper {
  text-align: center; /* リスト全体を中央へ */
}

.news-list {
  display: inline-block; /* 中身の幅に合わせる */
  text-align: left; /* セット内の文字は左揃え（頭揃え） */
  max-width: 800px; /* 広がりすぎないように制限 */
  width: 90%; /* スマホ等では幅いっぱいに近く */
}

/* --- 各お知らせのセット（日付・タイトル・下線） --- */
.news-item {
  border-bottom: 1px solid #ccc; /* セットの下線 */
  padding: 15px 0; /* 上下の余白 */
  display: flex; /* 日付とタイトルを横並びに */
  gap: 20px; /* 日付とタイトルの間隔 */
}

/* スマホ表示の時は縦に並べる（必要に応じて） */
@media screen and (max-width: 600px) {
  .news-item {
    flex-direction: column;
    gap: 5px;
    padding: 10px 0;
  }
}

.news-date {
  font-size: 0.85rem;
  color: #666;
  flex-shrink: 0; /* 日付が改行されないように固定 */
}

.news-title {
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  color: #333;
  text-decoration: none;
  line-height: 1.4;
}

.news-title:hover {
  text-decoration: underline; /* ホバー時にのみタイトルの下に線を出す */
}

/* 大会概要の見出し */
.event-info h2 {
  font-size: clamp(1.25rem, 4vw, 3rem);
  text-align: center;
  font-weight: 500;
  color: #294565;
}

.event-img {
  width: 100%;
}

.event-table {
  margin-left: 10px;
}

/* テーブル内のテキストサイズを一括調整 */
.event-table th,
.event-table td {
  font-size: clamp(1.2rem, 2vw + 0.2rem, 1.4rem);
  line-height: 1.4;
  vertical-align: top;
  padding-bottom: 15px;
}

/* 項目名（開催日時・会場）の幅調整 */
.event-table th {
  text-align: left;
  white-space: nowrap;
  /* 35pxになると文字幅も広がるため、少し余裕を持たせる */
  width: 5.5em;
  font-weight: 400;
  color: #333;
}

/* 会場の補足情報（なぎさ公園など）は少し小さくしてバランスを取る */
.venue-sub {
  font-size: 0.6em; /* 親の35pxに対しての比率（約21px） */
  display: block;
  margin-top: 5px;
  color: #666;
  font-weight: normal;
}

/* スケジュール全体のコンテナ */
.event-schedule {
  margin: 40px auto;
  max-width: 900px;
  width: 95%;
}

.schedule-table {
  width: 100%;
  border-collapse: collapse;
}

/* 「午前の部」「午後の部」の見出し */
.schedule-table th {
  font-size: clamp(1.2rem, 2vw + 0.2rem, 1.4rem);
  color: #005bac;
  padding-bottom: 20px;
  width: 50%; /* 左右均等に分ける */
  text-align: center;
  border-bottom: 2px solid #005bac;
}

/* 種目リストの部分 */
.schedule-table td {
  padding-top: 20px;
  vertical-align: top;
}

/* リストのスタイルを整える */
.schedule-table ul {
  list-style: none; /* 点を消す（イメージ図に合わせるなら） */
  padding: 0;
  display: inline-block; /* 中身の幅に合わせる */
  text-align: left; /* 種目名は左揃え（頭揃え） */
}

/* リスト全体を中央に寄せるための指定 */
.schedule-table td {
  text-align: center;
}

.schedule-table li {
  font-size: clamp(1rem, 2vw + 0.2rem, 1.1rem);
  line-height: 1.8;
  color: #333;
}

/* 大会要項リンク */
.event-link {
  font-size: clamp(1.2rem, 2vw + 0.2rem, 1.4rem);
  color: #f25439;
  display: block !important;
  width: 100%;
  margin-bottom: 15px;
}

.event-link a {
  color: #f25439;
  display: inline-block;
  border-bottom: 2px solid #f25439;
  padding-bottom: 8px;
  text-decoration: none; /* 標準の下線を消す */
}

.event-link a:hover {
  color: #ff8570;
  border-bottom-color: #ff8570; /* ホバー時に下線の色も一緒に明るくする */
}

/* 開催場所 */
/* セクション全体の中央揃え */
.location-section {
  text-align: center;
  padding: 40px 0;
}

/* 開催場所 (h2) の設定 */
.location-title {
  display: inline-block; /* 文字の長さだけに下線を引くために必須 */
  border-bottom: 2px solid #005bac; /* 青色の下線 */
  padding-bottom: 5px;
  margin-bottom: 20px;

  font-size: clamp(1.3rem, 4vw, 1.7rem);
  color: #005bac;
  font-weight: bold;
}

/* 住所 (p) の設定 */
.location-address {
  font-size: clamp(1.2rem, 3vw, 1.3rem);
  line-height: 1.4;
  color: #333;
}

/* カッコ内を小さくする設定 */
.location-sub {
  /* 親の文字サイズに対して約70%の大きさに */
  font-size: 1em;
  color: #666;
}

/* 交通機関の利用 */
.access_box {
  max-width: 1000px;
  width: 90%;
  margin: 0 auto;
  text-align: left;
}
.access_tp {
  font-size: clamp(1.3rem, 4vw, 1.7rem);
  line-height: 1.6;
}
.access_p {
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  line-height: 1.6;
}