/*Reset*/
* {
    padding: 0;
    margin: 0;
    text-decoration: none;
    color: white;
}

/*各種変数の作成*/
:root {
    --background-color: #171d48;
    --object-color: #3b427e;
    
    --bg-color-blue: #4579d8;
    --bg-color-greenblue: #125a6e;
    --bg-color-pink: #da62d0;
    --bg-color-lightbrown: #d09b6d;
    --bg-color-red: #cc3838;
}

/*背景設定*/
body {
    background-color: var(--background-color);
}

/*コンテナ設定*/
.container {
    max-width: 1500px;
    margin: 0 auto;
}

/*ヘッダー部分の設定*/
header {
    margin: 25px 0px;
}

header section div {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    
    background-color: var(--object-color);
    padding: 20px;
    
    border-radius: 1.5em;
}

h1 {
    font-size: 1.6em;
}

time {
    font-size: 1.2em;
    font-weight: bold;
    
    margin-right: 10px;
}

/*フッター部分の設定*/
footer {
    margin-top: 200px;
}

footer section div{
    font-size: 1.7em;
    font-weight: bold;
    
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

footer a {
    margin: 0 20px;
    background-color: var(--object-color);
    padding: 10px 20px;
}

/*以下はメイン部分の記事で使う基本クラスの装飾設定*/

    /*見出しの設定*/
h2 {
    font-size: 2.2em;
    text-align: center;
    background-color: var(--object-color);
    width: 100%;
    max-width: 1450px;
    padding: 10px 25px;
    margin: 50px 0px;
    border-radius: 10px;
}

   /*基本文字周りの設定*/ 
main p {
    font-size: 1.1em;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.bl {
    font-weight: 1000; 
}

.bg {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    
    word-wrap: initial;
    
    margin: 20px auto;
    max-width: 1400px;
    padding: 20px 10px 5px 20px;
    border-radius: 20px;
    
    background-color: var(--object-color);
}

/*リストの設定*/
ul {
    font-size: 1.3em;
    font-weight: 600;
    list-style: none;
    margin: 0 0px 20px 190px
}

    /*テーブルの設定*/
.element {
    font-size: 1.4em;
    margin: 20px auto; 
    
    border-collapse: collapse;
}

.element th {
    border: 5px solid var(--object-color);
    padding: 22px;
}

.element thead th {
    background-color: #444fa2;
}

.element tbody th {
    font-size: 2em;
    background-color: #4852b3;
}

    /*広告の設定*/
.ad {
    text-align: center;
    margin-bottom: 40px;
}

/*スマホ画面への設定*/
@media screen and (max-width: 768px) {
    
         /*フッター部分の設定*/
    footer {
    margin-top: 100px;
    }
         
    footer section div{
        font-size: 0.8em;
        font-weight: bold;
        
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
    }
    
        /*見出しの設定*/
    h2 {
        font-size: 1.5em;
        text-align: center;
        background-color: var(--object-color);
        width: 100%;
        max-width: 768px;
        padding: 10px 0;
        margin: 50px 0px;
        border-radius: 10px;
    }
    
        /*リストの設定*/
    ul {
        font-size: 0.9em;
        font-weight: 600;
        list-style: none;
        margin: 0 0px 20px 0px
    }

        /*テーブルの設定*/
    .element {
        font-size: 0.9em;
        margin: 20px auto; 
        
        border-collapse: collapse;
    }

    .element th {
        border: 5px solid var(--object-color);
        padding: 5px;
    }

    .element thead th {
        background-color: #444fa2;
    }

    .element tbody th {
        font-size: 1em;
        background-color: #4852b3;
    }
    
        /*広告の設定*/
    .ad  img, .ad iframe{
        width: 350px;
        height: auto;
    }
}