.seminar_body_content {
  padding-left: 17vw;
  padding-right: 17vw;
}

/* 基本スタイル */
.seminar_title {
  padding-left: 4vw;
  padding-top: 5vw;
  padding-bottom: 6vw;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

/* 背景画像として使うimg */
.seminar_image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
  z-index: 0;
}

/* テキストを上に重ねる */
.seminar_text {
  position: absolute;
  top: 40%;
  color: white;
  text-align: left;
  z-index: 1;
  font-size: 7vw;
  font-weight: bold;
}

.seminar_content {
  margin-bottom: 90px;
}

.seminar_description_title {
  width: 100%;
  margin: 45px 0px 45px 0px;
  text-align: center;
  color: #d4d1d1f5;
  font-weight: 700;
  font-size: 6vw;
}

.seminar_description_title.light-mode {
  color: black;
}

.seminar_description_content {
  font-size: 1.5vw;
}

.seminar_record_year_dropdown-toggle {
  all: unset;
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 16px;
  cursor: pointer;
}

.seminar_record_year-label {
  flex-shrink: 0;
  font-size: 40px;
}

.seminar_record_line {
  flex-grow: 1;
  height: 1px;
  background-color: white;
  margin: 0 8px;
}

.seminar_record_line.light-mode {
  background-color: #000;
}
.seminar_record_line
.seminar_record_year_arrow {
  flex-shrink: 0;
}
/* Record内のコンテンツの　タイトル　日付　テキストスタイル　*/
.seminar_record_day{
  font-size: 30px;
  border-left: 8px solid #343a40;
  padding-left: 10px; /* 左ボーダーと文字列の間に10pxの余白を追加 */
}
.seminar_record_description_content_title{
  font-size: 25px;
  font-weight: bold;
  padding-bottom: 20px;
}
.seminar_record_description_content_text{
  font-size: 18px;
}
/* ドロップダウンの各アイテムのスタイル */
.seminar_record_item {
    opacity: 0;           /* 最初は透明にして見えないようにする */
    transform: translateY(-10px); /* 最初は少し上にずらしておく */
    transition: opacity 0.4s ease-out, transform 0.4s ease-out; /* フェードインと落下のアニメーション */
    /* transition-delay はJavaScriptで個別に設定するのでここでは不要 */
    margin-bottom: 5px; /* 各行の間のスペース*/
    margin-left: 30px;
}
/* 最後のアイテムのmargin-bottomをなくす（任意）*/
.seminar_record_item:last-child {
    margin-bottom: 0;
}

/* seminar_record_items */
.seminar_record_description {
    display: flex;
    flex-wrap: wrap;
    width: auto;
    margin-right: 1rem;
    margin-bottom: 1rem;
}

.seminar_record_description_picture {
    display: flex; /* 画像をFlexアイテムとして並べる */
    flex-wrap: wrap; /* 画像が収まらない場合に折り返す */
    justify-content: flex-start; /* 左寄せ */
    align-items: flex-start; /* 上寄せ */
    gap: 10px; /* 画像間の間隔 */
}
.seminar_record_description_content,
.seminar_record_description_picture {
    /* flex-basis: 48%; /* flex-basis を使用して幅の基準を設定 */
    /* flex-grow: 1; を組み合わせることで、余ったスペースを埋める */
    /* flex: 1 1 48%; は flex-grow: 1; flex-shrink: 1; flex-basis: 48%; のショートハンド */
    flex: 1 1 48%; /* 2列レイアウトの基本 */
    min-width: 300px; /* 小さすぎる画面での折り返し */
    box-sizing: border-box;
    padding: 1rem;
}
.seminar_record_picture { /* imgタグに直接このクラスが付与されている前提 */
    width: calc(50% - 5px); /* 2列にするため、50%からgapの半分を引く */
    object-fit: cover; /* 画像がアスペクト比を維持しつつ、指定された領域を埋める */
    overflow: clip; /* CSS clipping を適用 */
    /* overflow-clip-margin: content-box; は、object-fit: cover; と height: 固定値; でのクリッピングでは通常不要です。 */
    /* object-fit: cover; がすでに領域内に画像を収める処理を行います。*/
    /* もし意図的にコンテンツボックスのマージンをクリップ領域に含めたい場合は記述します。*/
    /* 現在の目的（画像サイズ固定でのクリッピング）では不要です。 */
}

/* seminar_Topics */
.seminar_Topics {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

/*width変更による意図しない改行防止。*/
.seminar_Topics_event_summary,
.seminar_event_day_title,
.seminar_Content_event_title {
  white-space: nowrap;
}

.seminar_Topics_Contents,
.seminar_Topics_event_pictures {
  flex: 1 1 48%;
  min-width: 300px;
  box-sizing: border-box;
  padding: 1rem;
}

.seminar_Content_event_description_h2 {
  display: inline-block;
  margin-left: 2vw;
}

/* 画像が親に合わせて収まるようにする */
.seminar_Topics_event_pictures img {
  width: 100%;
  height: auto;
  display: block;
}

/* seminar_Topics_picture1 */
.seminar_Topics_picture1 {
  box-shadow: 2vw 2vw 1vw 0vw #9a9a9a;
}

.seminar_Topics_picture1.light-mode {
  box-shadow: 2vw 2vw 1vw 0vw #343a40;
}

.seminar_event_day_title,
.seminar_Content_event_title {
  font-size: 2vw;
}

.seminar_event_day_description,
.seminar_Content_event_description {
  font-size: 2vw;
  margin-left: 4vw;
}

.seminar_Content_event_description,
.seminar_Content_event_description_h2 {
  line-height: 1.6;
}

/* モバイルスタイル */
@media (max-width: 650px) {
  .seminar_body_content {
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .seminar_title,
  .seminar_image {
    height: 100vh;
  }

  .seminar_text {
    top: 22%;
    font-size: 15vw;
  }

  .seminar_description_title {
    font-size: 12vw;
  }

  .seminar_description_content {
    font-size: 15px;
    line-height: 30px;
  }
  .seminar_record_year-label{
    font-size: 30px;
  }
  .seminar_Topics_picture1{
    height: 9rem;
  }
    /* seminar_record_description_content, seminar_record_description_picture の横並び解除 */
  .seminar_record_description_content,
  .seminar_record_description_picture {
      flex: 1 1 100%; /* スマホでは1列にする */
      min-width: auto; /* min-widthをリセット */
  }

  /* seminar_record_picture もスマホでは1列に */
  .seminar_record_picture {
    width: calc(50% - 5px); /* PCと同じく2列表示を維持 (gapの半分を引く) */
    object-fit: cover; /* PCと同じくcoverを維持 */
    /* overflow: clip; も継承 */
  }
  /* 横並び解除 */
  .seminar_Topics {
    flex-direction: column;
  }

  /* 画像の影をなくす */
  .seminar_Topics_event_pictures {
    box-shadow: none;
  }

  .seminar_event_day_title,
  .seminar_Content_event_title {
    font-size: 5vw;
  }

  .seminar_event_day_description,
  .seminar_Content_event_description {
    font-size: 4vw;
  }

  /*--　改行解除　--*/
  .seminar_Topics_event_summary,
  .seminar_event_day_title,
  .seminar_Content_event_title {
    white-space: normal;
  }
}