/* ▼タブ機能の掲載領域の装飾(※必須ではありません) */
.tabbox { margin: 0px; padding: 1em; background-color: #f8f8ff; }

/* ▼タブ機能を制御するラジオボタン(非表示にする) */
.tabbox input {
   display: none;
   /* visibility: visible; */
}

/* ▼タブ(共通装飾＋非選択状態の装飾) */
.tab{
   display: inline-block;                  /* インラインブロック化 */
   border-width: 1px 1px 0px 1px;          /* 上側と左右に枠線を引く */
   border-style: solid;                    /* 枠線の種類は「実線」 */
   border-color: black;                  /* 枠線の色は「黒」 */
   border-radius: 0.75em 0.75em 0px 0px;   /* 左上と右上の角だけを丸くする */
   padding: 0.75em 1em;                    /* 内側の余白量 */
   font-weight: bold;                      /* タブの文字を太字にする */
   color: black;                         /* タブの文字色：黒色 */
   background-color: #ffffff;            /* タブの(非選択状態の)背景色：灰色 */
}

/* ▼タブにマウスポインタが載った際の装飾 */
.tab:hover {
   background-color: #ccffcc;
   color: green;
   cursor: pointer;
}

/* ▼チェックが入っているラジオボタンの隣にあるタブの装飾(＝選択状態のタブ) */
input:checked + .tab {
   color: red;
   background-color: #ffffff;
   position: relative;
   z-index: 10;
}

/* ▼タブの中身(共通装飾＋非選択状態の装飾) */
.tabcontent {
   display: none;
   border: 1px solid black;
   margin-top: -1px;
   padding: 1em;
   position: relative;
   z-index: 0;
   background-color: #ffffff;
}

/* ▼チェックが入っているラジオボタンに対応するタブの中身を表示する */
#tabcheck1:checked ~ #tabcontent1 { display: block; }
#tabcheck2:checked ~ #tabcontent2 { display: block; }
#tabcheck3:checked ~ #tabcontent3 { display: block; }
#tabcheck4:checked ~ #tabcontent4 { display: block; }