@import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap");
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */ :root {
  --default-font: "OpenSans", "Noto Sans JP", sans-serif;
  --heading-font: "OpenSans", "Noto Sans JP", sans-serif;
  --nav-font: "OpenSans", "Noto Sans JP", sans-serif;
}
/* Global Colors */ :root {
  --default-color: #111111;
  --accent-color: #325c78;
  --accent-color-rgb: 50, 92, 120;
  --secondary-color: #b3d25c;
  --secondary-color-rgb: 179, 210, 92;
  --contrast-color: #ffffff;
  --background-color: #ffffff;
  --gray-background-color: #f9f9f9;
}
/* Nav Menu Colors */ :root {
  --nav-color: #004471;
  --nav-background-color: #ffffff;
  --nav-hover-color: var(--accent-color);
  --nav-hover-background-color: rgba(var(--accent-color-rgb), 20%);
}
/* Smooth scroll */ :root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
html {
  height: 100%;
}

body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
}

.page-wrapper {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  grid-template-columns: 100%;
  min-height: 100vh;
}

main {
  padding: 0;
  display: flex;
  flex-flow: column;
}
main > div {
  padding-top: 48px;
  padding-bottom: 48px;
}
main > div:last-child {
  flex-grow: 1;
}
@media screen and (max-width: 767.98px) {
  main > div {
    padding-top: 36px;
    padding-bottom: 36px;
  }
}
@media screen and (max-width: 479.98px) {
  main > div {
    padding-top: 24px;
    padding-bottom: 24px;
  }
}

/* a
-------------------------------------------------- */
a {
  color: var(--default-color);
  transition: all 0.5s ease;
}
a:is(:hover, :focus, :active) {
  color: var(--accent-color);
}

/* h1 h2 h3 h4 h5 h6
-------------------------------------------------- */
:is(h1, h2, h3, h4, h5, h6) {
  color: var(--accent-color);
  font-family: var(--heading-font);
  font-weight: 700;
}
h1 {
  color: #fff;
  font-size: 1.725em;
}

h2 {
  font-size: 1.575em;
  font-weight: 900;
  margin-bottom: 1.25em;
}

h3 {
  font-size: 1.375em;
  margin-bottom: 0.75em;
  padding-bottom: 0.5em;
  border-bottom: 1px solid var(--accent-color);
}

h4 {
  font-size: 1.25em;
  margin-bottom: 0.75em;
}

h5 {
  font-size: 1.125em;
  margin-bottom: 0.75em;
}

h6 {
  font-size: 1em;
  margin-bottom: 0.75em;
}

:is(h1, h2, h3, h4, h5, h6) small {
  font-weight: normal;
  color: inherit;
}

.fs-1 {
  font-size: 1.725em;
}

.fs-2 {
  font-size: 1.575em;
}

.fs-3 {
  font-size: 1.375em;
}

.fs-4 {
  font-size: 1.25em;
}

.fs-5 {
  font-size: 1.125em;
}

.fs-6 {
  font-size: 1em;
}

@media screen and (max-width: 767.98px) {
  h1,
  .fs-1 {
    font-size: 1.5em;
  }

  h2,
  .fs-2 {
    font-size: 1.375em;
  }

  h3,
  .fs-3 {
    font-size: 1.3em;
  }

  h4,
  .fs-4 {
    font-size: 1.25em;
  }

  h5,
  .fs-5 {
    font-size: 1em !important;
  }

  h6,
  .fs-6 {
    font-size: 0.875em !important;
  }
}

@media screen and (max-width: 479.98px) {
  h1,
  .fs-1 {
    font-size: 1.3em;
  }

  h2,
  .fs-2 {
    font-size: 1.25em;
  }

  h3,
  .fs-3 {
    font-size: 1.2em;
  }

  h4,
  .fs-4 {
    font-size: 1.125em;
  }
  }
}
/* p
-------------------------------------------------- */
p, li, dt, dd, th, td, .btn {
  font-size: 1em;
}
@media screen and (max-width: 767.98px) {
  p, li, dt, dd, th, td, .btn {
    font-size: 0.925em;
  }
  li li {
    font-size: 1em;
  }
}
@media screen and (max-width: 479.98px) {
  p, li, dt, dd, th, td .btn {
    font-size: 0.875em;
  }
}
/* ========================================
     オフキャンバスサイドバー (Foundation → Bootstrap 5 Offcanvas)
======================================== */
#offcanvas-left-side-menu .offcanvas-body {
  padding: 0;
}
/* デスクトップでは常にサイドバーを表示 */
@media (min-width: 992px) {
  #offcanvas-left-side-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 250px;
    height: 100vh;
    overflow-y: auto;
    background: var(--nav-background-color);
    border-right: 1px solid #dee2e6;
    z-index: 1040;
    transform: none !important;
    visibility: visible !important;
  }
  .page-wrapper {
    margin-left: 250px;
  }
}
@media (max-width: 991.98px) {
  .page-wrapper {
    margin-left: 0;
  }
}
.offcanvas.offcanvas-start {
  width: 250px;
}
/* ========================================
     ナビゲーションメニュー
======================================== */
.left-side-menu .nav-link {
  color: var(--nav-color);
  font-family: var(--nav-font);
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #eee;
  display: block;
}
.left-side-menu .nav-link.pe-none {
  color: rgba(var(--accent-color-rgb), 0.7);
}
.left-side-menu .nav-link:hover,
.left-side-menu .nav-link.nav-selected {
  background-color: var(--nav-hover-background-color);
  color: var(--nav-hover-color);
}
/* ========================================
     タイトルバー（モバイル）
======================================== */
.mobile-title-bar {
  background-color: var(--gray-background-color);
  color: var(--nav-color);
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mobile-title-bar .title-bar-title {
  font-size: 1.125rem;
  font-weight: 600;
}
.mobile-title-bar .title-bar-title a {
  color: var(--nav-color);
  text-decoration: none;
}
@media screen and (max-width: 479.98px) {
  .mobile-title-bar .title-bar-title {
    font-size: 1em;
  }
}
.btn-open { 
  color: var(--accent-color);
  background-color: transparent;
  border: none;
}
.btn-open i { 
  font-size: 1.25rem;
}

/* アコーディオン
-------------------------------------------------- */
.my-accordion .accordion-button {
  font-size: 1.25rem;
  font-weight: 600;
}

/* header
-------------------------------------------------- */
.title-header,
.home-catch,
.page-title {
  background-color: var(--accent-color);
}
.title-header {
  background-image: url("../files/header-back.png");
  background-position: center center;
  background-repeat: no-repeat;
}
.page-title {
  padding-bottom: 1.125em;
}
@media screen and (max-width: 479.98px) {
  .page-title {
    padding-bottom: 0.75em;
  }
}

/* home-layout, main-contents, table
-------------------------------------------------- */
.layout-news,
.main-contents-even,
.table th {
  background-color: rgba(var(--accent-color-rgb), 8%);
}
.layout-host {
  background-color: rgba(var(--accent-color-rgb), 12%);
}
.layout-co-host {
  background-color: rgba(var(--accent-color-rgb), 16%);
}
.layout-support {
  background-color: rgba(var(--accent-color-rgb), 20%);
}
#footer-top {
  background-color: var(--gray-background-color);
}
#footer-bottom {
  background-color: var(--secondary-color);
}

/* table
-------------------------------------------------- */
.table :is(th, td) {
  text-align: center;
}
.table-bordered {
  border-color: #cccccc;
}

/* overview
-------------------------------------------------- */
dl.overview :is(dt, dd) {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1em;
}
dl.overview dt {
  padding: .5em .5em;
  margin-bottom: 0;
  color: #fff;
  background-color: var(--accent-color);
  text-align: center
}
dl.overview dd {
  margin: .25em 0 .75em
}

/* information
-------------------------------------------------- */
dl.information {
  margin-bottom: 0;
}
dl.information :is(dt, dd) {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1em;
  margin: .25em 0 .75em
}
dl.information dt {
  color: var(--accent-color);
}
@media screen and (max-width: 767.98px) {
  dl:is(.overview, .information) :is(dt, dd) {
    font-size: 1.125em;
  }
}
@media screen and (max-width: 479.98px) {
  dl:is(.overview, .information) :is(dt, dd) {
    font-size: 1em;
  }
}

/* news
-------------------------------------------------- */
dl.news {
  border-bottom: 1px dotted #666666;
}
dl.news dt {
  color: var(--accent-color);
}
dl.news dd {
}

/*--------------------------------------------------------------
# btn
--------------------------------------------------------------*/
.btn {
  font-size: 1rem;
  font-weight: 600;
  padding: 0.8rem 2rem;
  border-radius: 50px;
  transition: all 0.3s ease;
}
.btn-sm {
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
}
.btn.btn-accent {
  color: var(--contrast-color);
  background-color: var(--accent-color);
  border: 2px solid var(--accent-color);
}
.btn.btn-accent:hover {
  color: var(--accent-color);
  background-color: var(--contrast-color);
  border: 2px solid var(--accent-color);
}
.btn.btn-outline {
  color: var(--accent-color);
  background-color: transparent;
  border: 2px solid var(--accent-color);
}
.btn.btn-outline:hover {
  color: var(--contrast-color);
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}
.btn.btn-secondary {
  color: var(--accent-color);
  background-color: var(--secondary-color);
  border: 2px solid var(--secondary-color);
}
.btn.btn-secondary:hover {
  color: var(--contrast-color);
  background-color: var(--accent-color);
  border: 2px solid var(--accent-color);
}