/*タブ切り替え--------------------*/

/* 全体を囲むdiv（親要素）*/
.tab-wrap {
  --active-tab-color:#5f9ea0; /*選択したタブの色をここに指定*/
  --tab-gap:10px;/*タブ間の余白*/
  display: flex;
  flex-wrap: wrap;
  gap:var(--tab-gap);
}

/*タブ(label)のスタイル*/
.tab-label {
  background-color:#d2b48c;
  color: var(--active-tab-color);
  border-bottom:1px solid var(--active-tab-color);
  text-align: center;
  padding: .5em 1em;
  order: -1;/*タブを上段に表示する*/
  flex-grow:1;/*flexアイテムの伸び率を調整*/
  position:relative;
  cursor: pointer;
}

/* タブのコンテンツ部分*/
.tab-content {
  width: 100%;
  display: none;/*いったん非表示状態に設定*/
}

/* マウスを置くと透過する*/
.tab-label:hover { 
  opacity: .6;
}

/*選択されていることがわかるように、選択されているタブの色を変える*/
.tab-switch:checked+.tab-label {
  background-color:var(--active-tab-color);
  color:#fff;
}

/*吹き出し部分*/
.tab-switch:checked+.tab-label:after{
  background-color: var(--active-tab-color);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  content: "";
  height: 10px;
  left: 50%;
  position: absolute;
  top: 100%;
  transform: translateX(-50%);
  width: 20px;
}

/* 選択されているタブのコンテンツを表示させる */
.tab-switch:checked+.tab-label+.tab-content {
  display: block;
  margin-top:1em;
}

/* input（ラジオボタン）は仕組みだけ利用するため非表示 */
.tab-switch {
  display: none;
}