@import url(https://fonts.googleapis.com/css?family=Lato:400,700);

* {
  box-sizing: border-box;
}

body {
  font-family: 'Lato';
}


/* ========== アコーディオン基本構造 ========== */



.accordion-lesson dl {
  margin: 0;
}

/* アコーディオンタイトル部分（黒帯） */
.accordion-lesson .accordion-lessonTitle {
display: none;
}


/* タイトル文字（クリック可能なリンク） */
.accordion-lesson .lesson-title-link {
  flex-grow: 1;
  color: #000;
  text-decoration: none;
  font-weight: bold;
  font-size: 1rem;
}

/* ========== アコーディオン中身 ========== */
/* アコーディオン内の親要素の高さ制限を解除 */
.accordion-lesson .accordion-lessonItem,
.accordion-lesson dd {
  height: auto !important;
  max-height: unset !important;
}

/* 内部リストの高さ制限も解除 */
.accordion-lesson .lesson-horizontal-list {
  height: auto !important;
  max-height: unset !important;
}




.accordion-lesson .accordion-lessonItemCollapsed {
  max-height: 0 !important;
  padding: 0 !important;
  border: none !important;
  max-height: 0;
  padding: 0;
  border: none;
}

.accordion-lesson dd {
  background-color: #D1F8EF;
  color: #000;
  font-size: 1em;
  line-height: 1.5em;
  padding: 1.5rem 2rem;
  margin: 0;
  width: 100%;
  /* 他と同じ幅に合わせる */
  box-sizing: border-box;
  /* パディングを含めた幅計算 */
}

.accordion-lesson dd>p {
  padding: 1em 2em 1em 2em;
}

.accordion-lesson dd ul {
  padding-left: 1.5rem;
  margin-left: 0.5rem;
}

.accordion-lesson dd li {
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 0.5rem;
}

/* ========== アニメーション ========== */

.accordion-lesson .animateIn {
  animation-name: accordionIn;
  animation-duration: 0.65s;
  animation-fill-mode: both;
}

.accordion-lesson .animateOut {
  animation-name: accordionOut;
  animation-duration: 0.75s;
  animation-fill-mode: both;
}

@keyframes accordionIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes accordionOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}

.lesson-horizontal-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
  /* 親要素が広がりすぎないように制限 */
}



.lesson-horizontal-list li {
  width: 300px;
  height: 220px;
  padding: 1rem;
  /* 重複してる */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}



/* カード内のテキスト折り返し調整 */
.lesson-horizontal-list li * {
  word-break: break-word;
  white-space: normal;
}

.lesson-horizontal-list li:hover {
  transform: scale(1.03);
}

/* 縦線（↓）の表現に修正 */
.lesson-horizontal-list li::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -40px;
  width: 2px;
  height: 40px;
  background-color: #ccc;
  transform: translateX(-50%);
  z-index: 0;
}

/* ロック状態の見た目 */
.locked {
  background-color: #f8f9fa;
  opacity: 0.5;
  pointer-events: none;
}




/* 開閉時に幅が崩れないように調整 */
.accordion-lesson .accordion-lessonItem {
  height: auto;
  overflow: hidden;
  max-height: 100%;
  /* 開閉時も幅が一定 */
  transition: max-height 0.5s ease, padding 0.3s ease;
}




.lesson-horizontal-list li .card-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  white-space: nowrap;
  /* 折り返さない */
}

.lesson-horizontal-list li .card-title .star {
  margin-left: auto;
  /* 星を右端に配置 */
}


/* 中央揃えを強制する */
.lesson-horizontal-list li .card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  /* カード全体を使う */
}

/* テキストの行間やフォントサイズを統一 */
.lesson-horizontal-list li .card-body p {
  margin: 0;
  line-height: 1.2;
  font-size: 1rem;
  text-align: center;
}

/* アイコンとテキストが縦に並ぶように調整 */
.lesson-horizontal-list li .card-body .icon {
  margin-bottom: 0.5rem;
}

/* 挑戦可能テキストとタイトルを中央に */
.lesson-horizontal-list li .card-body .title,
.lesson-horizontal-list li .card-body .description {
  display: block;
  margin: 0.2rem 0;
  text-align: center;
}

/* 高さを一定にして揃える */
.lesson-horizontal-list li .card-body {
  height: auto;
  min-height: 150px;
}


/* サイズ統一のためのスタイルを追加 */
.lesson-horizontal-list {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.lesson-horizontal-list li {
  width: 300px;
  /* 固定幅 */
  height: 220px;
  /* 固定高さ */
  margin: 0.5rem;
  padding: 1rem;
  box-sizing: border-box;
}

.lesson-horizontal-list li .card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

@media (max-width: 768px) {
  .lesson-horizontal-list {
    flex-direction: column;
    align-items: center;
  }

  .lesson-horizontal-list li {
    width: 90%;
    /* モバイル時の幅調整 */
    height: auto;
  }
}


/* カード同士の間隔をつける */
.card {
  margin: 0.5rem;

}



/* 背景と高さ */
.session-box {
  /* 青みがかった背景 */
  background-color: #f0f9ff;
  /* 高さ揃えのため */
  transition: all 0.3s ease-in-out;
}

.session-box:hover {
  transform: scale(1.01);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.session-title {
  background: linear-gradient(to right, #4a90e2, #007bff);
  /* 青のグラデーション */
  font-size: 1.25rem;
  font-weight: bold;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.accordion-lesson .accordion-lessonTitle:before {
  content: "+";
  display: inline-block;
  font-size: 1.5em;
  margin-right: 1rem;
  color: #fff!important;
  transition: all 0.3s ease;
  transform: none; /* ← 回転を無効化 */
}

.accordion-lesson .accordion-lessonTitle.accordion-lessonTitleActive:before {
  content: "-";  /* ← 半角ハイフン */
  transform: none;
}


.lesson-title-link {
  display: block;
  font-weight: bold;
  font-size: 1rem;
  text-decoration: none;
  color: white;
  padding: 0.75rem 1rem;
  border-radius: 6px;
}

/* 完了時の背景色 */
.lesson-title-link.completed {
  background-color: #28a745; /* 緑 */
}

/* 未完了時の背景色 */
.lesson-title-link.incomplete {
  background-color: #6ea8fe; /* 青 */
}

/* a:hover 対策 */
.lesson-title-link:hover {
  color: #c95957;
  text-decoration: none;
}

.lesson-completed-text {
  font-weight: bold;
  color: #2d862d;
  background-color: #d5f5d5;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.95rem;
  display: inline-block;
}