/*ヤンバト仮*/
        /*折りたたみ*/
        details[open] {
            animation: fadeIn 0.5s ease;
        }
        @keyframes fadeIn {
            0% {
            opacity: 0; /* 透明 */
            transform: translateY(-10px); /* 上から表示 */
            }
            100% {
            opacity: 1;
            transform: none;
            }
        }
    
    /*表のデザイン*/
        table {
            border-collapse: collapse; /*セルを重ねて表示*/
            font-size: 80%; /*文字サイズ小さめ*/
            border: 2px solid var(--fontcolorbold); /*枠線の色と形状*/
            border-top: none;
        }
        td, th {
            padding: 0.6em 0.3em; /*内側の余白*/
            width: 7.8%;
            font-size: 0.8em; /*文字サイズ小さめ*/
            border-right: 1px solid var(--fontcolorbold);
        }
        td {
            background: var(--colorwhite);
        }
        tr:nth-child(odd) td { /*奇数行だけ背景色を変える*/
            background: var(--colortransparent3);
        }
        th {
            background: var(--tagsubcolor5);
            font-weight: normal;
            border-bottom: 1px solid var(--fontcolorbold);
            border-right: 1px solid var(--fontcolorbold);
        }
    
        .sticky01 {
            position: sticky;
            top: 0;
            left: 0;
            border-top: none;
            border-bottom: none;
        }
            .sticky01::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border-top: 2px solid var(--fontcolorbold);
                border-bottom: 1px solid var(--fontcolorbold);
            }
    
        tbody {
            -webkit-text-size-adjust: 100%; /*スマホとかの端末の文字サイズ自動調整を無効に*/
        }
    
    /*顔の画像*/
    img.ynbt_iconpic {
        vertical-align:middle;
        width:100%;
        height:100%;
    }

    /*キャラ紹介一人ずつのやつ。コピペ*/
        /*ynbt_charalist_1_btnの形状*/
        .ynbt_charalist_1_btn{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .ynbt_charalist_1_btn li {
            width: calc(10% - 4px);
            min-width: 70px;
            text-align: center;
        }
        .ynbt_charalist_1_btn li a{
            display: block;
            margin: 3px 2px; /*外側の余白*/
            padding: 0;
        }
            .ynbt_charalist_1_btn img{
                border: 2px solid var(--fontcolorbold);
                border-radius: 50%; /*角丸*/
            }
        /*liにactiveクラスがついた時の形状*/
        .ynbt_charalist_1_btn li.active img{
            opacity: 0.5;
            transition: 0.3s;
        }
        
        /*エリアの表示非表示と形状*/
        .area {
            display: none;/*はじめは非表示*/
            opacity: 0;/*透過0*/
            background: var(--colorwhite);
            padding:30px 0.5em;
        }
        
        /*areaにis-activeというクラスがついた時の形状*/
        .area.is-active {
            display: block;/*表示*/
            animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
            animation-duration: 2s;
            animation-fill-mode: forwards;
        }
        
        @keyframes displayAnime{
            from {
            opacity: 0;
            }
            to {
            opacity: 1;
            }
        }
    
        /*レイアウト装飾用*/
        .ynbt_charalist_1{
            width:100%;
            min-width: 350px;
            max-width: 960px;
            margin:50px auto 10px auto;
          }
          
          .area h3{
            display: flex;
            font-size:1.3rem;
            margin:0 0 10px 10px;
            height: 80px;
          }
          .area li{
            padding: 0.3em 0.5em; /*内側の余白*/
            border-bottom: 1px solid var(--colorwhite);
          }
    
        .ynbt_charalist_1_kao img{
            width: 80px;
            height: 80px;
            border-radius: 50%; /*角丸*/
            margin-right: 20px; /*外側の余白*/
            border: 2px solid var(--fontcolorbold);
        }
        .ynbt_charalist_1_name {
            margin: auto 0; /*外側の余白*/
        }
        .chara_moji {
            display: flex;
            width: 100%;
            font-size: 0.9em;
        }
            .chara_tag {
                font-size: 0.9em;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 8em;
                min-width: 8em;
                background-color: var(--tagsubcolor0);
                margin-right: 1.2em; /*外側の余白*/
                border-radius: 3px; /*角丸*/
            }
            .chara_name_myouji {
                margin-right: 0.7em; /*外側の余白*/
            }
            .chara_hosoku_ari {
                display: block;
                text-align: left;
            }
                .chara_hosoku {
                    font-size: 0.8em; /*文字サイズ小さめ*/
                    opacity: 0.4; /*文字色薄く*/
                }