/*フォント指定*/
.mukata {
  font-family: Mukta, sans-serif;
}
.ibmplex {
  font-family: 'IBM Plex Sans JP', sans-serif;
}
.noto {
  font-family: 'Noto Sans JP', sans-serif;
}
.bebas {
  font-family: 'Bebas Neue', sans-serif;
}
/*教科別カラー*/
.sugaku .color, #sugaku .color {
  color: #0081CC !important
}
.rika .color, #rika .color {
  color: #77c730 !important
}
.eigo .color, #eigo .color {
  color: #f08300 !important
}
.kokugo .color, #kokugo .color {
  color: #9d389a !important
}
.shakai .color, #shakai .color {
  color: #e74291 !important
}
.joho .color, #joho .color {
  color: #808788 !important
}
.sugaku .color, #sugaku .bgcolor {
  background: #0081CC;
}
.rika .color, #rika .bgcolor {
  background: #77c730;
}
.eigo .color, #eigo .bgcolor {
  background: #f08300;
}
.kokugo .color, #kokugo .bgcolor {
  background: #9d389a;
}
.shakai .color, #shakai .bgcolor {
  background: #e74291;
}
.joho .color, #joho .bgcolor {
  background: #808788;
}
@media (max-width: 1140px) {
  /* 画面サイズが1100px未満の場合の設定 */
  /*ご利用の流れ*/
  #flow, #about {
    margin: 0 2rem;
  }
}
/*画像の影指定*/
.shadow-img {
  /* filter: drop-shadow(水平方向 垂直方向 ぼかし量 色); */
  filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.3));
}
/*下層ページのヘッダー固定分調整*/
.under {
  margin-top: 75px;
}
/*セクションの幅指定*/
.sec_outer {
  max-width: 1084px;
  margin: 0 auto;
}
/* ヘッダー */
.header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 75px;
  z-index: 2000;
  background: rgba(255, 255, 255, 0);
  backdrop-filter: blur(30px);
  /*border-bottom: 1px solid rgba(0, 0, 0, 0.05);*/
  display: flex;
  align-items: center;
}
.header:not(.is-scrolled) {
  background: none;
  backdrop-filter: none;
  transition: all 0.3s ease; /* 変化を滑らかにする */
}
.header-container {
  width: 100%;
  max-width: 1084px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.logo {
  margin-right: auto;
}
.logo a {
  margin-right: 1rem;
}
.header-action {}
.under .header, .header.act {
  background: #fff;
  backdrop-filter: none;
  border: 1px solid #ebebeb;
}
/*フッター*/
footer {
  text-align: center;
  padding: 5rem 0 2rem;
}
.footer-links {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 30px; /* リンク同士の間隔 */
}
.footer-links a {
  position: relative;
  padding-left: 18px; /* アイコン分のスペース */
  transition: color 0.3s;
  font-size: 1.6rem;
  color: #333;
  text-decoration: underline;
}
/* リンクの頭にドットを表示 */
.footer-links a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background-color: #0081cc; /* 通常時のドットの色 */
  border-radius: 50%; /* 正円にする */
  transition: background-color 0.3s, transform 0.3s;
}
/* ホバー時の演出 */
.footer-links a:hover {
  color: #333;
}
.footer-links a:hover::before {
  width: 12px;
  height: 12px;
  left: -3px;
  transform: translateY(-50%) scale(1.2); /* 少し大きくする */
}
footer p {
  font-size: 1.2rem;
  text-align: center;
  padding: 5rem 0 2rem;
}
.suken-logo img {
  width: 120px;
  height: auto;
}
.ainavi-logo img {
  width: 36px;
  height: auto;
}
.ainavi-logo {
  display: none;
}
.act .ainavi-logo, .under .ainavi-logo {
  display: inline-block;
}
/*ページトップへ戻るボタン*/
#back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  background: linear-gradient(to top, #4C6DB4 0%, #3EBDE0 100%);
  backdrop-filter: blur(10px); /* ガラス質感 */
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* 初期状態は非表示（透明かつ下にずらす） */
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  z-index: 3000;
}
/* ボタン内の矢印アイコン（CSSのみで作成） */
#back-to-top::after {
  content: '';
  width: 12px;
  height: 12px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  transform: rotate(-45deg);
  margin-top: 5px;
}
/* 表示状態のクラス */
#back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
#back-to-top:hover {
  transform: translateY(-5px) scale(1.1);
}
/* PCナビ */
.nav-pc .nav-list {
  display: flex;
  list-style: none;
  gap: 10px;
}
.nav-pc {
  margin: 0;
}
.nav-pc a {
  text-decoration: none;
  color: #444;
  font-weight: 700;
  font-size: 1.5rem;
  transition: 0.3s;
  display: block;
  color: #fff;
  padding: .75rem 2rem;
  min-width: 220px;
  text-align: center;
  border-radius: 5px;
  border: 1px solid #ffffff;
  background: linear-gradient(to top, #254790, #2196f3);
  /* 影（水平 垂直 ぼかし 色） */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* --- 矢印のための設定 --- */
  position: relative;
  padding-right: 35px;
}
/* --- おしゃれな矢印（疑似要素） --- */
.nav-pc a::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  /* 矢印の形を作る（細身でシンプルな線） */
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translateY(-50%) rotate(45deg);
  /* アニメーションの準備 */
  transition: all 0.3s ease;
  opacity: 0.8;
}
/* ホバー時に矢印を少し右に動かす */
.nav-pc a:hover::after {
  right: 12px;
  opacity: 1;
}
.under .header .nav-pc a, .header.act .nav-pc a {
  background: linear-gradient(to top, #186db0, #2196F3);
  box-shadow: 0 0px 5px 0 rgba(0, 0, 0, 0.1);
  color: #fff;
  border: 1px solid #ffffff;
}
.under .header .nav-pc a::after, .header.act .nav-pc a::after {
        border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
}
/* ハンバーガーメニューアイコン */
.menu-toggle {
  display: none;
  width: 28px;
  height: 20px;
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 2100;
}
.menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
  position: absolute;
  transition: 0.3s;
}
.menu-toggle.active span, .menu-toggle.active span {
  display: block;
  width: 100%;
  height: 2px;
  background: #1a1a1a !important;
  position: absolute;
  transition: 0.3s;
}
.act .menu-toggle span, .under .menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: #1a1a1a;
  position: absolute;
  transition: 0.3s;
}
.menu-toggle span:nth-child(1) {
  top: 0;
}
.menu-toggle span:nth-child(2) {
  top: 9px;
}
.menu-toggle span:nth-child(3) {
  top: 18px;
}
/* ハンバーガー開閉時 */
.menu-toggle.active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}
/* モバイルナビ本体 */
.nav-mobile {
  position: fixed;
  top: -120%;
  left: 0;
  width: 100%;
  height: 50vh;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px);
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-mobile.active {
  top: 0;
}
.nav-mobile-list {
  list-style: none;
  text-align: center;
}
.nav-mobile-list li {
  margin: 30px 0;
}
.nav-mobile-list a {
  font-size: 1.6rem;
  font-weight: 800;
  text-decoration: none;
  color: #fff;
  min-width: 200px;
  display: block;
  padding: 1rem 3rem;
  border-radius: 5px;
  background: linear-gradient(to top, #186db0, #2196F3);
}
/* メインコンテンツ */
.head_title {
  position: relative;
  height: 260px;
  box-shadow: inset 0 0 10px 0px rgba(0, 0, 0, .4);
}
#content h1.title {
  font-size: 5.8rem;
  font-weight: 700;
  text-align: center;
  margin: 0 auto;
  padding: 3rem 0;
  letter-spacing: .2rem;
  color: #ffffff;
  z-index: 1;
  filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.3));
  position: relative;
}
#content h1.title::before {
  content: attr(data-bg);
  font-size: 7rem;
  color: #f0f0f0;
  font-weight: 900;
  z-index: -1;
  white-space: nowrap;
  letter-spacing: 0.1em;
  position: absolute;
  opacity: 0.1;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Bebas Neue', sans-serif;
  display: none;
}
#content .head_title #particles-js {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -100;
  height: 260px !important;
  background: linear-gradient(to right, #4C6DB4 0%, #3EBDE0 100%);
}
/*パンくず*/
.breadcrumb-container {
  margin: 0 auto;
  max-width: 1084px;
}
.breadcrumb-minimal {
  display: flex;
  list-style: none;
  padding: 15px 0;
  font-size: 14px;
  font-family: 'Helvetica Neue', sans-serif;
}
.breadcrumb-minimal li + li::before {
  content: "/";
  margin: 0 15px;
  color: #ccc;
  font-weight: 300;
}
.breadcrumb-minimal a {
  text-decoration: none;
  color: #e5e5e5;
  transition: color 0.3s;
}
.breadcrumb-minimal a:hover {
  color: #fff;
}
.breadcrumb-minimal li[aria-current="page"] {
  color: #fff;
}
/* 画面サイズが1100px未満の場合の設定 */
@media (max-width: 1140px) {
  .header {
    padding: 0 2rem;
  }
  .breadcrumb-minimal {
    margin: 0 2rem;
  }
}
/* レスポンシブ (768px以上) */
@media (min-width: 768px) {
  .nav-mobile {
    display: none;
  }
  .not-pc {
    display: none;
  }
}
/* レスポンシブ (767px以下) */
@media (max-width: 767px) {
  .nav-pc {
    display: none;
  }
  .menu-toggle {
    display: block;
  }
  .not-sp {
    display: none;
  }
}
/* レスポンシブ (900px以下) */
@media (max-width: 900px) {
  .header {
    padding: 0 2rem 0 1rem;
  }
  .breadcrumb-minimal {
    padding: 1rem 0;
    white-space: nowrap;
  }
  .breadcrumb-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
/* レスポンシブ (767px以下) */
@media (max-width: 767px) {
  .breadcrumb-minimal {
    display: none;
  }
  .head_title {
    height: 100px;
  }
  #content .head_title {
    min-height: 100px;
  }
  #content .head_title #particles-js {
    height: 100px !important;
  }
  /* メインコンテンツ */
  #content h1.title {
    font-size: 3rem;
    line-height: 110%;
    padding: 3rem 0 4rem;
  }
  #content h1.title.two_line {
    font-size: 2.6rem;
    padding: 2rem 0 2rem !important;
  }
  .header {
    padding: 0 2rem 0 1rem;
    height: 50px;
  }
  .suken-logo img {
    width: 80px;
    height: auto;
  }
  .ainavi-logo img {
    width: 24px;
    height: auto;
  }
  #back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
  }
  .footer-links {
    display: none;
  }
}