@charset "UTF-8";

body{
    text-align: center;
}

header {
    text-align: center;
}
    header h1 {
        text-align: center;
        color: #fff;
        font-size: 2.4em;
        width: 100%;
        background-color: black;
        font-weight: lighter;
        padding: 40px;
    }
    header img {
    margin: 25px;
    }

    .mos {
        max-width: 100%;
        padding: auto;
    }

h2 {
    background-color: black;
    text-align: center;
    color: white;
    font-weight: lighter;
    margin: 25px 0px 25px 0px;
}

.danyaku {
    display: flex;
    flex-wrap: wrap;
    max-width: 800px;
    margin: auto;
    border: 1px #ccc solid;
    border-right: none;
}
    .danyaku figure{
        width: calc(100% / 6 );
        border-right: 1px #ccc solid;/*solid＝実線*/
    }
    .danyaku figure img{
        vertical-align: bottom;
        width: 100%;
    }
    .danyaku figure figcaption {
        font-size: 16px;
        border-top: 1px #ccc solid;
        padding: 3px 0;
    }


table , td, th {
	border: 1px solid #595959;
	border-collapse: collapse;
}
td, th {
	padding: 3px;
	width: 30px;
	height: 25px;
}

div.buki {
    display: flex;
    max-width: 800px;
    flex-wrap: wrap;
    margin: auto;
    justify-content: space-between;/*flexの子要素を均等に割り付ける*/
}
    div.buki table{
        width: 48%;
        margin-bottom: 20px;
    }
    div.buki table td.bukiimg {
        width: 63%;
        padding: 0;
    }
        div.buki table td.bukiimg img{
            max-width: 100%;
        }
    div.buki table td.bukitxt {
        text-align: left;
    }
        div.buki table td span{
            display: inline-block;
        }
        div.buki table tr td::before{/*tdの前に疑似要素を生み出す*/
            content: "";
            display: block;
            color: #888;
        }
         
        div.buki table tr.bukisute td:first-child::before{/*first-child=最初の子要素*/
            content: "装填数";/*疑似要素に書く内容、書かないと何もできない*/
        }
        div.buki table tr.bukisute td:nth-child(2)::before{/*nth-child()=()内の数字ので何番目か指定する*/
            content: "ダメージ";
        }
        div.buki table tr.bukisute td:last-child::before{/*last-child=最後*/
            content: "DPS";
        }
        div.buki table td.bukitxt::before{
            content: "説明";
        }