@charset "UTF-8";
/* ベーススタイル */
html {
  font-size: 16px;
  overflow-x: hidden;
  width: 100%;
}

body {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  overflow-x: hidden;
  width: 100%;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 15px;
}

@media (max-width: 768px) {
  .container {
    max-width: 100%;
  }
}
br.br_pc {
  display: block;
}
@media (max-width: 768px) {
  br.br_pc {
    display: none;
  }
}

/* 一段目のスタイル */
header {
  position: relative;
}

.header-top {
  background-color: #fff;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: left;
  padding: 0 20px;
  z-index: 5;
  /* 他の要素より前面に表示 */
}
.header-top .container {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding: 0 20px;
}

@media (max-width: 768px) {
  .header-top {
    width: 98%;
    margin: 0 auto;
    padding: 0px;
  }
}
@media (max-width: 768px) {
  .header-top .container {
    width: 100%;
    padding: 0px;
  }
}
.university-logo {
  height: 40px;
}

/* 二段目のスタイル */
#header-nav {
  box-sizing: border-box;
  background-color: #013148;
  color: white;
  z-index: 10;
  /* 前面に表示するための調整 */
  width: 100%;
  transition: all 0.3s ease;
  /* スムーズな移行 */
}

.fixed {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  /* 軽い影を追加 */
}

#header-nav .container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100px;
}

.course-logo {
  height: 60px;
}

@media (max-width: 768px) {
  #header-nav {
    width: 100%;
    padding: 0px;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .fixed {
    position: fixed;
    width: 100%;
  }

  #header-nav .container {
    padding: 0 10px;
    margin: 0px;
    max-width: 100%;
    height: 80px;
  }

  .course-logo {
    height: 50px;
  }
}
.nav-menu {
  display: flex;
  gap: 20px;
  align-items: center;
}
.nav-menu a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
  padding: 0 5px;
}
.nav-menu a:hover {
  border-bottom: 1px solid #fff;
  padding-bottom: 2px;
  /* 下線と文字の間隔を調整 */
}

a.contact-button {
  background: -webkit-linear-gradient(left, #fa8d22, #fa6611 50%, #f83600);
  background: -o-linear-gradient(left, #fa8d22, #fa6611 50%, #f83600);
  background: linear-gradient(to right, #fa8d22, #fa6611 50%, #f83600);
  padding: 10px 40px;
  border-radius: 10px;
  color: white;
  text-decoration: none;
  font-weight: bold;
}
a.contact-button:hover {
  background: linear-gradient(to right, #f83600, #fa6611 50%, #fa8d22);
  /* ホバー時にグラデーション反転 */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  border-bottom: none;
  padding-bottom: 10px;
}

/* ハンバーガーメニュー */
.hamburger-menu {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  cursor: pointer;
}
.hamburger-menu span {
  display: block;
  width: 30px;
  height: 4px;
  background-color: white;
  margin: 5px 0;
}

/* モバイルナビゲーション */
.mobile-nav {
  display: none;
  flex-direction: column;
  background-color: #013148;
  position: absolute;
  top: 80px;
  left: 0;
  right: 0;
  padding: 20px;
  z-index: 999;
}
.mobile-nav a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  padding: 20px 0;
  border-bottom: 1px solid gray;
}
.mobile-nav a:last-child {
  border-bottom: none;
}

/* メニューボタンをクリックした時に表示する */
input#menu-toggle {
  display: none;
}
input#menu-toggle:checked ~ .mobile-nav {
  display: flex;
}

/* モバイル表示用 */
@media (max-width: 768px) {
  .nav-menu {
    display: none;
  }

  .hamburger-menu {
    display: flex;
  }
}
/* */
/*　共通のセクション*/
/* */
section {
  scroll-margin-top: 60px;
  /* ナビゲーションの高さと同じ値を設定 */
  padding: 100px 0;
}
section.main-visual {
  width: 100%;
  height: auto;
  /* 高さは背景画像の比率に依存 */
  background-image: url("../images/main_bg.png");
  /* 背景画像 */
  background-repeat: repeat-x;
  padding: 0;
  /* 上下の余白 */
  position: relative;
}

@media (max-width: 768px) {
  section {
    padding: 70px 0;
  }
}
/*  */
/* メインビジュアルセクション */
/*  */
/* コンテンツエリア */
.main-visual .content {
  background-image: url("../images/main.png");
  background-repeat: no-repeat;
  max-width: 1100px;
  overflow: hidden;
  margin: 0 auto;
  padding: 0 20px;
  text-align: left;
  color: black;
  position: relative;
  z-index: 1;
  background-position-x: 130%;
  background-position-y: -20%;
}
.main-visual .main-title {
  font-size: 4.5rem;
  font-family: "ヒラギノ明朝 Pro", serif;
  color: #16418a;
  margin: 4.375rem 0;
  line-height: 1.2;
  font-style: italic;
}
.main-visual .lead-text {
  font-size: 1.4rem;
  font-family: "ヒラギノ明朝 Pro", serif;
  line-height: 3rem;
  margin: 0 0 4.375rem;
}

/* 大見出し */
/* リード文 */
/* 画面幅が768px以下（タブレット・スマートフォン向け） */
@media (max-width: 768px) {
  .main-visual .content {
    padding: 0 20px;
    max-width: 100%;
    background-position-x: 220%;
    background-position-y: -20%;
    background-size: 80%;
  }
  .main-visual .main-title {
    font-size: 3rem;
    margin: 50px 0;
    line-height: 1.3;
  }
  .main-visual .main-title span {
    display: none;
  }
  .main-visual .lead-text {
    font-size: 1.25rem;
    line-height: 2.25rem;
    margin-bottom: 3.2rem;
  }
}
/* 画面幅が480px以下（スマートフォン向け） */
@media (max-width: 480px) {
  .main-visual .content {
    padding: 0 20px;
    background-position-x: -100%;
    background-position-y: -30%;
    background-size: 120%;
  }
  .main-visual .main-title {
    font-size: 2.25rem;
    margin: 2.5rem 0;
  }
  .main-visual .lead-text {
    font-size: 1.12rem;
    line-height: 1.9rem;
    margin-bottom: 2.5rem;
  }
  .main-visual .content {
    max-width: 100%;
    padding: 0 10px;
  }
}
/* */
/* キャプションボックス*/
/* */
.caption-box {
  border: 1px solid #ff3333;
  padding: 10px 15px;
  margin: 15px auto;
  width: 90%;
  border-radius: 8px;
  max-width: 880px;
}
.caption-box p {
  text-align: center;
  line-height: 1.8rem;
  color: #ff3333;
  margin: 0px;
  padding: 0px;
}

/*  */
/* #overview セクション */
/*  */
section#overview {
  background-color: white;
  /*　*/
  /*Facebookエリア*/
  /*　*/
}
section#overview div.pamphlet {
  display: flex;
  justify-content: space-between;
  flex-flow: row-reverse;
  margin-bottom: 30px;
}
section#overview div.pamphlet .pamphlet_img {
  width: 25%;
}
section#overview div.pamphlet .pamphlet_img p {
  text-align: center;
  font-size: 0.8em;
  line-height: 1.6em;
}
section#overview div.pamphlet .pamphlet_img p img {
  width: 200px;
  margin: 0 auto 10px;
}
section#overview div.pamphlet .pamphlet_txt {
  width: 70%;
}
@media screen and (max-width: 768px) {
  section#overview div.pamphlet {
    flex-flow: column-reverse;
  }
  section#overview div.pamphlet .pamphlet_img {
    width: 100%;
  }
  section#overview div.pamphlet .pamphlet_txt {
    width: 100%;
  }
}
section#overview a {
  color: #333;
  display: block;
}
section#overview a dl.facebook-link {
  display: flex;
  align-items: center;
  width: 80%;
  margin: 0 auto 40px;
  color: #000;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
  text-decoration: none !important;
}
section#overview a dl.facebook-link dt {
  margin: 0 40px;
  padding: 0;
  flex-shrink: 0;
  /* アイコンが縮まないように */
}
section#overview a dl.facebook-link dt img {
  width: 60px;
  height: 60px;
}
section#overview a dl.facebook-link dd {
  margin: 0;
  padding: 0 0 0 15px;
  /* 左側にスペースを追加 */
  font-size: 0.94rem;
  line-height: 1.8;
}
@media (max-width: 480px) {
  section#overview a dl.facebook-link {
    width: calc(100% - 20px);
  }
  section#overview a dl.facebook-link dt {
    margin: 0 5px;
  }
}

#overview {
  /*  */
  /* スライドショー*/
  /* */
  /* スライド全体 */
  /* スライドの表示領域 */
  /* 各スライド */
  /* 画像 */
  /* YouTube動画 */
  /* 左右ボタン */
  /* 左ボタン */
  /* 右ボタン */
}
#overview .content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: left;
}
#overview h2 {
  font-size: 2.25rem;
  /* 36px相当 */
  color: black;
  font-family: 'Noto Sans JP', sans-serif;
  text-align: center;
  margin-bottom: 3.2rem;
}
#overview p {
  font-size: 1rem;
  letter-spacing: 0.05em;
  line-height: 1.8;
  color: black;
  font-family: 'Noto Sans JP', sans-serif;
  margin-bottom: 2.5rem;
}
#overview .video-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /* 16:9比率の動画用 */
  overflow: hidden;
  margin: 0 auto;
}
#overview .video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
#overview .slide-wrapper {
  position: relative;
}
#overview .slideshow-container {
  width: 100%;
  max-width: 1100px;
  margin: auto;
  overflow: hidden;
  /* スライド領域外を非表示 */
}
#overview .slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
}
#overview .slide {
  min-width: 100%;
  /* 各スライドが全幅を取る */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
#overview .slide img {
  width: 100%;
  height: auto;
  display: block;
}
#overview .slide p.slide-caption {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 14px;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
  background: transparent;
  padding: 5px 10px;
  margin: 0px;
}
#overview .slide p.slide-caption-box {
  position: absolute;
  top: 10px;
  right: 10px;
  max-width: 40%;
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 14px;
  margin: 0px;
}
#overview .slide p.slide-caption-box a {
  color: #fff;
  text-decoration: underline;
}
#overview .slide iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  /* 16:9の比率を保持 */
  border: none;
}
#overview .prev, #overview .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 100px;
  background-color: #013148;
  color: white;
  text-align: center;
  line-height: 100px;
  font-size: 30px;
  font-weight: bold;
  cursor: pointer;
  z-index: 4;
}
#overview .prev {
  left: -25px;
  /* ボタンの半分をスライド領域外に出す */
}
#overview .next {
  right: -25px;
  /* ボタンの半分をスライド領域外に出す */
}

/* YouTube動画をレスポンシブに対応 */
@media (max-width: 480px) {
  #overview h2 {
    font-size: 1.7rem;
    /* フォントサイズ */
  }
  #overview p {
    font-size: 1rem;
  }
}
/*  */
/* セクション共通 */
/*  */
/* 見出し */
.section-heading {
  color: #013148;
  font-size: 3rem;
  /* 48px */
  font-family: "Noto Sans", sans-serif;
  margin: 0 auto 70px;
  text-align: left;
  width: 1000px;
}
.section-heading span {
  font-size: 1.1rem;
}

@media (max-width: 768px) {
  .section-heading {
    font-size: 2rem;
    /* 48px */
    margin: 0 auto 50px;
    text-align: center;
    width: 100%;
  }
}
/*  */
/* #outlien セクション */
/*  */
/* セクション全体 */
#outline {
  background-image: url("../images/outline_bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
}

/* DL, DT, DD スタイル */
dl.outline {
  display: flex;
  flex-wrap: wrap;
  width: 1000px;
  margin: 0 auto;
  box-sizing: border-box;
}
dl.outline dt, dl.outline dd {
  box-sizing: border-box;
}
dl.outline dt {
  font-family: "Noto Sans", sans-serif;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  width: calc(30% - 20px);
  padding: 20px 40px;
  background-color: #48878c;
  margin-right: 20px;
  margin-bottom: 10px;
}
dl.outline dt span {
  font-size: 0.875rem;
}
dl.outline dt:last-of-type {
  border: none;
}
dl.outline dd {
  width: 70%;
  margin-left: 0;
  padding: 20px;
  background-color: #fff;
  margin-bottom: 10px;
  line-height: 2rem;
}
dl.outline dd:last-of-type {
  border: none;
}
dl.outline dd span {
  font-size: 0.875rem;
  /* 小さめの文字 */
  color: gray;
  line-height: 1.2rem;
  display: inline-block;
}
dl.outline dd a {
  color: #0088dd;
  text-decoration: none;
}
dl.outline dd a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  dl.outline {
    flex-flow: column;
    flex-wrap: wrap;
    width: 100%;
  }
  dl.outline dt, dl.outline dd {
    width: 100%;
  }
}
.cta-button {
  display: block;
  margin: 80px auto 0;
  /* 上に80pxの余白、中央揃え */
  padding: 20px 0;
  /* ボタンの高さ調整 */
  width: 430px;
  vertical-align: middle;
  text-align: center;
  font-weight: 600;
  color: white;
  font-size: 1.75rem;
  /* 20px */
  background: -webkit-linear-gradient(left, #fa8d22, #fa6611 50%, #f83600);
  background: -o-linear-gradient(left, #fa8d22, #fa6611 50%, #f83600);
  background: linear-gradient(to right, #fa8d22, #fa6611 50%, #f83600);
  border-radius: 10px;
  /* 角丸 */
  text-decoration: none;
  transition: all 0.3s ease;
}
.cta-button:hover {
  background: -webkit-linear-gradient(left, #f83600, #fa6611 50%, #fa8d22);
  background: -o-linear-gradient(left, #f83600, #fa6611 50%, #fa8d22);
  background: linear-gradient(to right, #f83600, #fa6611 50%, #fa8d22);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
  /* 軽いシャドウ */
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .cta-button {
    width: 90%;
    /* スマホ時90%幅 */
  }
}
/*　*/
/*　受講方法　*/
/*　*/
#how-to-apply {
  background-color: #eeeeee;
  /* グレー背景 */
}
#how-to-apply p.lead {
  max-width: 1000px;
  font-weight: 600;
  margin: 1rem auto 2rem;
}
#how-to-apply p.lead strong {
  border-bottom: 1px solid #333;
}
@media screen and (max-width: 768px) {
  #how-to-apply {
    width: calc(100% - 2rem);
    padding: 70px 1rem;
  }
}

.accordion {
  max-width: 1000px;
  margin: 0 auto 70px;
  /* タブとコンテンツの間に余白 */
}

.accordion-box {
  margin-bottom: 5px;
}

.accordion button {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  padding: 1.25rem 4rem;
  align-items: anchor-center;
  color: #000;
  font-size: 1.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 10px 0 0;
  text-align: left;
  border-top: 2px solid transparent;
  border-right: 2px solid transparent;
  border-bottom: 2px solid transparent;
  border-left: 2px solid transparent;
}
.accordion button img {
  width: 54px;
  height: auto;
  margin-right: 1rem;
}
.accordion button span {
  font-size: 1.2rem;
}
.accordion button br.br_sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .accordion button {
    display: block;
    font-size: 1.3rem;
    padding: 1rem 1rem;
  }
  .accordion button br.br_sp {
    display: block;
  }
  .accordion button img {
    float: left;
  }
}

.accordion-content {
  display: none;
  padding: 15px;
}

.accordion-content.active {
  display: block;
}

/* 各タブのデフォルト背景色と枠線 */
.accordion-btn[data-tab="tab0"] {
  background-color: #ffcdd2;
  /* 淡い赤（ピンク系） */
  border-color: #e57373;
  /* 赤の濃いめ */
}

.accordion-btn[data-tab="tab1"] {
  background-color: #c8e6c9;
  /* 淡い緑 */
  border-color: #81c784;
  /* 緑の濃いめ */
}

.accordion-btn[data-tab="tab2"] {
  background-color: #bbdefb;
  /* 淡い青 */
  border-color: #64b5f6;
  /* 青の濃いめ */
}

.accordion-btn[data-tab="tab3"] {
  background-color: #ffe0b2;
  /* 淡いオレンジ */
  border-color: #ffb74d;
  /* オレンジの濃いめ */
  margin-right: 0px;
  /* タブ間の隙間 */
}

/* アクティブなタブのスタイル */
.accordion-content {
  border-bottom-color: transparent;
  /* アクティブ時に一体化させるため透明化 */
  box-shadow: 0 0px 5px rgba(0, 0, 0, 0.1);
  /* 軽い影を追加 */
}

/* 共通のスタイル */
.accordion-content h3 {
  text-align: center;
  font-size: 1.3125rem;
  margin-bottom: 2.5rem;
}

/* タブ0のスタイル */
.accordion-content.tab0 {
  background-color: #ffcdd2;
  /* 淡い赤 */
  border-right: 2px solid #e57373;
  border-bottom: 2px solid #e57373;
  border-left: 2px solid #e57373;
  border-top: none;
  /* 赤の濃いめ */
}
.accordion-content.tab0 h3 {
  color: #d32f2f;
}

/* タブ1のスタイル */
.accordion-content.tab1 {
  background-color: #c8e6c9;
  /* 淡い緑 */
  border-right: 2px solid #81c784;
  border-bottom: 2px solid #81c784;
  border-left: 2px solid #81c784;
  border-top: none;
  /* 緑の濃いめ */
}
.accordion-content.tab1 h3 {
  color: #388e3c;
}

/* タブ2のスタイル */
.accordion-content.tab2 {
  background-color: #bbdefb;
  /* 淡い青 */
  border-right: 2px solid #64b5f6;
  border-bottom: 2px solid #64b5f6;
  border-left: 2px solid #64b5f6;
  border-top: none;
  /* 青の濃いめ */
}
.accordion-content.tab2 h3 {
  color: #2196f3;
}

/* タブ3のスタイル */
.accordion-content.tab3 {
  background-color: #ffe0b2;
  /* 淡いオレンジ */
  border-right: 2px solid #ffb74d;
  border-bottom: 2px solid #ffb74d;
  border-left: 2px solid #ffb74d;
  border-top: none;
  /* オレンジの濃いめ */
}
.accordion-content.tab3 h3 {
  color: #f57c00;
}

/* タブ1のコンテンツ全体のレイアウト */
.tab-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

/* 左側のコンテンツ */
.tab-left {
  width: 70%;
}

/* リード文 */
p.lead {
  font-size: 1rem;
  /* 16px */
  margin-bottom: 30px;
  line-height: 1.8;
}
p.caption {
  font-size: 0.9rem;
  line-height: 1.8;
  margin-bottom: 1rem;
}

/* 情報枠 */
.info-box {
  background-color: rgba(255, 255, 255, 0.5);
  /* 背景白＋50%透明 */
  border-radius: 10px;
  padding: 20px;
}

/* 情報テーブル */
.info-table div {
  display: flex;
  margin: 0 0 10px;
  /* 各行の間隔 */
  line-height: 1.6rem;
}
.info-table dt {
  flex: 0 0 120px;
  /* 1列目の幅固定 */
  align-items: center;
  vertical-align: middle;
  margin: 0 20px 0 0;
  padding: 5px 15px;
}
.info-table dt strong {
  display: inline-block;
  background-color: #81c784;
  /* タブ1の濃い緑色 */
  color: #000;
  padding: 5px 10px;
  font-weight: 500;
  border-radius: 10px;
  width: 100%;
  text-align: center;
}
.info-table dd {
  flex: 1;
  /* 残りの幅を占める */
  margin: 0 0 10px;
  padding: 10px 0;
  color: #000;
}
.info-table dt span, .info-table dd span {
  font-size: 0.825rem;
}

/* 右側の画像 */
.tab-right {
  width: 25%;
  text-align: center;
  /* 画像を中央揃え */
}
.tab-right img {
  max-width: 100%;
  /* 親要素の幅に収まるように調整 */
  border-radius: 10px;
  /* 画像の角丸 */
}

/* タブ0（赤系） */
.accordion-content.tab0 .info-table dt strong {
  background-color: #e57373;
  /* タブ1の濃い緑色 */
}

/* タブ1（グリーン） */
.accordion-content.tab1 .info-table dt strong {
  background-color: #81c784;
  /* タブ1の濃い緑色 */
}

/* タブ2（ブルー） */
.accordion-content.tab2 .info-table dt strong {
  background-color: #64b5f6;
  /* タブ2の淡い青色 */
}

/* タブ3（オレンジ） */
.accordion-content.tab3 .tab-inner .info-box {
  width: 48%;
}
.accordion-content.tab3 .tab-inner .info-box h4 {
  text-align: center;
  margin-bottom: 15px;
  font-size: 1rem;
}
.accordion-content.tab3 .tab-inner .info-box p {
  font-size: 0.94rem;
  line-height: 1.8rem;
}
.accordion-content.tab3 .tab-inner .bg1 {
  background-color: rgba(255, 255, 255, 0.7);
  /* 背景白＋50%透明 */
}
.accordion-content.tab3 .tab-inner .bg2 {
  background-color: rgba(255, 255, 255, 0.4);
  /* 背景白＋50%透明 */
}
.accordion-content.tab3 .info-table dt {
  padding: 5px 15px 5px 0;
}
.accordion-content.tab3 .info-table dt strong {
  background-color: #ffb74d;
  /* タブ3の淡いオレンジ色 */
}
.accordion-content.tab3 .how_to_caption {
  margin: 20px auto 0;
  width: 100%;
  border-radius: 10px;
}
.accordion-content.tab3 .how_to_caption p {
  font-size: 0.85rem;
  line-height: 1.8;
  margin: 0px;
  padding: 0px;
}

@media (max-width: 768px) {
  .accordion-content {
    padding: 1.25rem;
  }
  .accordion-content h3 {
    font-size: 1.1rem;
    margin-bottom: 1.8rem;
  }

  .tab-left {
    width: 100%;
  }

  .tab-right {
    display: none;
  }

  .info-box {
    padding: 15px;
  }

  .info-table div {
    flex-flow: column;
  }
  .info-table dt {
    flex: none;
    /* 1列目の幅固定 */
    text-align: center;
    margin-right: 0px;
    padding: 0px;
  }

  .accordion-content.tab3 .tab-inner {
    flex-flow: column;
  }
  .accordion-content.tab3 .tab-inner .info-box {
    width: calc(100% - 30px);
  }

  .info-table dt strong {
    max-width: 100%;
    padding: 5px 0;
  }
  .info-table dd {
    flex: none;
    /* 残りの幅を占める */
    margin: 0 0 10px 10px;
  }

  #tab3 .tab-inner .info-box {
    width: 100%;
    box-sizing: border-box;
  }
  #tab3 .tab-inner .info-box h4 {
    text-align: center;
    margin-bottom: 10px;
  }
}
.how_to_caption {
  padding: 25px;
  max-width: 1000px;
  margin: 0 auto;
  background: #fff;
  box-sizing: border-box;
}
.how_to_caption h5 {
  font-size: 1rem;
  margin: 0px;
  padding: 5px 0;
}
.how_to_caption p {
  font-size: 0.94rem;
  line-height: 1.8rem;
  margin: 0px;
  padding: 0px;
}

/* */
/* スケジュール　*/
/* */
/* 全体のスタイル */
#schedule {
  /* 左側の写真 */
  /* 右側の内容 */
  /* 日時 */
  /* タイトル */
  /* スピーカー情報 */
  /* 左側（肩書・名前） */
  /* 共通スタイル */
  /* スマートフォン用スタイル */
}
@media screen and (max-width: 768px) {
  #schedule {
    width: calc(100% - 2rem);
    padding: 70px 1rem;
  }
}
#schedule .speakers {
  max-width: 1000px;
  margin: 0 auto 50px;
  padding: 0px;
  border: 1px solid #000;
  display: flex;
  gap: 20px;
}
#schedule .speaker-wrapper {
  display: flex;
  margin: 0px;
  padding: 0px;
}
#schedule .speaker-photo {
  width: 250px;
  height: auto;
}
#schedule .speaker-photo img {
  width: 100%;
  display: block;
}
#schedule .speaker-photo p {
  font-size: 0.74rem;
  margin: 4px 0;
  text-align: right;
}
#schedule .speaker-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 750px;
}
@media screen and (max-width: 768px) {
  #schedule .speaker-content {
    width: 70%;
  }
}
#schedule .date-wrapper {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  #schedule .date-wrapper {
    flex-flow: column;
  }
}
#schedule .session-date {
  background-color: #013148;
  color: #fff;
  font-weight: bold;
  font-size: 1.3125rem;
  /* 21px */
  display: inline-block;
  padding: 10px;
  margin: 0;
  text-align: center;
  width: 280px;
  line-height: 1.5;
}
#schedule .session-date span {
  font-size: 2.25rem;
  /* 36px */
}
#schedule .session-title {
  margin: 20px 0;
  font-size: 2.25rem;
  color: #000;
  line-height: 1.2;
  padding: 0 20px;
}
#schedule .session-title span {
  font-size: 1.4rem;
}
#schedule .session-title2 {
  margin: 20px 0;
  font-size: 2rem;
  color: #000;
  line-height: 1.2;
  padding: 0 20px;
}
#schedule .session-title2 span {
  font-size: 1.8rem;
}
#schedule .speaker-info {
  display: flex;
  flex-flow: column;
  gap: 5px;
  margin-bottom: 10px;
}
#schedule .speaker-details {
  display: flex;
  flex-flow: row;
  align-items: baseline;
  margin: 0 0 15px;
  padding: 0 0 0 20px;
}
#schedule .speaker-role {
  font-size: 0.875rem;
  margin: 0;
  padding: 0;
}
#schedule .speaker-name {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0 15px 0 0;
  padding: 0;
  letter-spacing: 0.1em;
}
#schedule .btn_movie {
  text-align: center;
  margin: 10px auto 15px;
  width: 50%;
}
#schedule .btn_movie a {
  display: flex;
  justify-content: center;
  align-items: anchor-center;
  width: 100%;
  font-size: 1.1rem;
  line-height: 1.4em;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  color: #FFFFFF;
  font-weight: 600;
  padding: 10px 10px;
  background-color: #ff8c00;
  border: solid #ff8c00 1px;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}
#schedule .btn_movie a img {
  width: 44px;
  height: 30px;
  margin-right: 20px;
}
@media (max-width: 768px) {
  #schedule {
    /* 右側の内容 */
    /* 日時 */
    /* スピーカー情報 */
    /* タイトル */
    /* 左側（肩書・名	前） */
  }
  #schedule .btn_movie {
    width: 90%;
  }
  #schedule .btn_movie a {
    font-size: 0.9rem;
  }
  #schedule .speakers {
    max-width: 98%;
    margin: 0 auto 20px;
  }
  #schedule .speaker-wrapper {
    flex-flow: column;
  }
  #schedule .speaker-photo {
    width: 70%;
    margin: 5px auto;
    display: block;
  }
  #schedule .speaker-photo img {
    max-width: 100%;
    max-height: fit-content;
    object-fit: contain;
    /* アスペクト比を保ちながら画像全体が見えるように調整 */
  }
  #schedule .speaker-content {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  #schedule .session-date {
    font-size: 1.1rem;
    padding: 5px 0;
    margin: 0;
    text-align: center;
    width: 100%;
    line-height: 1.5;
  }
  #schedule .speaker-info {
    display: flex;
    flex-flow: column;
    gap: 5px;
    margin-bottom: 10px;
  }
  #schedule .session-title {
    margin: 5px 0;
    font-size: 1.5rem;
    padding: 5px 10px;
    line-height: 1.4em;
  }
  #schedule .session-title span {
    display: block;
    font-size: 1rem;
    line-height: 1.4em;
  }
  #schedule .session-date span {
    font-size: 1.8rem;
  }
  #schedule .session-title2 {
    margin: 5px 0;
    font-size: 1.3rem;
    padding: 5px 10px;
    line-height: 1.4em;
  }
  #schedule .session-title2 span {
    font-size: 1rem;
  }
  #schedule .session-date span {
    font-size: 1.8rem;
  }
  #schedule .speaker-details {
    flex-flow: column;
    width: 100%;
    margin: 0 0 5px;
    padding: 0;
  }
  #schedule .speaker-role {
    margin: 5px 0;
    padding: 0 10px;
  }
  #schedule .speaker-name {
    margin: 5px 0;
    padding: 0 10px;
    font-size: 1.05rem;
  }
  #schedule .btn_movie {
    width: 80%;
  }
  #schedule .btn_movie a {
    width: 90%;
  }
}
#schedule .speaker-profile {
  flex: 1;
  background-color: #EFEFEF;
  padding: 10px 20px 10px;
  margin: 0 20px 0px 20px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  max-height: 1rem;
  cursor: pointer;
  transition: max-height 0.3s ease-in-out;
}
#schedule .speaker-profile.expanded {
  max-height: 1000px;
}
#schedule .profile-title {
  font-weight: bold;
  font-size: 0.75rem;
  line-height: 1rem;
  margin: 0 0 0.5rem;
  padding: 0px;
}
#schedule .profile-text {
  font-size: 0.75rem;
  line-height: 1.5;
  margin: 0px;
  padding: 0px;
}
#schedule span.sp {
  display: none;
}
@media (max-width: 768px) {
  #schedule .speaker-profile {
    margin: 0 10px 0px 10px;
    width: calc(100% - 40px);
    padding: 0.5rem 10px;
    max-height: 2rem;
    cursor: pointer;
  }
  #schedule .speaker-profile.expanded {
    max-height: 1000px;
    /* 全文表示時に十分な高さを設定 */
  }
  #schedule .profile-title {
    line-height: 1rem;
    margin: 0.5rem 0 1rem;
  }
  #schedule .profile-text {
    margin-bottom: 1rem;
  }
  #schedule span.sp {
    display: inline-block;
  }
}

/*　*/
/*これまでのリレー講座*/
/*　*/
/* 背景グラデーション */
#past-courses {
  background: linear-gradient(to bottom, #d0dbe6, #e7eaf1, #e4e8ef);
}
#past-courses .container {
  margin: 0 auto;
  padding: 0px;
  max-width: 1000px;
}

ul.year-section {
  list-style: none;
  margin: 0px;
  width: 100%;
  max-width: 1000px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  padding-inline-start: 0px;
}

/* 年度ボックス */
li.year-box {
  background: #fff;
  border-radius: 10px;
  width: calc(25% - 35px);
  /* 4列配置用 */
  padding: 10px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease-in-out;
}
li.year-box:hover {
  transform: translateY(-5px);
}

/* 年度タイトル */
.year-title {
  font-size: 1.25rem;
  /* 20px */
  font-weight: bold;
  margin-bottom: 15px;
}

/* 前期・後期リンク */
.semester-links {
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.semester-box {
  display: block;
  width: 45%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-align: center;
  font-size: 0.875rem;
  /* 14px */
  text-decoration: none;
  transition: all 0.3s ease;
  color: #333;
  border-color: #333;
}
.semester-box:hover {
  background: #333;
  color: #fff;
}

/* スマートフォン用スタイル */
@media (max-width: 768px) {
  #past-courses .container {
    width: 98%;
    margin: 0 auto;
  }

  ul.year-section {
    gap: 10px;
  }

  li.year-box {
    width: calc(50% - 25px);
    /* 2列配置用 */
  }
}
/* 最終行を左寄せにするスタイル */
.year-section::after {
  content: '';
  flex: auto;
  /* 空のフレックス要素で調整 */
}

/* 最終行用スタイル */
.year-box:nth-last-child(-n+4):nth-child(n+5) {
  justify-content: flex-start;
}

section#footer {
  background-color: #666666;
  padding: 70px 0;
  color: #fff;
}
section#footer .container {
  max-width: 1000px;
  margin: 0 auto;
}
section#footer h3 {
  font-weight: 400;
  font-size: 2rem;
  margin: 0 0 24px;
}
section#footer h4 {
  font-size: 1rem;
  font-weight: 600;
}
section#footer p {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
section#footer p span {
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  section#footer {
    padding: 50px 0;
  }
  section#footer .container {
    max-width: 98%;
  }
  section#footer h3 {
    font-size: 1.6rem;
  }
  section#footer h4, section#footer p {
    font-size: 0.9rem;
  }
}
.credit {
  background-color: #013148;
  text-align: center;
  padding: 15px 0;
  font-size: 0.9rem;
  color: #fff;
  margin: 0px;
  font-weight: 400;
}

/**/
/*　フローティングバナー*/
/**/
.floating-banner {
  position: fixed;
  bottom: 40px;
  right: 20px;
  width: 260px;
  padding: 15px;
  background-color: #ff8c00;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  color: #fff;
  text-align: center;
  z-index: 1000;
}
.floating-banner a {
  color: #fff;
}
.floating-banner a:hover {
  background-color: #e07a00;
  transition: background-color 0.3s;
  border-bottom: 1px solid #fff;
  padding-bottom: 2px;
  /* 下線と文字の間隔を調整 */
}
.floating-banner p {
  margin: 0;
  padding: 5px 0;
  font-size: 1.1rem;
}
.floating-banner p span {
  font-size: 0.9rem;
}
@media (max-width: 768px) {
  .floating-banner {
    width: 160px;
    padding: 10px;
  }
  .floating-banner p span {
    font-size: 0.8rem;
  }
}

a:-webkit-any-link {
  cursor: pointer;
  text-decoration: none;
}