CSSで作るコンテンツを縦に展開・収納できるアコーディオンメニュー

<div class="accordion">
  <input type="checkbox" id="section1">
  <label for="section1">Section 1</label>
  <div class="content"><b>DX（デジタルトランスフォーメーション）の実現</b><br>
「デジタルトランスフォーメーション（DX）は、単なるITツールの導入にとどまらず、企業文化やビジネスモデルそのものを変革する取り組みです。このセクションでは、DX推進の成功事例や、効率的に進めるためのアプローチを詳しく紹介します。また、データ活用の基盤構築や業務プロセスの自動化、社員のスキル向上を通じて、組織全体がDXを加速させるための具体策について考察します。」</div>
 
  <input type="checkbox" id="section2">
  <label for="section2">Section 2</label>
  <div class="content"><b>AIと機械学習の最新動向</b><br>
「AI（人工知能）や機械学習は、ビジネスの様々な分野で活用が進み、競争優位性を高める重要な要素となっています。本セクションでは、画像認識や自然言語処理などの技術トレンド、オープンソースのツールやフレームワーク（TensorFlowやPyTorchなど）の活用方法、さらに導入事例を通じてAI技術の実践的な応用方法を解説します。AIを活用したデータ分析や意思決定のスピードアップを実現する秘訣も学びましょう。」</div>
</div>

.accordion input[type="checkbox"] {
  display: none;
}
 
.accordion label {
  display: block;
  padding: 10px;
  background: #c91e44;
  color: white;
  border: 1px solid #ddd;
  cursor: pointer;
}
 
.accordion .content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: #f9f9f9;
  padding: 0 10px;
}
 
.accordion input[type="checkbox"]:checked + label + .content {
  max-height: 100px;
}