@charset "utf-8";
@import url("bootstrap.min.css");

#top-h1 {
  text-align: center;
  padding: 10px 0;
}

h1 {
  font-size: calc(2.375rem + 1.5vw);
  color: #3581C4;
  letter-spacing: -0.1em;
  margin: 0 !important;

  /* 影 */
  text-shadow: 3px 2px 3px rgba(0, 0, 0, 0.8);

  /* 背景を文字サイズだけにする */
  display: inline-block;
  padding: 2px 8px 2px 0px;
  line-height: 1.0;

  /* 文字の周囲だけ白くぼかす */
  background: rgba(255, 255, 255, 0.40);
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.8),
    0 0 25px rgba(255, 255, 255, 0.5);
  border-radius: 12px;
}

.h1-fukudai {
  color: #FFF100;
  font-weight: 700;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

@media (min-width: 576px) {
  h1 {
    font-size: 3.5rem;
  }
}

@media (min-width: 768px) {
  h1 {
    font-size: 4rem;
  }
}

.badge-p {
  min-width: 5em;
  background-color: #E75F9A !important;
}



/*特別企画のオレンジ枠*/
.badge-orange {
  color: #FFF !important;
  font-weight: 700 !important;
  background-color: #F29F3B !important;
  border: 2px solid #fff !important;

}

.badge-new {
  color: #000 !important;
  font-weight: 400 !important;
  background-color: #FFFF00 !important;
  border: 1px solid #000 !important;

}
.btn-blue {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0E68B3;
  --bs-btn-border-color: #0E68B3;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0a4f8a;
  --bs-btn-hover-border-color: #0a4f8a;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0a4f8a;
  --bs-btn-active-border-color: #0a4f8a;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0d6efd;
  --bs-btn-disabled-border-color: #0d6efd;
    font-weight: 500 !important;
  /* アニメーション */
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    background-color 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.btn.btn-blue:hover {
  background-color: #0a4f8a !important;
  border-color: #0a4f8a !important;
  color: #ffffff !important;
  opacity: 1 !important;
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(10, 79, 138, 0.3);
}

/* ==========================
   カード共通

.lecture-list {
  gap: 1rem;
}

.lecture-card {
  text-align: center;
  border-width: 2px;
  border-style: solid;
  border-radius: 1rem !important;

  padding: 1.5rem;

  transition:
    background-color .25s ease,
    border-color .25s ease,
    transform .25s ease,
    box-shadow .25s ease;

  overflow: hidden;
}

========================== */
/* ==========================
   背景色

.bg-orange {
  background-color: #FEF6EC;
  border-color: #F3D7AF;
}

.bg-orange:hover {
  background-color: #F9EDD9;
  border-color: #E7BD7A;
}

.bg-green {
  background-color: #DCEBC6;
  border-color: #BFD7A0;
}

.bg-green:hover {
  background-color: #CEE0B4;
  border-color: #9DBE74;
}

.bg-blue {
  background-color: #E5F2FB;
  border-color: #BFDDF3;
}

.bg-blue:hover {
  background-color: #D5E9F8;
  border-color: #90C4E8;
}

/* カードホバー */
/*
.lecture-card:hover {
  transform: translateY(-4px);

  box-shadow:
    0 .5rem 1rem rgba(0, 0, 0, .15);
}
*/

========================== */
/* ==========================
   画像

.lecture-image {
  width: 100%;
  max-width: 900px;

  height: auto;

  display: block;

  margin: 0 auto 1.25rem;
}

========================== */
/* ==========================
   ボタン配置

.btn-area {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
}

========================== */
/* ==========================
   ボタン共通

.btn-video,
.btn-pdf,
.btn-special {
  background: #0E68B3;
  border-color: #0E68B3;
  color: #fff;

  min-width: 220px;

  font-weight: 600;

  transition:
    background-color .2s ease,
    border-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

.btn-video:hover,
.btn-pdf:hover,
.btn-special:hover {
  background: #0B5695;
  border-color: #0B5695;
  color: #fff;

  transform: translateY(-2px);

  box-shadow:
    0 .25rem .75rem rgba(14, 104, 179, .25);
}
========================== */

/* ==========================
   パターン2
   カードホバー時のみ
   動画ボタンも濃く
========================== */
/*
.card-video:hover .btn-video {
  background: #0B5695;
  border-color: #0B5695;
}

/* PDFボタンは独立 */
/*
.card-video:hover .btn-pdf {
  background: #0E68B3;
  border-color: #0E68B3;
}

.card-video:hover .btn-pdf:hover {
  background: #0B5695;
  border-color: #0B5695;
}

/* ==========================
   SP
========================== */

@media (max-width: 576px) {

  .btn-video,
  .btn-pdf,
  .btn-special {
    width: 100%;
    min-width: auto;
  }

}



/* -----------------------------------------------
   ベース（通常時）のスタイル設定
----------------------------------------------- */
.list-group .list-group-item.custom-lecture-item {
  /* Bootstrap 5.3の内部変数をすべて強制的に#FEF6ECで上書き */
  --bs-list-group-bg: #FEF6EC !important;	/*講演orange背景デフォルト*/
  --bs-list-group-action-hover-bg: #FDF0E1 !important;	/*講演orange背景ホバーやや濃い色*/
  --bs-list-group-action-active-bg: #FDF0E1 !important;

  /* 本体への背景色指定 */
  background-color: #FEF6EC !important;
  background: #FEF6EC !important;

  /* その他の装飾 */
  border-color: #f5e4cf !important;
  border-radius: 0 !important;
  cursor: pointer;

  /* アニメーション */
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    background-color 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.list-group .list-group-item.custom-lecture-item2 {
  /* Bootstrap 5.3の内部変数をすべて強制的に#DCEBC6で上書き */
  --bs-list-group-bg: #DCEBC6 !important;
  --bs-list-group-action-hover-bg: #DCEBC6 !important;
  --bs-list-group-action-active-bg: #C2D6A5 !important;

  /* 本体への背景色指定 */
  background-color: #DCEBC6 !important;
  background: #DCEBC6 !important;

  /* その他の装飾 */
  border-color: #C2D6A5 !important;
  border-radius: 0 !important;
  cursor: pointer;

  /* アニメーション */
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    background-color 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

/* 透過画像のアニメーション */
.list-group .list-group-item.custom-lecture-item img,
.list-group .list-group-item.custom-lecture-item2 img {
  transition: transform 0.3s ease;
}

/* タイトルの基本色（ダークブラウン） */
.list-group .list-group-item.custom-lecture-item h5 a,
.list-group .list-group-item.custom-lecture-item2 h5 a {
  color: #4a3c31 !important;
  transition: color 0.25s ease;
}


/* -----------------------------------------------
   ① リスト全体にホバーしたときのエフェクト
----------------------------------------------- */
.list-group .list-group-item.custom-lecture-item:hover {
  /* ホバー時は変数と背景色の両方を1ステップ濃い色に指定 */
  --bs-list-group-bg: #FDF0E1 !important;
  background-color: #FDF0E1 !important;

  border-color: #eecda3 !important;
  transform: translateY(-4px);
  box-shadow: 0 12px 20px rgba(220, 160, 90, 0.12);
}

/* ホバー時は変数と背景色の両方を1ステップ濃い色に指定 */
/*.list-group .list-group-item.custom-lecture-item2:hover {
  --bs-list-group-bg: #C2D6A5 !important;
  background-color: #C2D6A5 !important;

  border-color: #7C9A40 !important;
  transform: translateY(-4px);
  box-shadow: 0 12px 20px rgba(220, 160, 90, 0.12);
}
*/
/* 全体ホバー時に、画像が少しだけ上に持ち上がる */
.list-group .list-group-item.custom-lecture-item:hover img {
  transform: translateY(-2px) scale(1.02);
}

/* 全体ホバー時に、タイトルを少しだけ濃く */
.list-group .list-group-item.custom-lecture-item:hover h5 a {
  color: #2b1f16 !important;
}

.list-group .list-group-item.custom-lecture-item2:hover h5 a {
  color: #2b1f16 !important;
}


/* 全体ホバー時に、画像が少しだけ上に持ち上がる */
.list-group .list-group-item.custom-lecture-item:hover img {
  transform: translateY(-2px) scale(1.02);
}



/* -----------------------------------------------
   ② PDFボタンにホバーしたときのタイトル干渉リセット
----------------------------------------------- */
.list-group .list-group-item.custom-lecture-item:has(.btn:hover) h5 a {
  color: #4a3c31 !important;
}


/* -----------------------------------------------
   ③ PDFボタンの通常時とホバー時のスタイル
----------------------------------------------- */
/* 通常時：背景色「#0E68B3」、文字「白」 */
.list-group .list-group-item.custom-lecture-item .btn,
.list-group .list-group-item.custom-lecture-item2 .btn {
  background-color: #0E68B3 !important;
  color: #ffffff !important;
  border-color: #0E68B3 !important;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(14, 104, 179, 0.15);
  transition: all 0.2s ease;
}

/* 全体ホバー時：PDFボタンを上品に馴染ませる 
.list-group .list-group-item.custom-lecture-item:hover .btn {
  opacity: 0.95;
}
*/
/* PDFボタン単体にホバーしたとき */
.list-group .list-group-item.custom-lecture-item .btn:hover,
.list-group .list-group-item.custom-lecture-item2 .btn:hover {
  background-color: #0a4f8a !important;
  border-color: #0a4f8a !important;
  color: #ffffff !important;
  opacity: 1 !important;
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(10, 79, 138, 0.3);
}

.list-group .list-group-item.custom-lecture-item:hover h5 a small {
  color: #0E68B3;
  /* PDFボタンとお揃いの青色をアクセントにする例 */
  opacity: 1 !important;
}

.custom-btn-grid {
  display: flex;
  flex-direction: row;
  /* 基本は横並び */
  flex-wrap: wrap;
  /* 狭くなったら折り返す */
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* ボタン自体の共通設定 */
.custom-btn-grid .btn {
  flex: 0 1 auto;
  /* 必要以上に広がらないようにする */
  /* white-space: nowrap;
   ボタン内で文字が改行されるのを防ぐ */
}

/* スマホなど、画面が狭くなって2段に折り返した時の処理 */
@media (max-width: 580px) {
  .custom-btn-grid {
    /* 外枠を「文字が長い方のボタン」の幅に自動で合わせる */
    display: inline-flex;
    flex-direction: column;
    /* 確実に縦並び（2段）にする */
    align-items: stretch;
    /* 縦並びのとき、2つのボタンの横幅を同じに揃える */
    width: auto;
    /* 画面いっぱいに広がるのを防ぐ */
  }
}

.program {
  background-color: #F6F7F7;
  letter-spacing: 0.1em;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  font-weight: 700;
  border: 3px solid #BFC0C0;
  
}

/*文章を円にのせる 1行or2行	https://saruwakakun.com/html-css/basic/circle	*/
/*	開催日時 曜日*/
.circle1 {
  display: inline-block;
  width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
  background: #003475;
  text-align: center;
  line-height: 1.3em;
  color: #fff;
}

/* モバイル（画面が小さい時）のデフォルトスタイル */
.circle2 {
  position: relative;
  display: inline-block;
  width: 60px;
  /* 小さい時は60px */
  height: 60px;
  /* 小さい時は60px */
  border-radius: 50%;
  background: #F29F3A;
  box-shadow: 0 0 0 1px #FFF, 0 0 0 3px #F29F3A;
}

.circle2 span {
  position: absolute;
  display: inline-block;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 60px;
  /* 横幅に合わせて60px */
  text-align: center;
  color: #FFF;
  /* 直径60pxの丸に3文字を限界まで大きく収める調整 */
  font-size: 1rem;
  /* 16px相当まで拡大 */
  font-weight: bold;
  /* 太字にして視認性を確保 */
  letter-spacing: -1px;
  /* 枠線への衝突を防ぐため、わずかに文字間隔を縮小 */
  white-space: nowrap;
  /* 途中で改行されるのを防ぐ */
}

/* 画面幅が 576px (sm) 以上になったら元の大きさに戻す */
@media (min-width: 576px) {
  .circle2 {
    width: 80px;
    height: 80px;
  }

  .circle2 span {
    width: 80px;
    font-size: 1.25rem;
    /* 元の大きめのサイズ */
    letter-spacing: normal;
    /* 文字間隔を通常に戻す */
  }
}

ruby {
  ruby-position: over;
  /* 上側に配置（デフォルト） */
  letter-spacing: 0.15em;
}

rt {
  font-size: 0.6em;
  transform: translateY(-0.2em);
  /* 位置を微調整する場合 */
  font-weight: normal;
}

.letter-spacing-adjust {
  letter-spacing: 0.2em;
  /* 文字の間隔を0.2文字分広げる */
}

/*	講演I、II
.circle2 {	
	position: relative;
	display: inline-block;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: #F29F3A;
	box-shadow:
		0 0 0 1px #FFF,
		0 0 0 3px #F29F3A;
}
.circle2 span {
	position: absolute;
	display: inline-block;
	left: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width :80px;
	text-align:center;
	color: #FFF;
}
span {
	white-space: nowrap;
}
*/

figure a img {
  border: 8px dashed #003475;
  /*	border: 10px dotted #003475;"	*/
  /*	border: 10px dashed #003475;"	*/
}