/*  */
/* フォントはGoogle Fontsから(Google Fontsのダウンロードページにリンクがある) */
/* Inter(英数字用) と Noto Sans JP(日本語文字用)を使う */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Sans+JP:wght@100..900&display=swap");

* {
  font-family: Inter, "Noto Sans JP", sans-serif; /* フォント*/
  font-variant: tabular-nums !important; /* 等幅数字を使用する */
  box-sizing: border-box;
  /* 追加 */
}

/* padding: HTML要素内に空白を調整 */
/* margin : 要素の外にある余白を調整 */

html {
  font-size: 16px;
  /* スマホ向けのベースフォントサイズ */
  /* BeerCSSのデフォルトは16px */
  /* margin-block-start: 0 !important; */
}

/* BeerCSSのmarginを取り消す */
* + :is(address, article, blockquote, code, .field, fieldset, form, .grid, h1, h2, h3, h4, h5, h6, nav, ol, p, pre, .row, section, aside, table, .tabs, ul) {
  margin-block-start: 0 !important;
}

h1, h2, h3, h4, h5, h6 {
  /* margin: 0; */
  margin-top: 16px !important;
  /* 見出しの上下マージンをリセット */
  color: var(--on-primary-container) !important;
}

h1, h2, h3 {
  /* 太さを指定: ウェイト700=太字(Bold) */
  font-weight: 700 !important;
}

h4, h5, h6 {
  /* 太さを指定: ウェイト600=セミボールド(SemiBold) */
  font-weight: 600 !important;
  /* BeerCSSのデフォルトは400 */
}

/* 見出しのフォントサイズ (スマホ向け) */
h1 {
  /* 1.6rem は ベースのフォントサイズ(ここでは16px)の1.6倍 */
  font-size: 1.6rem;
}

h2 {
  font-size: 1.3rem;
}

h3 {
  font-size: 1.25rem;
}

/* 追加 */
h4 {
  font-size: 1.2rem;
}

h5 {
  font-size: 1.1rem;
  margin: 8px 0 !important;
}

h6 {
  font-size: 0.8rem;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
  text-align: center;
  margin-top: 1.5em;
  /* 見出しの上下マージン調整 */
  margin-bottom: 0.75em;
}

/* リンク */
a {
  text-decoration: underline !important;
  color: var(--primary) !important;
  margin: 4px !important;
  font-weight: 600;
}
/* ボタン型リンク */
a.button{
  text-decoration: none !important;
}

/* ナビゲーション */
#nav a{
  text-decoration: none !important;
  color: var(--on-surface-variant) !important;
  font-weight: 500;
}
#nav a.active i, #nav a.active span{
  color: var(--primary) !important;
}
#nav a.active span{
  font-weight: 700;
}

#nav nav.fixed{
  border-top: 1px solid var(--outline-variant) !important;
  border-radius: 4px;
}

/* ホバー/クリック時の挙動 */
main {
  a:hover {
    background-color: var(--inverse-primary);
    border-radius: 4px;
  }
  a:active:not(.button) {
    background-color: var(--primary-container);
    color: var(--primary) !important;
    border-radius: 4px;
  }
}
::selection{
  background-color: var(--primary-container);
  color: var(--on-surface-variant);      
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

img.logo {
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

main {
  margin: 12px;
  flex: 1;
  width: calc(100% - 24px);
  /* mainの幅を画面幅からマージン分引いたものに */
  overflow-x: hidden;
  /* テーブル等がはみ出す場合のスクロールを制御 */
}

/* ボタン */
.button-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding: 2rem 0;
  color: var(--on-primary-container) !important;
}

/* ボタンのテキスト */
.button-container a {
  text-decoration: none !important;
  color: var(--on-primary-container) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* アイコン */
i {
  padding: 0 4px;
}

.hero-section {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 仕切り線 */
hr {
  margin: 20px 0;
}

/* テーブル */
table {
  width: 100%;
  /* main要素の幅に追従 */
  margin-top: 12px !important;
  margin-bottom: 12px !important;
  border: 1px solid var(--outline);
  /* テーブル全体の枠線 */
  border-radius: 4px;
  /* テーブル全体の角丸 */
  /* border-collapse: collapse; を使うと角丸が無効になる代わりにセル間の線が綺麗になる */
  /* border-spacing: 0; border-collapse: separate の場合に有効 */
}

/* thとtdの共通スタイル (スマホ向け) */
th, td {
  font-size: 0.8rem;
  /* スマホ向けテーブルフォントサイズ */
  padding: 0.6em 0.5em;
  /* パディング調整 */
  border-right: 1px solid var(--outline);
  /* 右側の縦線 */
  text-align: center;
  /* セル内テキスト中央揃え */
  vertical-align: middle;
  /* セル内垂直中央揃え */
  line-height: 1.3;
  /* 行間の高さ調整 */
  word-break: break-word;
  /* 長い単語の折り返し */
}

/* 各行の下に区切り線を追加 */
table tr {
  border-bottom: 1px solid var(--outline-variant);
  /* やや薄い線で区切る */
}

/* テーブルの最後の行の下線は不要 */
table tr:last-of-type {
  border-bottom: none;
}

/* テーブルの最後の列の右枠線は不要 */
table tr th:last-of-type, table tr td:last-of-type {
  border-right: none;
}

/* 強調表示するセル (ヘッダーと各行の最初のセル) */
th, td:first-child {
  font-weight: 600;
  background-color: var(--secondary-container) !important;
  color: var(--on-surface) !important;
  /* font-size は上記の th, td の指定に従う (スマホでは0.8rem) */
}

/* プライマリ、セカンダリ、ターシャリのボタンにおいてテキストカラーを以下に調整 */
a.button.primary{
  color: var(--secondary-container) !important;
}
a.button.secondary{
  color: var(--secondary-container) !important;
}
a.button.tertiary{
  color: var(--tertiary-container) !important;
}

/* ヘッダー/フッター */
header {
  justify-content: baseline;
  border-radius: 4px;
  border-bottom: 1px solid var(--outline-variant);
  /* position: fixed;
  align-items: stretch;
  width: 100% !important;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030; */
}

header a {
  font-weight: 600;
  color: var(--on-primary-container) !important;
  text-decoration: none !important;
}

footer {
  margin-top: 15px !important;
  border-radius: 4px;
  margin-bottom: 98px !important;
}

/* BeerCSSの .border.fill と完全に同じスタイルかは不明なため注意 */
/* .border.fill,
.tertiary-container.border {
  border-radius: 4px !important;
  padding: 4px 1rem;
} */

/* PC向けスタイル (タブレット以上) */
@media (min-width: 768px) {

  /* PC向けの見出しフォントサイズ */
  h1 {
    font-size: 2rem !important;
  }

  h2 {
    font-size: 1.6rem !important;
  }

  h3 {
    font-size: 1.3rem !important;
  }

  h4, h5, h6 {
    font-size: 1.25rem !important;
  }

  html,
  p {
    font-size: 20px !important;
  }

  .button-container {
    grid-template-columns: repeat(3, 1fr);
  }

  img.logo {
    display: block;
    /* 元の指定 */
  }

  /* PC向けのテーブルフォントサイズ */
  th, td {
    font-size: 0.9rem;
    /* PCでは少し大きく */
    padding: 0.7em 0.8em;
    /* パディングも調整 */
  }

  /* PC向けのヘッダーセルと各行最初のセルのフォントサイズ */
  th, td:first-child {
    font-size: 1.1rem !important;
    /* 元の1.5remから調整、!importantは既存に倣う */
  }
}


/* 以下、カラーテーマの設定(secondary-container 等はここを参照している) */
/* トップページのカラーテーマ */
:root,
body.top {
  --primary: #0062a1;
  --on-primary: #ffffff;
  --primary-container: #d0e4ff;
  --on-primary-container: #001d35;
  --secondary: #525f70;
  --on-secondary: #ffffff;
  --secondary-container: #d6e4f7;
  --on-secondary-container: #0f1c2a;
  --tertiary: #6a5779;
  --on-tertiary: #ffffff;
  --tertiary-container: #f1daff;
  --on-tertiary-container: #241432;
  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #410002;
  --background: #fdfcff;
  --on-background: #1a1c1e;
  --surface: #f9f9fc;
  --on-surface: #1a1c1e;
  --surface-variant: #dfe3eb;
  --on-surface-variant: #42474e;
  --outline: #73777f;
  --outline-variant: #c2c7cf;
  --shadow: #000000;
  --scrim: #000000;
  --inverse-surface: #2f3033;
  --inverse-on-surface: #f1f0f4;
  --inverse-primary: #9ccaff;
  --surface-dim: #dadadd;
  --surface-bright: #f9f9fc;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f4f3f7;
  --surface-container: #eeedf1;
  --surface-container-high: #e8e8eb;
  --surface-container-highest: #e2e2e6;
}

/* 全統小(赤ベース) */
:root,
body.elem {
  --primary: #c0011e;
  --on-primary: #ffffff;
  --primary-container: #ffdad7;
  --on-primary-container: #410004;
  --secondary: #775654;
  --on-secondary: #ffffff;
  --secondary-container: #ffdad7;
  --on-secondary-container: #2c1513;
  --tertiary: #725b2e;
  --on-tertiary: #ffffff;
  --tertiary-container: #ffdea6;
  --on-tertiary-container: #271900;
  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #410002;
  --background: #fffbff;
  --on-background: #201a1a;
  --surface: #fff8f7;
  --on-surface: #201a1a;
  --surface-variant: #f5dddb;
  --on-surface-variant: #534342;
  --outline: #857371;
  --outline-variant: #d8c2bf;
  --shadow: #000000;
  --scrim: #000000;
  --inverse-surface: #362f2e;
  --inverse-on-surface: #fbeeec;
  --inverse-primary: #ffb3ae;
  --surface-dim: #e4d7d6;
  --surface-bright: #fff8f7;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #fef1ef;
  --surface-container: #f8ebe9;
  --surface-container-high: #f2e5e4;
  --surface-container-highest: #ede0de;
}

/* 全統中(青ベース) */
:root,
body.junior {
  --primary: #395aaf;
  --on-primary: #ffffff;
  --primary-container: #dbe1ff;
  --on-primary-container: #00174a;
  --secondary: #585e72;
  --on-secondary: #ffffff;
  --secondary-container: #dde1f9;
  --on-secondary-container: #151b2c;
  --tertiary: #745471;
  --on-tertiary: #ffffff;
  --tertiary-container: #ffd6f8;
  --on-tertiary-container: #2b122b;
  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #410002;
  --background: #fefbff;
  --on-background: #1b1b1f;
  --surface: #fbf8fd;
  --on-surface: #1b1b1f;
  --surface-variant: #e2e2ec;
  --on-surface-variant: #45464f;
  --outline: #757680;
  --outline-variant: #c5c6d0;
  --shadow: #000000;
  --scrim: #000000;
  --inverse-surface: #303034;
  --inverse-on-surface: #f2f0f4;
  --inverse-primary: #b3c5ff;
  --surface-dim: #dbd9dd;
  --surface-bright: #fbf8fd;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f5f3f7;
  --surface-container: #efedf1;
  --surface-container-high: #e9e7ec;
  --surface-container-highest: #e4e2e6;
}

/* 全統高(緑ベース) */
:root,
body.senior {
  --primary: #006e1c;
  --on-primary: #ffffff;
  --primary-container: #94f990;
  --on-primary-container: #002204;
  --secondary: #52634f;
  --on-secondary: #ffffff;
  --secondary-container: #d5e8cf;
  --on-secondary-container: #111f0f;
  --tertiary: #38656a;
  --on-tertiary: #ffffff;
  --tertiary-container: #bcebf0;
  --on-tertiary-container: #002023;
  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #410002;
  --background: #fcfdf6;
  --on-background: #1a1c19;
  --surface: #f9faf4;
  --on-surface: #1a1c19;
  --surface-variant: #dee5d8;
  --on-surface-variant: #424940;
  --outline: #72796f;
  --outline-variant: #c2c9bd;
  --shadow: #000000;
  --scrim: #000000;
  --inverse-surface: #2f312d;
  --inverse-on-surface: #f0f1eb;
  --inverse-primary: #78dc77;
  --surface-dim: #dadad4;
  --surface-bright: #f9faf4;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f3f4ee;
  --surface-container: #eeeee8;
  --surface-container-high: #e8e9e2;
  --surface-container-highest: #e2e3dd;
}