.tab-switch {
   display: flex;
   flex-wrap: wrap;
   margin: auto;
   justify-content: center;
   gap: 5px;
}

.tab-switch > label {
   flex: 1 1 auto;
   order: -1;
   position: relative;
   padding: 1em;
   color: #999;
   text-align: center;
   cursor: pointer;
   transition: 0.3s all;
   font-size: 14px;
   border-radius: 10px;
   border: 1px solid;
   width: 100%;
}

/* ホバー時 */
.tab-switch > label:hover {
   background-color: #67237a;
   color: #fff;
}

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

/* 選択中のタブ */
#tab-ss:checked + label,
#tab-aw:checked + label {
   background-color: #67237a;
   color: #fff;
   border-color: #67237a;
}

/* コンテンツ非表示 */
.tab-content {
   display: none;
   width: 100%;
}

/* 選択されたタブのコンテンツを表示 */
#tab-ss:checked ~ .ss {
   display: block;
}
#tab-aw:checked ~ .aw {
   display: block;
}

.tab_wrapper p {
   font-size: 16px;
   text-align: center;
}

@media screen and (min-width: 768px) {
   .tab-switch > label {
       width: 48%;
       font-size: 16px;
   }
}

.tab_wrapper {
   padding-top: 24px;
}