@charset "utf-8";

/* ******************************************************************

	--biz_nav_box_PC.css--

	BIZ特集　navigation button用

****************************************************************** */
.tab-switch {
  --tab-color:#0080c0;
  display: flex;
  flex-wrap: wrap;
  max-width: 800px;
  margin-inline: auto;
  gap: 0 10px;
  margin: 0 0 2rem 0;/* 上 | 右 | 下 | 左 */
}

/* ラジオ非表示 */
.tab-switch input {
  display: none;
}

/* タブボタン */
.tab-switch label {
  position: relative;/*親要素を基準点とするため必須*/
  /*overflow: hidden;子要素がはみ出る場合に非表示にする*/
  padding: 0.5em 0.7em;
  background:#eee;
  cursor: pointer;
  order: -1;
  text-align: left;
  width: 15%;
  height: 90px;
}

.tab-switch .num {
  position: absolute;
  font-size: 150%;
  font-weight: bold;
  top:  0.0rem;
  left: 2.0rem;
}

.tab-switch .top-right-text{
	position: absolute;
	top:  0.55rem;
	left: 0.5rem;
	font-size: 80%;
}

.button-text {
  position: absolute;  /*親要素を基準に配置する */
  font-size: 110%;
  /*margin: 5px;  隙間を調整 */
  line-height: 1;
  top:  2.2rem;
  left: 0.2rem;
}

/* コンテンツ非表示 */
.tab-content {
  display: none;
  width: 100%;
  padding: 1.5em 0;
  margin-top:2rem;
}

/* 選択されたタブ＋コンテンツ表示 */
.tab-switch input:checked + label {
  background: var(--tab-color);
  color: #fff;
}
.tab-switch input:checked + label + .tab-content {
  display: block;
}