/* --- tabs（4等分レイアウト） --- */
.c-tabs{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5px;               /* タブ間を1px程度離す */
  background: #fff;         /* gap部分を白にする */
  margin: 40px 0px;	
}

/* タブ基本 */
.c-tab{
  appearance: none;
  border: none;
  background: #ddd;         /* 通常背景 */
  cursor: pointer;
  width: 100%;
  padding: 7px 0;
  margin: 0;
  color: #282828;           /* 通常文字色 */
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  position: relative;
  transition: background-color .2s ease;
}

/* マウスオーバー */
.c-tab:hover{
  background: #ee0141;
  color: #fff;
}

/* キーボードフォーカス */
.c-tab:focus{
  outline: 2px solid #ee0141;
  outline-offset: -2px;
}

/* 選択中 */
.c-tab.is-active{
  background: #ee0141;
  color: #fff;
}

/* panels */
.c-tabPanels{
  margin-top: 20px;
}

.c-tabPanel[hidden]{
  display: none;
}

.c-tabPanels .title-bg-sm {
		font-size: 16px;
		font-weight: bold;
		line-height: 1.5;
		padding: 7px 25px;
		color: #282828
}



/* ====== レスポンシブ：2列×2行（=2段）にする ====== */
@media only screen and (max-width:767px) {
  .c-tabs{
    grid-template-columns: repeat(2, 1fr); /* 2列に変更 → 自然に2行目に折り返し */
    margin: 20px 0px;	
	}
  .c-tab {
	padding: 7px;
    white-space: nowrap;
    font-size: 14px; /* 任意：小画面で文字サイズを少し下げる */
    }
	.c-tabPanels .title-bg-sm {
		font-size: 14px
	}	

  .officeWrap_inner {
    grid-template-columns: 1fr;
  }


}