/* 全体の横並び */
.tabwrapper{display:flex;align-items:flex-start;gap:12px}

/* ── 左：五角形タイトル（外＝黒、内＝白） ── */
.arrowouter{
  display:inline-block;
  background:#000;                 /* 枠の色 */
  padding:8px;                     /* 枠の太さ（ここを変える） */
  clip-path:polygon(0 0,85% 0,100% 50%,85% 100%,0 100%);
}
.arrowinner{
  background:#fff;
  clip-path:polygon(0 0,85% 0,100% 50%,85% 100%,0 100%);
  padding:16px 22px;
  min-width:160px;
  text-align:center;
  font-weight:bold;
  line-height:1.35;
}
.subtitle{display:block;font-weight:normal;font-size:12px;margin-top:6px}

/* ── 右：タブ＋内容 ── */
.tabarea{flex:1}
.tabmenu{display:flex;border-bottom:2px solid #333;margin-bottom:0}
.tab{flex:1;text-align:center;padding:8px 14px;background:#ddd;border:2px solid #333;border-bottom:none;border-radius:6px 6px 0 0}
.tab+.tab{margin-left:4px}
.tab:hover{background:#333;color:#fff}

.contents{border:2px solid #333;border-radius:0 6px 6px 6px;background:#fff;margin-top:-2px;padding:12px}
.tabcontent{display:none}

/* hoverで切替（内容はタブ列の直下で共通表示） */
.tabarea:has(.tab1:hover) .content1,
.tabarea:has(.content1:hover) .content1{display:block}
.tabarea:has(.tab2:hover) .content2,
.tabarea:has(.content2:hover) .content2{display:block}
.tabarea:has(.tab3:hover) .content3,
.tabarea:has(.content3:hover) .content3{display:block}
.tabarea:has(.tab4:hover) .content4,
.tabarea:has(.content4:hover) .content4{display:block}

/* アクティブ見た目を内容側のhoverでも維持 */
.tabarea:has(.tab1:hover) .tab1,
.tabarea:has(.content1:hover) .tab1{background:#333;color:#fff}
.tabarea:has(.tab2:hover) .tab2,
.tabarea:has(.content2:hover) .tab2{background:#333;color:#fff}
.tabarea:has(.tab3:hover) .tab3,
.tabarea:has(.content3:hover) .tab3{background:#333;color:#fff}
.tabarea:has(.tab4:hover) .tab4,
.tabarea:has(.content4:hover) .tab4{background:#333;color:#fff}

/* 何もhoverしていないときの初期表示（タブ1） */
.tabarea:not(:has(.tab:hover),:has(.contents:hover)) .content1{display:block}