/* 変数設定 */

:root {
    /* 色定義 */

    --color-main: #84f258;
    --color-powder-snow: #EEEEEE;
    --color-dusk: #222222;
    
    --color-header: #FFFFFF;
    --color-link: #40E0D0;
    --color-link-hover: #921a2c;
    --color-link-active: #0c2c7d;
}

/* フォント読み込み */

@import url('https://fonts.googleapis.com/css2?family=BIZ+UDGothic&display=swap');

/* ページ全体基本設定 */

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    max-width: 100%;
    font-family: "BIZ UDGothic", sans-serif;
} 

*:before, *:after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

h1 {
    font-size: 32px;
    padding: 0.5em;
    color: var(--color-powder-snow);
}

h2 {
    font-size: 24px;
    padding: 0.5em;
    margin: 0.5em 0;
    background-color: var(--color-main);
    color: var(--color-powder-snow);
}

h3 {
    font-size: 20px;
    padding: 0.5em;
    margin: 0.5em 0;
    border-color: var(--color-main);
    border-left-style: solid;
    border-left-width: 20px;
    background-color: var(--color-powder-snow);
    color: var(--color-dusk);
}

p {
    margin: 2em 0;
}

header {
    padding: 1em;
    background-color: var(--color-main);
}

header a {
    text-decoration: none;
    color: var(--color-header);
}

main {
    padding: 0 10vw;
    color: var(--color-dusk);
}

main a {
    display: inline-block;
    text-decoration: none;
    color: var(--color-link);
}

main a:hover {
    color: var(--color-link-hover);
}

main a:active {
    color: var(--color-link-active);
}

footer {
    bottom: 0;
    padding: 1em;
    background-color: var(--color-main);
    margin-top: 5em;
}

body > footer {
    position: sticky;
    top: 100vh;
}

article {
    margin-bottom: 5em;
}

table {
    margin-left: 2em;
    max-width: calc(80vw - 2em);
}

table * {
    border-collapse: collapse;
}

th {
    background-color: var(--color-main);
    color: var(--color-powder-snow);
    min-width: 5em;
    padding: 0.5em 1em;
}

td {
    background-color: var(--color-powder-snow);
    color: var(--color-dusk);
    min-width: 5em;
    padding: 0.5em 1em;
}