パーツ（コンテンツタブ）

/* --- コンテンツタブ --- */
/* --- コンテンツタブ（汎用版） --- */
.tab-container {
display: flex;
flex-wrap: wrap;
max-width: 900px;
margin: 40px auto;
}

/* ラジオボタンを隠す（クラス指定に変更） */
.tab-switch {
display: none;
}

/* --- タブの基本デザイン --- */
.tab-label {
display: block;
padding: 12px 18px;
margin-right: 4px;
border: 1px solid #ccc;
border-bottom: none;
border-radius: 10px 10px 0 0;
color: #000;
font-weight: bold;
text-align: center;
cursor: pointer;
position: relative;
margin-bottom: -1px;
z-index: 1;
transition: opacity 0.2s ease;
opacity: 0.8;
}

/* 各色の背景指定（そのまま） */
.label-green { background-color: #F0FFF4; }
.label-yellow { background-color: #FFFFF0; }
.label-pink { background-color: #FFF0F5; }
.label-blue { background-color: #F0F8FF; }
.label-orange { background-color: #FFF5E6; }
.label-cyan { background-color: #F0FFFF; }
.label-purple { background-color: #F8F8FF; }
.label-grey { background-color: #F5F5F5; }

/* アクティブ時の共通設定 */
.tab-switch:checked + .tab-label {
color: #00afcc;
opacity: 1;
z-index: 3;
border-bottom: 1px solid transparent;
}

/* コンテンツエリア */
.tab-content {
display: none;
width: 100%;
padding: 30px;
border: 1px solid #ccc;
order: 10;
box-sizing: border-box;
border-radius: 0 10px 10px 10px;
}

/* --- 切り替えロジック（IDではなくクラスで判定） --- */
.rs1:checked ~ .content-green { display: block; background-color: #F0FFF4; }
.rs2:checked ~ .content-yellow { display: block; background-color: #FFFFF0; }
.rs3:checked ~ .content-pink { display: block; background-color: #FFF0F5; }
.rs4:checked ~ .content-blue { display: block; background-color: #F0F8FF; }
.rs5:checked ~ .content-orange { display: block; background-color: #FFF5E6; }
.rs6:checked ~ .content-cyan { display: block; background-color: #F0FFFF; }
.rs7:checked ~ .content-purple { display: block; background-color: #F8F8FF; }
.rs8:checked ~ .content-grey { display: block; background-color: #F5F5F5; }

@media screen and (max-width: 600px) {
.tab-label { padding: 10px 8px; font-size: 11px; margin-right: 2px; }
}

<div class="tab-container">
<input type="radio" name="tab1-group" id="tab1-radio1" class="tab-switch rs1" checked>
<label class="tab-label label-green" for="tab1-radio1">1stグリーン</label>

<input type="radio" name="tab1-group" id="tab1-radio2" class="tab-switch rs2">
<label class="tab-label label-yellow" for="tab1-radio2">1stイエロー</label>

<input type="radio" name="tab1-group" id="tab1-radio3" class="tab-switch rs3">
<label class="tab-label label-pink" for="tab1-radio3">1stピンク</label>

<input type="radio" name="tab1-group" id="tab1-radio4" class="tab-switch rs4">
<label class="tab-label label-blue" for="tab1-radio4">1stブルー</label>

<input type="radio" name="tab1-group" id="tab1-radio5" class="tab-switch rs5">
<label class="tab-label label-orange" for="tab1-radio5">オレンジ</label>

<input type="radio" name="tab1-group" id="tab1-radio6" class="tab-switch rs6">
<label class="tab-label label-cyan" for="tab1-radio6">1stシアン</label>

<input type="radio" name="tab1-group" id="tab1-radio7" class="tab-switch rs7">
<label class="tab-label label-purple" for="tab1-radio7">1stパープル</label>

<input type="radio" name="tab1-group" id="tab1-radio8" class="tab-switch rs8">
<label class="tab-label label-grey" for="tab1-radio8">1stグレー</label>

<div class="tab-content content-green">
<p>パステルグリーンのコンテンツです。背景色はハニーデュー（#F0FFF4）です。</p>
</div>
<div class="tab-content content-yellow">
<p>パステルイエローのコンテンツです。背景色はアイボリー（#FFFFF0）です。</p>
</div>
<div class="tab-content content-pink">
<p>パステルピンクのコンテンツです。背景色はラベンダーブラッシュ（#FFF0F5）です。</p>
</div>
<div class="tab-content content-blue">
<p>パステルブルーのコンテンツです。背景色はアリスブルー（#F0F8FF）です。</p>
</div>
<div class="tab-content content-orange">
<p>パステルオレンジのコンテンツです。背景色はシェルピーチ（#FFF5E6）です。</p>
</div>
<div class="tab-content content-cyan">
<p>パステルシアンのコンテンツです。背景色はアズール（#F0FFFF）です。</p>
</div>
<div class="tab-content content-purple">
<p>パステルパープルのコンテンツです。背景色はゴーストホワイト（#F8F8FF）です。</p>
</div>
<div class="tab-content content-grey">
<p>パステルグレーのコンテンツです。背景色はホワイトスモーク（#F5F5F5）です。</p>
</div>
</div>

<div class="tab-container">
<input type="radio" name="tab2-group" id="tab2-radio1" class="tab-switch rs1" checked>
<label class="tab-label label-green" for="tab2-radio1">2ndグリーン</label>

<input type="radio" name="tab2-group" id="tab2-radio2" class="tab-switch rs2">
<label class="tab-label label-yellow" for="tab2-radio2">2ndイエロー</label>

<input type="radio" name="tab2-group" id="tab2-radio8" class="tab-switch rs8">
<label class="tab-label label-grey" for="tab2-radio8">2ndグレー</label>

<div class="tab-content content-green">
<p>2つ目のタブセットのグリーンです。</p>
</div>
<div class="tab-content content-yellow">
<p>2つ目のタブセットのイエローです。</p>
</div>
<div class="tab-content content-grey">
<p>2つ目のタブセットのグレーです。</p>
</div>
</div>

/* アコーディオン式Ｑ＆Ａ */
/* 1. 既存のsummaryの矢印を、このクラスの中だけで消す */
.qa-item summary {
list-style: none;
cursor: pointer;
}
.qa-item summary::-webkit-details-marker {
display: none; /* iOS/Safari用 */
}

/* 2. 枠線などのデザイン */
.qa-item {
border-bottom: 1px solid #ccc;
overflow: hidden;
}

.qa-title {
position: relative;
padding: 15px 40px 15px 15px; /* 右側にアイコン用の余白 */
background-color: #ffffff;
font-weight: bold;
display: block; /* 既存のsummaryスタイルを上書き */
}

/* 3. 「＋」アイコンの作成（擬似要素） */
.qa-title::before,
.qa-title::after {
content: "";
position: absolute;
right: 20px;
top: 50%;
width: 12px;
height: 2px;
background-color: #000; /* アイコンの色 */
transition: transform 0.3s;
}

/* 縦棒を回転させて「＋」にする */
.qa-title::before {
transform: translateY(-50%) rotate(90deg);
}
.qa-title::after {
transform: translateY(-50%);
}

/* 4. 開いた時（open属性）の「ー」への変化 */
.qa-item[open] .qa-title::before {
transform: translateY(-50%) rotate(0deg); /* 縦棒を寝かせる */
}

/* 5. 回答エリア */
.qa-body {
padding: 15px;
background-color: #fcfcfc;
}

<div class="qa-container">
<details class="qa-item">
<summary class="qa-title">
ここに質問が入ります。
</summary>
<div class="qa-body">
<p>ここに回答の内容が入ります。既存のスタイルとは干渉しません。</p>
</div>
</details>

<details class="qa-item">
<summary class="qa-title">
２つ目つ目の質問はこちら
</summary>
<div class="qa-body">
<p>HTMLとCSSだけで完結しており、1ページに何個設置しても独立して動作します。</p>
　　<p>HTMLとCSSだけで完結しており、1ページに何個設置しても独立して動作します。</p>
　　<p>HTMLとCSSだけで完結しており、1ページに何個設置しても独立して動作します。</p>
</div>
</details>

<details class="qa-item">
<summary class="qa-title">
３つ目の質問はこちら
</summary>
<div class="qa-body">
<p>HTMLとCSSだけで完結しており、1ページに何個設置しても独立して動作します。</p>
<p>HTMLとCSSだけで完結しており、1ページに何個設置しても独立して動作します。</p>
<p>HTMLとCSSだけで完結しており、1ページに何個設置しても独立して動作します。</p>
</div>
</details>

<details class="qa-item">
<summary class="qa-title">
４つ目の質問はこちら
</summary>
<div class="qa-body">
<p>HTMLとCSSだけで完結しており、1ページに何個設置しても独立して動作します。</p>
<p>HTMLとCSSだけで完結しており、1ページに何個設置しても独立して動作します。</p>
</div>
</details>

<details class="qa-item">
<summary class="qa-title">
５つ目の質問はこちら
</summary>
<div class="qa-body">
<p>HTMLとCSSだけで完結しており、1ページに何個設置しても独立して動作します。</p>
</div>
</details>

<details class="qa-item">
<summary class="qa-title">
2つ目の質問はこちら
</summary>
<div class="qa-body">
<p>HTMLとCSSだけで完結しており、1ページに何個設置しても独立して動作します。</p>
</div>
</details>
</div>