@charset "UTF-8";
/* CSS Document */

.tab-wrap {
    display: flex;
    flex-wrap: wrap;
    margin: 20px 0;
}

.tab-wrap:after {
    content: '';
    width: 100%;
    height: 3px;
    background: DeepSkyBlue;
    display: block;
    order: -1;
}

.tab-label {
    color: White;
    background: LightGray;
    font-weight: bold;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
    white-space: nowrap;
    text-align: center;
    padding: 10px .5em;
    order: -1;
    position: relative;
    z-index: 1;
    cursor: pointer;
    border-radius: 5px 5px 0 0;
    flex: 1;
}

.tab-label:not(:last-of-type) {
    margin-right: 5px;
}

.tab-content {
    width: 100%;
    height: 0;
    overflow: hidden;
    opacity: 0;
}

/* アクティブなタブ */

.tab-switch:checked+.tab-label {
    background: DeepSkyBlue;
}

.tab-switch:checked+.tab-label+.tab-content {
    height: auto;
    overflow: auto;
    padding: 15px;
    opacity: 1;
    transition: .5s opacity;
    box-shadow: 0 0 3px rgba(0, 0, 0, .2);
}

/* ラジオボタン非表示 */

.tab-switch {
    display: none;
}

/*表示・非表示を切り替えるタブ---------------------------*/

/*全体*/

.hidden_box {
    display: flex;
    flex-wrap: wrap;
    margin: 20px 0;
    width: 100%;
}

/*ボタン装飾*/

.hidden_box label {
    padding: 15px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
    background: DeepSkyBlue;
}

/*ボタンホバー時*/

.hidden_box label:hover {
    background: #0099cc;
}

/*チェックは見えなくする*/

.hidden_box input {
    display: none;
}

/*中身を非表示にしておく*/

.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/

.hidden_box input:checked~.hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}

/*追加　タブオープンクローズのデザイン///////////////////////
/*チェックオフ(クローズ)*/

.tabopen:before {
    font-family: "Font Awesome 5 Free";
    content: "\f0d7";
    padding-right: 5px;
    /*文字との隙間*/
    color: white;
    /*アイコンの色*/
    font-weight: 900;
}

/*チェック時(オープン)*/

.hidden_box input:checked~.tabopen:before {
    font-family: "Font Awesome 5 Free";
    content: "\f0d8";
    padding-right: 5px;
    /*文字との隙間*/
    color: white;
    /*アイコンの色*/
    font-weight: 900;
}

.hidden_box input:checked~label {
    border-radius: 5px 5px 0 0;
    background: #0099cc;
}