/* タブ：横並び＋間隔＋小画面のスクロール */
.tab {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 30px 0 20px;
    /* 下：表との間隔を広めに */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    width: 80%;
    margin: 50px auto 0;
    max-width: 900px;
    text-align: center;
}

.tab li a {
    display: block;
    background: #ececec;
    padding: 10px 20px;
    text-decoration: none;
    color: #333;
    font-size: 1.6rem;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    white-space: nowrap;
    /* 折返し防止 */
}

.tab li {
    width: 100%;
}

.tab li.active a {
    background: #8b2e2e;
    color: #fff;
    border-color: #8b2e2e;
}

/* 募集要項の表（会社概要の .table_design05 を利用想定）との間隔 */
.table_design05.recruit-table {
    width: 100%;
    margin: 20px auto 40px;
    /* タブとの縦距離＋下の余白 */
}

/* areaは基本非表示 */
.area {
    display: none;
    opacity: 0;
    background: #fff;
    padding: 28px 20px;
    transition: opacity .4s;
}

/* is-activeが付いたら表示 */
.area.is-active {
    display: block;
    opacity: 1;
}


@media (max-width: 767.98px) {
.area {
   padding: 28px 0px;
 }
}


/* スマホ微調整 */
@media (max-width: 480px) {
    .tab.recruit-tab li a {
        font-size: 1.4rem;
        padding: 10px 16px;
    }

    .recruit-table {
        margin: 16px auto 32px;
    }
    

    .area {
    padding: 28px 0 0;
}
}