/*項目ごとに白背景の塊を作る*/
    .charapage_bg {
        background-color: var(--colorwhite);
        width: 100%;
        border: 3px solid var(--maincolor1);
        border-radius: 15px;
        padding: 20px 8px; /*内側*/
        align-items: center;
        margin-top: 40px; /*外側*/
    }
        /*いちばん上はmargin-topなし*/
        .charapage_bg:first-child {
            margin-top: 0;
            padding: 20px;
        }
        
    /*キャラ個別ページの見出しは上の余白なくす*/
    .charapage_bg h1, .charapage_bg h2, .charapage_bg h3  {
        margin-top: 0; /*外側*/
        padding-top: 0; /*内側*/
    }
        /*キャラ個別ページのh2のデザイン*/
        .charapage_bg h2 {
            text-align: center;
            color: var(--fontcolor2);
            border-bottom: 5px dotted var(--maincolor1);
            padding-bottom: 5px; /*内側*/
            margin: 0 auto; /*外側*/
        }

    /*顔の画像*/
    .charaimg_face {
        width: 40%;
        min-width: 300px;
        border-radius: 15px;
        border: 3px solid var(--maincolor1);
    }

    /*顔画像以外の文字部分の余白など*/
    .charapage_base_waku {
        width: 60%;
        min-width: var(--min_width_mobile);
        padding: 0 2.5em; /*内側*/
    }
        /*名前以外の行間開ける*/
        .charapage_marbottom {
            margin-bottom: 5px; /*外側*/
        }
        /*属性アイコンと見出しを１列に*/
        .charapage_iconbar {
            display: flex;
            flex-wrap: nowrap;
            justify-content: left;
            min-width: 300px;
            align-items: center;
        }
            /*ここの属性アイコンのサイズを少し大きく、余白も追加*/
            .charapage_base_waku .chara_icon {
                height: 35px;
                width: 35px;
                border-radius:10px; /*角丸く*/
                line-height: 35px;
                font-size: 30px;
                margin: 0 10px 0 0; /*外側*/
                text-align: center;
            }
                /*girlのアイコンサイズも変更*/
                .charapage_base_waku .chara_icon_2girl {
                    font-size: 30px;
                }
            /*見出しの余白やデザイン*/
            .charapage_base_waku .charapage_label {
                font-weight: bold;
                text-align: center;
                width: 9em;
                margin-right: 0.8em; /*外側*/
                background-color: var(--subcolor2);
                color: var(--fontcolor2);
                padding: 0.2em 0.5em; /*内側*/
                border-radius: 5px;
            }
            
    /*キャラ個別ページ内のflex_centerを上揃えに*/
    .charapage_bg .flex_center {
        align-items: flex-start;
    }
        /*2分割*/
        .charapage2bun {
            text-align: center;
            width: 50%;
            min-width: var(--min_width_mobile);
            padding: 0 1em; /*内側*/
        }
            /*その中の１項目ごとに余白*/
            .charapage2bun_1 {
                padding: 1em 0; /*内側*/
            }
            /*その中の見出しのデザイン*/
            .charapage2bun .charapage_label, .charapage2bun h3 {
                text-align: center;
                font-size: 1.2em;
                font-weight: bold;
                width: 100%;
                background-color: var(--tagbasecolor);
                color: var(--colorwhite);
                padding: 0.4em 0.5em; /*内側*/
                margin-bottom: 0.6em; /*外側*/
                border-radius: 5px;
            }
            /*その中のボタンの余白調整*/
            .charapage2bun .btn2bun {
                margin: 0.3em 0; /*外側の余白*/
                padding: 0.4em 0; /*内側*/
            }
                /*１列に配置するときのボタンの横幅*/
                .charapage_iconbar .btn2bun {
                    text-align: left;
                    font-size: 0.9em;
                    width: 70%;
                    min-width: 180px;
                    padding-left: 0.5em;
                }
            /*その中の見出しの配置*/
            .charapage2bun .charapage_iconbar {
                align-items: baseline;
            }
            /*その中の箇条書きのデザイン*/
            .charapage2bun .charapage_lilabel {
                width: 30%;
                min-width: 120px;
                margin: 2px 0.6em 2px 0; /*外側*/
                font-weight: bold;
                text-align: center;
                background-color: var(--subcolor2);
                color: var(--fontcolor2);
                padding: 0.2em 0.5em; /*内側*/
                border-radius: 5px;
            }
            /*その中のpのデザイン*/
            .charapage_p {
                width: 100%;
                min-width: 300px;
                padding: 0 0.8em; /*内側*/
            }
    /*中央寄せする見出し*/
    .charapage_center_waku {
        text-align: center;
    }
        /*中央寄せ見出しのデザイン*/
        .charapage_center_waku .charapage_label, .charapage_center_waku .charapage_lilabel {
            font-weight: bold;
            text-align: center;
            background-color: var(--subcolor2);
            color: var(--fontcolor2);
            border-radius: 5px;
            width: 100%;
            padding: 0.2em 0.5em; /*内側*/
            margin-bottom: 1em; /*外側*/
        }
            /*最初の部分以外は余白減らす*/
            .charapage_small .charapage_lilabel {
                font-size: 0.9em;
                width: 90%;
                margin-bottom: 0; /*外側*/
                margin: 0 auto; /*外側*/
                margin-top: 0.8em; /*外側*/
            }
        /*中央寄せのボタンの余白調整*/
        .charapage_center_waku .btn2bun {
            margin: 0; /*外側の余白*/
            padding: 0.4em 0; /*内側*/
            width: 95%;
            max-width: 300px;
        }

    /*関連キャラクターボタン*/
    .charapage_kanren_btn {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        height: 140px;
        background-color: var(--colorwhite);
        border: 2px solid var(--fontcolorlink1);
        color: var(--fontcolor2);
        border-radius: 10px;
        transition: 0.3s;
        margin: 1em 0.5em; /*外側*/
        padding: 0.5em; /*内側*/
    }
        .charapage_kanren_btn:hover{
            background-color: var(--colortransparent3);
            color: var(--fontcolorlink1);
        }
        /*ボタンの画像*/
        .charaimg_kanren {
            vertical-align:middle;
            border-radius: 5px;
            width:auto;
            height:auto;
            max-width: 25%;
        }
        /*文字の部分*/
        .charapage_kanren_text {
            font-size: 0.8em;
            padding: 0 0 0 1em; /*内側*/
        }
            /*名前の下に余白*/
            .charapage_kanren_text .bold {
                color: var(--fontcolorlink1);
                margin-bottom: 5px; /*外側*/
            }
    
    /*画像資料の大枠（背景）*/
    .charapage_shiryou_waku {
        background-color: var(--subcolor2);
        padding: 20px 0; /*内側*/
        width: calc(100% + 16px);
        margin: 40px -8px;
    }
    /*画像資料の文字中央寄せ*/
    .charapage_shiryou {
        text-align: center;
    }
        /*見出しデザイン*/
        .charapage_shiryou .charapage_label {
            text-align: center;
            font-weight: bold;
            padding: 0 0.5em 1em 0.5em; /*内側*/
            margin: 0 auto; /*外側*/
        }
        
    
    /*設定資料とプロフィール画像*/
    .charaimg_big {
        vertical-align:middle;
        width:auto;
        height:auto;
        max-width: 100%;
        padding: 0; /*内側*/
        margin: 1em 0; /*外側*/
        cursor: pointer;
    }