/************************************
** CSSでタブ表示
************************************/
/* タブの外枠 */
.tabs {
  margin-top: 12px;
}

/* タブのスタイル */
.tabs .tab-label {
  display: inline-block;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border: 1px solid #999;
  background-color: #f3f3f3;
  margin-left: 1px;
  margin-right: 1px;
  padding: 3px 6px;
  border-bottom: none;
  font-size: 0.9em;
  text-decoration:none;
}


/* タブにマウスカーソルがのったときフッター */
.tabs .tab-label:hover {
  opacity: 0.7;
}

/* ラジオボタンと内容を非表示 */
.tabs input[name="tab-radio"],
.tabs .tab-content {
  display: none;
}

/* タブ内容のスタイル */
.tabs .tab-content{
  border: 1px solid #999;
  padding: 1em;
  width: 240px;
  min-height: 200px;
  height: 400px;
  overflow-y: none;
font-weight: normal;
text-align: left;
}
.tabs .tab-content li{
  padding-top: 5px;
  font-size: 1.1em;
}

/* 選択されているタブのコンテンツのみを表示 */
.tabs #tab-1:checked ~ .tab-1-content,
.tabs #tab-2:checked ~ .tab-2-content,
.tabs #tab-3:checked ~ .tab-3-content,
.tabs #tab-4:checked ~ .tab-4-content,
.tabs #tab-5:checked ~ .tab-5-content {
  display: block;
}

/* 選択されているタブのスタイルを変える */
.tabs input[name="tab-radio"]:checked + .tab-label {
  background-color: #fff;